DataTables

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<h3>jQuery DataTables: Add attribute to table cell</h3>
<a href="https://www.gyrocode.com/articles/tag/jquery-datatables/">See more articles about jQuery DataTables</a> on <a href="https://www.gyrocode.com/articles/">Gyrocode.com</a><hr>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>


<hr>
<a href="https://www.gyrocode.com/articles/tag/jquery-datatables/">See more articles about jQuery DataTables</a> on <a href="https://www.gyrocode.com/articles/">Gyrocode.com</a>

JavaScript

$(document).ready(function (){
    var table = $('#example').DataTable({
  		'createdRow': function( row, data, dataIndex ) {
      		$(row).attr('id', 'row-' + dataIndex);
  		},
  		'columnDefs': [
     		{
        		'targets': 3,
        		'createdCell':  function (td, cellData, rowData, row, col) {
           			$(td).attr('id', 'cell-' + cellData); 
        		}
     		}
  		]
    });
    
    table.row.add( ['Airi Satou', 'Accountant', 'Tokyo', '5407', '2008/11/28', '$162,700']).draw();
});