如何将边框样式添加到在 jquery 中动态添加行的表？答案

【问题标题】：How to add border style to a table whose rows are added dynamically in jquery?如何将边框样式添加到在 jquery 中动态添加行的表？
【发布时间】：2014-03-10 14:38:59
【问题描述】：

我正在尝试将 css 添加到在按钮单击时动态创建的表中。在点击事件上调用的函数有下面的 qjuery 部分，它创建动态行

$("#employeDetail").append('<tr class="hide1" id="row'+empCurrentIndex+'">' +'<td >'+employerName[empCurrentIndex]+'</td>' +'<td >'+empMobileNo[empCurrentIndex]+'</td>' +'<td >'+emplocation[empCurrentIndex]+'</td>' +'<td >'+empTotNoMonth[empCurrentIndex]+'</td>' +'<td><button class="btn" name="delete" value="Delete" onclick="return deleteEmpRow('+empCurrentIndex+');">Delete</button></td>' +'<td><button class="btn" name="edit" value="Edit" onclick="return editEmpRow('+empCurrentIndex+');">Edit</button></td>' +'</td></tr>').addClass('newRow');

按钮位于调用此 javascript 函数以创建动态行的 table 标记下。我想给这个创建的行加上边框。我试过 .addClass('newRow') where

  .newRow{
   border:5px;
   border-color:red;
  }

但它似乎并不适用。任何帮助将不胜感激。

谢谢

【问题讨论】：

尝试将表格样式设置为border-collapse: separate;

标签： javascript jquery html css

【解决方案1】：

您的问题是 append() 不返回该行，而是您将其附加到的内容。有几种方法可以解决这个问题，但在这种情况下，最简单的方法是将类放在创建行的类属性中......

$("#employeDetail").append('<tr class="hide1 newRow" id="row'+empCurrentIndex+'">'
        +'<td >'+employerName[empCurrentIndex]+'</td>'
        +'<td >'+empMobileNo[empCurrentIndex]+'</td>'
        +'<td >'+emplocation[empCurrentIndex]+'</td>'
        +'<td >'+empTotNoMonth[empCurrentIndex]+'</td>'
        +'<td><button class="btn" name="delete" value="Delete" onclick="return deleteEmpRow('+empCurrentIndex+');">Delete</button></td>'
        +'<td><button class="btn" name="edit" value="Edit" onclick="return editEmpRow('+empCurrentIndex+');">Edit</button></td>'
        +'</td></tr>');

【讨论】：

【解决方案2】：

我不确定你的 Javascript，但你的 CSS 应该是：

.newRow td {
   border-bottom: 5px solid red;
}

目前，您将newRow 类添加到<table> 标记而不是<td> 标记。我还使用了 CSS 的简写，它指定你想要一个“实心”边框。

【讨论】：

【解决方案3】：

那是因为您将 newRow 类添加到#employeDetail。我想那是表格元素？您需要将该类添加到新创建的行中。

 $('#row'+empCurrentIndex+').addClass('newRow');

试试看。

【讨论】：