javascript - CSS 未应用于嵌套的 HTML 表格

Question

当我尝试使用 javascript 处理嵌套表格时，我遇到了困难。我的 css 样式 tr.odd 在更改后未应用于奇数行。当我尝试调试时，我最内层的表结构本身并不存在。在运行时也没有异常。以前的代码运行良好。由于一些边距问题，我通过在现有表格中创建表格来更改奇数行上的一些代码，现在没有应用 CSS 样式。

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;
}

上一个脚本(工作):

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>");

当前脚本(不工作):

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>" +
                        "</table>" +
                    "</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>");

Answer 1

你所做的是无效的。

因为表格应该放在 td 中，但您却将其放在 tr 中。

尝试添加这个:

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