td：contains正在创建新行，而不是替换单元格中的值

Question

我试图用表中的值计数替换表td单元格；但是，该值将显示在新行中，而不是在单元格中。

html是：

                                 <tr>
                                    <td colspan="7">&nbsp;</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>

jQuery是：

    var countJY1T1 = cubPackDetailsTable
    .cells( null, 8 )
    .render( 'display' )
    .filter( function ( value, index ) {
        return value == "J" ? true : false;
    } ).count();
    $("#cubPackDetailsTable td:contains('JY1T1')").html(countJY1T1);

显示的页面是：

“ 5”应替换“ JY1T1”，而不要放在新行中。

我使用：

var today = new Date();
var y1 = today.getFullYear();
$("#cubPackDetailsTable td:contains('YEAR1')").html("<b>"+y1+"</b>");

要在页面顶部获得“ 2020”，并且可以看到效果。

完整表格（按jwatts1980的要求）：

                       <table class="table table-hover table-bordered" id="cubPackDetailsTable">
                            <thead>
                                <tr>
                                    <td colspan="8">&nbsp;</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">&nbsp;</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（用于Tim）：

if ( $.fn.dataTable.isDataTable( '#cubPackDetailsTable' ) ) {
    var cubPackDetailsTable = $('#cubPackDetailsTable').DataTable();
}
else {
    var cubPackDetailsTable = $('#cubPackDetailsTable').DataTable( {

Answer 1

更改每个td以包含ID，例如

<td id="JY1T1" style="text-align:center">JY1T1</td>

或

<td id="JY1T1" style="text-align:center"></td>

然后使用以下内容进行填充：

('#JY1T1').html(countJY1T1);