Question

我一直在努力解决这个问题。也许你可以提供帮助。

我有一个表格，每行的开头都有一个复选框。我定义了一个定期重新加载表的函数。它在生成新表的JSP上使用jQuery的load（）函数。

问题是我需要保留复选框值，直到用户决定选择哪些项目。目前，它们的值在更新之间丢失。

我尝试修复它的当前代码是：

 refreshId = setInterval(function()
 {
        var allTicks = new Array();
        $('#myTable input:checked').each(function() {
            allTicks.push($(this).attr('id'));
        });
        $('#myTable').load('/get-table.jsp', null,
                function (responseText,textStatus, req ){
            $('#my-table').tablesorter();
            //alert(allTicks + ' length ' + allTicks.length);
            for (i = 0 ; i < allTicks.length; i++ )
                $("#my-table input#" + allTicks[i]).attr('checked', true);

        });
}, $refreshInterval);

每个复选框的id与旁边的表项相同。

我的想法是在更新之前将所有选中的复选框'id存储到数组中，并在更新完成后更改它们的值，因为大多数条目将被保留，而新的条目将不会真正物质

'＃myTable'是加载表的div，'＃my-table'是生成的表的id。复选框输入与新表一起生成，并具有与之前相同的ID。

奇怪的是，将tablesorter应用于新生成的表是有效的，但是使用存储的id获取元素却不行。

任何解决方案？

P.S：我知道这种表格生成的方法并不是最好的，但我的JS技能当时有限。我现在想保留这个解决方案并解决问题。

修改

应用Didier G.建议的语法，并添加了一些额外的测试块，用于检查复选框滴答之前和之后的状态。

现在看起来像这样：

refreshId = setInterval(function()
    {
        var allTicks = []
        var $myTable = $('#my-table');
        allTicks = $myTable.find('input:checked').map(function() { return this.id; });

        $('#myTable').load('/get-table.jsp', null,
        function (responseText,textStatus, req ){
            $myTable = $('#my-table');
            $('#my-table').tablesorter();
            var msg = 'Before: \n';
            $myTable.find('input').each(function(){
                msg = msg + this.id + " " + $(this).prop('checked') + '\n';
            });
            //alert(msg);
            //alert(allTicks + ' length ' + allTicks.length);
            for (i = 0 ; i < allTicks.length; i++ ){
                 $myTable.find('#' + allTicks[i]).prop('checked', true);
            }
            msg = 'After: '
            $myTable.find('input').each(function(){
                msg = msg + this.id + " " + $(this).prop('checked') + '\n';
            });
            //alert(msg);
        });
    }, $refreshInterval);

如果我取消注释警报行，并选中2个复选框，则在下次更新时我得到（对于3行表）：

Before: host2 false
host3 false
host4 false

object [Object] length 2

After: host2 false
host3 false
host4 false

还对数组的内容进行了先前的检查，并且它具有所有正确的条目。

DOM是否可以更改或使用全新的表实例？

EDIT2：

以下是JSP生成的表格示例（为了保密目的而编辑）：

<table id="my-table" class="tablesorter">
<thead>
    <tr>
        <th>Full Name</th> 
        <th>IP Address</th> 
        <th>Role</th> 
        <th>Job Slots</th> 
        <th>Status</th>
        <th>Management</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>head</td>
        <td>10.20.1.14</td>
        <td>H</td>
        <td>4</td>
        <td>ON</td>
        <td>Permanent</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="host2" name="host2"/>
            host2
        </td>
        <td>10.20.1.7</td>
        <td>C</td>
        <td>4</td>
        <td>BSTART</td>
        <td>Dynamic</td>
    </tr>
    <tr>
        <td><input type="checkbox" id="host3" name="host3"/>
        host3</td>
        <td>10.20.1.9</td>
        <td>C</td>
        <td>4</td>
        <td>BSTART</td>
        <td>Dynamic</td>
    </tr>
    <tr>
        <td><input type="checkbox" id="host4" name="host4"/>
        host4</td>
        <td>10.20.1.11</td>
        <td>C</td>
        <td>4</td>
        <td>BSTART</td>
        <td>Dynamic</td>
    </tr>

</tbody>
</table>

请注意，复选框的ID和名称与主机名一致。另请注意，第一个td没有复选框。这是预期的行为。

Answer 1

更改disbaled或checked等'特殊'属性应该像这样：

$(...).attr('checked','checked');

或者这种方式，如果您使用的是jQuery 1.6或更高版本：

$(...).prop('checked', true);  // more reliable

请参阅有关.attr()和.prop()

的jQUery文档

这是通过一些优化修改的代码片段（查看注释）：

refreshId = setInterval(function()
{
    var allTicks = [],
        $myTable = $('#myTable');  // select once and re-use

    // .map() returns an array which is what you are after
    // also never do this: $(this).attr('id').
    // 'id' is a property available in javascript and
    // in .map() (and in .each()), 'this' is the current DOMElement so simply do:
    // this.id

    allTicks = $myTable.find('input:checked').map(function() { return this.id; });

    $myTable.load('/get-table.jsp', null, function (responseText,textStatus, req ) {

        $myTable.tablesorter();

        //alert(allTicks + ' length ' + allTicks.length);
        for (i = 0 ; i < allTicks.length; i++ )
            // avoid prefixing with tagname if you have the ID: input#theId
            // #xxx is unique and jquery will use javascript getElementById which is super fast ;-)
            $myTable.find('#' + allTicks[i]).prop('checked', true);

    });

}, $refreshInterval);

Answer 2

让我们假设JavaScript 检索并设置复选框刻度。然后，asynchrone Ajax调用仍然存在问题。首先尝试使用非常大的$ refreshInterval。

在tablesorter调用之前放置for循环。

不要setInterval，而是setTimeout并将其安排一次。然后在下次加载功能计划中。这可以防止重叠调用，这可能是导致错误的原因。

但是当没有调用负载时，可能会停止刷新。（不是那么重要。）

Answer 3

经过大量痛苦的时间挖掘每一个小细节之后，我意识到我的问题不在于我是如何对这个东西进行编码的，也不是像意外的DOM变化那样，而是一个我未能看到的简单细节：

我尝试分配给复选框的ID包含句点（“。”）字符。

这会在尝试查找那种id时导致jQuery出现很多问题，因为句点as-is充当类描述符。为避免这种情况，必须使用2个反斜杠转义句点字符。

例如：

$("#my.id")    // incorrect
$("#my\\.id")  // correct

那么我的案例中的修复就是：

$myTable.find('#' + allTicks[i].replace(".", "\\.")).prop('checked', true);

......它终于奏效了。

感谢所有人的帮助！

保留内容更新的复选框值

3 个答案: