javascript - 自动刷新包含的表格，需要检索选定的行单元格值

Question

我有一个自动刷新表(有效)，它是从 MySQL 中提取的，以保持过去 10 秒内更新的信息。该表位于包含的 php 文件中，因此我可以使用 .load() 调用它进行刷新。

使用我在互联网上找到的帮助，我能够成功制作一个 jquery 脚本，突出显示并选择您单击的行。当表是静态时它可以工作，但现在它不再是动态的(自动刷新)。

对 JQuery 知之甚少，如何保留被单击的行的值，AKA 它保留该数字，因此当用户单击“确认选择”时，该数字将通过表单传递以进行提交。

例如； 在查看列表时，我看到两个完整的:“0008”和“0009”。我单击“0008”，表将刷新，并且 0008 可能仍在列表中，也可能不在列表中。但是，当我单击它时，它保留了“0008”，因此当我单击“确认选择”时，会传递值“0008”。

到目前为止，警报只是弹出并显示“未定义”。 (我可能应该补充一下，我也尝试过 .text() 而不是 .html())

<script src="java/jquery.js"></script>
<script>
function refreshInfoBox() {
    $('#infobox').load('refreshtable.php');
    setTimeout(refreshInfoBox, 10000);
}
setTimeout(refreshInfoBox, 10000);

$(document).ready(function() {

    refreshInfoBox();

    $("#tableinfo tr").click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');    
        var value=$(this).find('td:first').html();
        });

        $('.select').on('click', function(e){
            alert($("#tableinfo tr.selected td:first").html());
    });
});

</script>
<div id="fixed">

    <?php
        include("topmenu.php");
    ?>

    <div id="backpanel">
        <div id="infobox">
            <?php
                include("refreshtable.php");
            ?>
        </div>
    <input type="button" name="OK" class="select" value="Confirm Selection"/>

    </div>
</div>

refreshtable.php

<table id ="tableinfo">
<tr><th width="12%">ID#</th>
<th width="8%">HEADER2</th>
<th width="40%">HEADER3</th>
<th width="40%">HEADER4</th>
</tr>

$query= $db->prepare("SELECT * FROM dbtable ORDER BY dbtime");
$query->execute();
$count = $query->rowCount();
if($count > 0)
{
    while($info = $query->fetch())
    {
        ?>
        <tr>
            <td><?php echo $info['id']; ?></td>
            <td><?php echo $info['field2']; ?></td>
            <td><?php echo $info['field3']; ?></td>
            <td><?php echo $info['field4']; ?></td>
        </tr>
        <?
    }
}?></table>

Answer 1

这里的 jQuery $("#tableinfo tr").click(function(){ 绑定(bind)到页面中的 DOM 元素。不是具有该 id 的任何 DOM 元素，而是该 id 的显式实例元素，当时存在的元素。

当刷新脚本运行时，该表将替换为新表。它可能与旧表具有相同的 ID，但它不是您的函数绑定(bind)到的表，因此您的函数无法引用它。

您可以每次将函数重新绑定(bind)到新表，但更好的方法是仅获取您实际需要的数据。

您可以轮询服务器以获取更新，将它们作为最小 JSON 返回，并使用 ajax 调用的 success 函数将它们作为新行插入表中，而不是重新加载整个表。数据开销会更少，用户体验也会更好。

鉴于您对 jQuery 知之甚少，这可能还没有多大意义。看看append函数作为起点。