时间戳

首页 > 解决方案 > td:contains 正在创建一个新行而不是替换单元格中的值

jquery - td:contains 正在创建一个新行而不是替换单元格中的值

问题描述

我正在尝试用列中的值计数替换表 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( {

标签： jqueryhtml

解决方案

将每个 td 更改为包含一个 id，例如，

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

或者

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

然后使用以下内容填充：

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

推荐阅读