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

Question

I am trying to add css to a table which is dynamically created on button click. the function which is called on click event has below qjuery part which creates dynamic rows

$("#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');

button is under table tag which calls this javascript function to create dynamic rows. I want to have border to this created rows. i tried by .addClass('newRow') where

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

but it doesn't seem apply. any help would be appreciated.

Thanks

Answer 1

Your problem is that append() does not return the row, but what you have appended it to. There are several ways around this issue, but the simplest in this instance is to just put the class in the class attribute where you create the row...

$("#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

I'm not sure about your Javascript, but your CSS should be:

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

At the moment, you're adding the newRow class to the <table> tag rather than your <td> tags. I've also used short hand for the CSS which specifies that you want a "solid" border.

Answer 3

Thats because you are adding the newRow class to the #employeDetail. I suppose that is the table element ? You need to add the class to the newly created row.

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

Try that.