I am trying to replace a table td cell with a count of values in the column; however, the value is being displayed in a new row instead of in the cell.
The html is:
<tr>
<td colspan="7"> </td>
<td>Joeys</td>
<td style="text-align:center">JY1T1</td>
<td style="text-align:center">JY1T2</td>
<td style="text-align:center">JY1T3</td>
<td style="text-align:center">JY1T4</td>
<td style="text-align:center">JY2T1</td>
<td style="text-align:center">JY2T2</td>
<td style="text-align:center">JY2T3</td>
<td style="text-align:center">JY2T4</td>
<td style="text-align:center">JY3T1</td>
<td style="text-align:center">JY3T2</td>
<td style="text-align:center">JY3T3</td>
<td style="text-align:center">JY3T4</td>
</tr>
The jQuery is:
var countJY1T1 = cubPackDetailsTable
.cells( null, 8 )
.render( 'display' )
.filter( function ( value, index ) {
return value == "J" ? true : false;
} ).count();
$("#cubPackDetailsTable td:contains('JY1T1')").html(countJY1T1);
The page displayed is:
The "5" should replace the "JY1T1", not be in a new row.
I use:
var today = new Date();
var y1 = today.getFullYear();
$("#cubPackDetailsTable td:contains('YEAR1')").html("<b>"+y1+"</b>");
To get the "2020" at the top of the page and that, as you see, works.
The full table(as requested by jwatts1980):
<table class="table table-hover table-bordered" id="cubPackDetailsTable">
<thead>
<tr>
<td colspan="8"> </td>
<td colspan="4" style="text-align:center">YEAR1</td>
<td colspan="4" style="text-align:center">YEAR2</td>
<td colspan="4" style="text-align:center">YEAR3</td>
</tr>
<tr>
<td colspan="7"> </td>
<td>Joeys</td>
<td style="text-align:center">JY1T1</td>
<td style="text-align:center">JY1T2</td>
<td style="text-align:center">JY1T3</td>
<td style="text-align:center">JY1T4</td>
<td style="text-align:center">JY2T1</td>
<td style="text-align:center">JY2T2</td>
<td style="text-align:center">JY2T3</td>
<td style="text-align:center">JY2T4</td>
<td style="text-align:center">JY3T1</td>
<td style="text-align:center">JY3T2</td>
<td style="text-align:center">JY3T3</td>
<td style="text-align:center">JY3T4</td>
</tr>
<tr>
<th>Number</th>
<th>First Name</th>
<th>Surname</th>
<th>Invested</th>
<th>Current Section</th>
<th>DOB</th>
<th>Gender</th>
<th>Current Age</th>
<th>T1</th>
<th>T2</th>
<th>T3</th>
<th>T4</th>
<th>T1</th>
<th>T2</th>
<th>T3</th>
<th>T4</th>
<th>T1</th>
<th>T2</th>
<th>T3</th>
<th>T4</th>
</tr>
</thead>
<tbody id="cubPackDetailsTablebody">
</tbody>
</table>
DataTables jQuery (for Tim):
if ( $.fn.dataTable.isDataTable( '#cubPackDetailsTable' ) ) {
var cubPackDetailsTable = $('#cubPackDetailsTable').DataTable();
}
else {
var cubPackDetailsTable = $('#cubPackDetailsTable').DataTable( {