Nested HTML tables are not receiving CSS styling

When attempting to manipulate nested tables using JavaScript, I encountered a roadblock. The CSS style tr.odd is no longer being applied to odd rows after I made changes. Upon debugging, I discovered that the innermost table structure was missing without any runtime exceptions.

CSS:

tr.odd
{
background-color:#f3f4f5;
\-webkit-font-smoothing: antialiased;
font-weight: normal;
margin: 10px 20px;
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}

Previous Script (Functional):

if(line%2==0)
                 $(obj).find('#abc tr:last').after("<tr class='odd'><td><i class='fa fa-building-o'> <b class='companyName' id='oddEmpName'>"+emp+"</b><br/><i class='fa fa-briefcase'> "+eventName+"</br><i class='fa fa-cubes'> "+ind+"</br><i class='fa fa-map-marker'> "+loc +"</td></tr>");
             else
                 $(obj).find('#abc tr:last').after("<tr class='even'><td><i class='fa fa-building-o'> <b class='companyName'id='evenEmpName'>"+emp+"</b><br/><i class='fa fa-briefcase'> "+eventName+"</br><i class='fa fa-cubes'> "+ind+"</br><i class='fa fa-map-marker'> "+loc +"</td></tr>");

Current Script (Malfunctioning):

if(line%2==0)
                 $(obj).find('#abc tr:last').after("<tr class='odd'>" +
                        "<table>" +
                            "<tbody>" +
                                "<tr>" +
                                    "<td><i class='fa fa-building-o'></td>" +
                                    "<td>"+emp+"</td>" +
                                "</tr>" +
                                "<tr>" +
                                    "<td><i class='fa fa-briefcase'></td>" +
                                    "<td>"+eventName+"</td>" +
                                "</tr>" +
                                "<tr>" +
                                    "<td><i class='fa fa-cubes'></td>" +
                                    "<td>"+ind+"</td>" +
                                "</tr>" +
                                "<tr>" +
                                "   <td><i class='fa fa-map-marker'></td>" +
                                    "<td>"+loc+"</td>" +
                                "</tr>" +
                            "</tbody>" +
                    "</tr>");
             else
                 $(obj).find('#abc tr:last').after("<tr class='even'><td colspan='2'><i class='fa fa-building-o'> <b class='companyName'id='evenEmpName'>"+emp+"</b><br/><i class='fa fa-briefcase'> "+eventName+"</br><i class='fa fa-cubes'> "+ind+"</br><i class='fa fa-map-marker'> "+loc +"</td></tr>");
javascriptjqueryhtmlcss

Answer №1

Your approach is incorrect.

Tables should be placed inside td elements, not tr elements.

Consider inserting the table like this:

$(obj).find('#abc tr:last').after("<tr class='odd'><td>" +
                                   "<table>" + 
                                     // keep other code unchanged.
                                   + "</table>" + "</td></tr>");

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JQuery to assign a value to a hidden input field

