[SO] - Add row to DataTable with custom attributes <td> tag
https://stackoverflow.com/questions/44135009/add-row-to-datatable-with-custom-attributes-td-tag/44136265#44136265
by jing2019
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.13/b-1.2.4/b-colvis-1.2.4/sc-1.4.2/se-1.2.0/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.13/b-1.2.4/se-1.2.0/datatables.min.js"></script>
<button id="btnAddRow">Add Rows</button>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>$85,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
</tbody>
</table>
CSS
.myClass{
color:red;
}
.myClass2{
color:green;
}
JavaScript
$(document).ready(function() {
var oTable;
var counter = 1;
oTable = $('#example').DataTable();
$(document).on('click', '#btnAddRow', function() {
var cellData = "Test - " + counter.toString();
var rowNode = oTable
.row.add([cellData, cellData, cellData, cellData, cellData, cellData])
.draw()
.node();
counter = counter + 1;
// Add a class to those rows
//oTable.row( rowNode )
//.nodes()
//.to$()
//.addClass( 'myClass' );
// })
$(rowNode).find('td:eq(1)').addClass( 'myClass' );
$(rowNode).find('td:eq(3)').addClass( 'myClass2' );
});})