How to add border style to a table whose rows are added dynamically in jquery?

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

Answers


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

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.


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.


Need Your Help

Gong drag and drop - Touch

wpf drag-and-drop touch tablet

I'm using the Gong - Drag and drop solution, which works like a charm on my Windows 7 Machine, but as soon as I transfer the solution to my Surface tablet, and starts to drag and drop, nothing happ...

Adding a color bar to a chart

excel excel-vba charts colorbar colormap vba

If I create an x-y-scatter plot in Excel and use Coloring each point of a chart based on data using sequential or divergent color scales to colour the points according to some data, how can I add a