How do I add value to a hidden input field? In this scenario, the input is created as a variable and later inserted into the DOM if necessary. Here is the code snippet: <script> var form = $('form#small_ad_form'), help = $('di ...

javascriptjquery

Django RGBField cannot locate jQuery

Working on a project that utilizes an RGBField, the following script is injected into the template (nested deep within django's structure, as its exact location remains elusive): <script type="text/javascript"> (function($){ ...

javascriptjquerypythondjangocypress

Challenges encountered in d3.js when parsing through data sets

For the past two days, I have been struggling to solve this error and I'm at a loss. Every time I try to add data to the visualization, I encounter the following error: Uncaught TypeError: Cannot read property 'length' of undefined It seem ...

javascriptjqueryd3.jssvg

Conceal a row in a table after successfully executing a delete query using Ajax

Currently, I am facing an issue with hiding rows within a while loop. My goal is to hide an entire row once the delete query has been successful. The deletion query itself is functioning correctly, but I require assistance in properly hiding the row. Any h ...

javascriptphphtmlajax

The output is: [object of type HTMLSpanElement]

<form> <table> <tr> <td>Distance:</td> <td><input type="number" id="distance" onKeyUp="calculate();">m</td> </tr> <tr> <td>Time:</td> ...

javascripthtml

Creating a Mongoose Schema to store geoJson coordinates

I attempted to design a schema for geojson but ran into some issues with the syntax when handling coordinates. This is my current code: var DataSchema = new Schema({ properties: { title: { type: String, required: true }, description: { ty ...

javascriptnode.jsmongodbexpressmongoose

A dynamic input field will appear on the page following the closing </form> tag

I encountered an unusual situation where upon clicking a button with the id #fusk, dynamic elements are added. Here is the code snippet: $('#imgc').append( "<div class='divi'>" + "<input type='hidden' name=' ...

javascriptjqueryhtml

What is the best way to refresh a single component in my application without causing the other components to reload?

I've been working on a review application with Vue.js that fetches random facts from an API (https://uselessfacts.jsph.pl/random.json?language=en) and allows users to provide feedback through radio buttons and text inputs. Once submitted, the feedback ...

javascriptvue.js

Is there a way to position the primefaces DefaultMenuModel in front of an accordion panel?

Currently, I have a DefaultMenuModel nested within a tab in an accordion panel. However, the menu is appearing behind the tab of the accordion panel and I want to adjust the z-index of the menu so that it appears in front of the tab. Here is the current ...

htmlcssjsfprimefaces

I can generate results by clicking on labels that trigger prompts

I created an HTML file and a JS file, but I encountered some issues. In the HTML file, there are 5 labels without specific id or class names. When I click on each label, a popup prompt appears and changes the style accordingly. Changing the style is not ...

javascripthtmllabelprompt

Discovering duplicates for properties within an array of objects in React.js and assigning a sequential number to that specific field

I am working with an array of objects where each object contains information like this: const myArr=[{name:"john",id:1}{name:"john",id:2}{name:"mary",id:3}] In the first 2 elements, the "name" property has duplicates with the value "john". How can I updat ...

javascriptarraysreactjstypescriptecmascript-6

Managing spinners in Protractor when they are concealed by a wrapper element

While writing a test for an Angular app using Protractor, I encountered several issues with handling spinners. I managed to solve some of them, but I'm unsure how to test spinners that are hidden by a wrapper. For instance, when the parent tag has ng- ...

javascriptangularjsseleniumprotractore2e-testing

Implementing JavaScript to Retrieve and Insert Full HTML Tags into a Textarea

I am currently trying to extract an HTML source code value and insert it into a specific textarea or div upon clicking a button. However, I am encountering issues where I am not receiving the entire HTML tags - it seems to begin with a Meta tag and is remo ...

javascriptjqueryhtmltagsdoctype

The react-transition-group fails to function properly until the page is reloaded

My task scheduler using React Router 5 and React Redux is working fine. Now I am trying to animate transitions between different routes using react-transition-group. When I click the URL changes, but the screen does not re-render until I manually reload ...

cssreactjsreduxreact-hooksreact-router

Struggling with managing multiple checkboxes in React with a single onChange event handler not functioning

I am currently working on a project that involves multiple checkboxes. My goal is to use one onChange function to keep track of the checked boxes, store their values inside an array, and remove them when unchecked. However, I seem to be encountering an err ...

javascriptreactjs

Traversing within an entity

I came across something confusing to me within the for loop: var info = { "full_name" : "John Doe", "title" : "FrontEnd", "links" : { "blog" : "JohnDoe.com", "facebook" : "http://facebook.com/JohnDoe", "youtube" : "http://www.youtube. ...

javascriptjsonobject

Storing the ID passed from Next.js/Link into Next.js

I'm encountering some issues with the current flow setup. I have a component ArticleList that listens to articles, and upon clicking on it, redirects you to the individual article page. The redirection is done using next/Link, where the id is passed a ...

javascriptreactjsnext.js

Ways to conceal the contents of an HTML element

I recently applied a background image to my "a" tag, but now I'm looking to hide only the HTML content within the tag. It's important that the background image and href address remain visible. Any suggestions on how to achieve this? Thank you in ...

javascriptjqueryhide

Using AngularJS to dynamically swap out {{post.title}} with a different HTML file

I want to update the value of {{post.title}} within my HTML to redirect to another HTML file. <div ng-repeat="post in posts"> <h2> {{post.title}} <a ng-click="editPost(post._id)" class="pull-r ...

javascripthtmlangularjs

Is there a way to retrieve the name of a JSON or obtain the file path using NodeJS Express Router?

I've been experimenting with adding a named routers feature to the Express router for my NodeJS project. I managed to implement it successfully, but there's one thing I'm stuck on... the path. Specifically, when I have a route setup like thi ...

javascriptnode.jsjsonexpressroutes