CSS未应用于嵌套的HTML表

CSS not applied on nested HTML tables

本文关键字：HTML 嵌套 应用于 CSS      更新时间：2023-09-26

当我尝试使用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>");

您所做的是无效的。

因为一个表应该放在td中，但你却把它放在了tr中。

尝试添加以下内容：

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