Question

我正在尝试将css添加到按钮单击时动态创建的表。在click事件上调用的函数在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函数来创建动态行。我想要创建这些行的边框。我试过.addClass（'newRow'）其中

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

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

由于

Answer 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>');

Answer 2

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

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

目前，您要将newRow课程添加到<table>代码，而不是<td>代码。我也用CSS做了一个简短的手，指出你想要一个“坚实的”边框。

Answer 3

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

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

试试。

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

3 个答案: