使用 AJAX 更新多个 HTML 表格行答案

【问题标题】：Update multiple HTML table rows using AJAX使用 AJAX 更新多个 HTML 表格行
【发布时间】：2016-09-21 02:26:55
【问题描述】：

我有一个表格，显示从 PHP 脚本中提取的信息，如下所示：

<tr class="online" id="0011e31xxxxx">
  <td><input type="checkbox" name="mac" value="0011e31xxxxx"></td>
  <td>1234567</td>
  <td>Modelnumber</td>
  <td>0011.e31x.xxxx</td>
  <td>10.x.x.x</td>
  <td>UBR4</td>
  <td>online</td>
  <td><a href="javascript:void(0);" onclick="getInfo('0011e31xxxxx','10.x.x.x','UBR4','resetubr');"><img src="/own/v2.2/images/reset.gif"></a></td>
  <td><a href="javascript:void(0);" onclick="getInfo('0011e31xxxxx','10.x.x.x','UBR4','resetsnmp');"><img src="/own/v2.2/images/reset.gif"></a></td>
  <td><a href="javascript:void(0);" onclick="getInfo('0011e31xxxxx','10.x.x.x','UBR4','refresh');"><img src="/own/v2.2/images/icone_refresh.png"></a></td>
</tr>

3 个 getInfo 调用链接如下，并且运行良好：

<script>
function getInfo(id,adresseip,ubr,action) {
        var rowid = "tr#" + id;
        $.ajax({
            type: "GET",
            cache: false,
            url: 'index.php',
            data: "macaddress=" + id + "&ubr=" + ubr + "&adresseip=" + adresseip + "&action=" + action,
            beforeSend: function() {
                $(rowid).addClass("loading");
            },
            success: function(data) {
                $(rowid).replaceWith(data);
            }
        });
}
</script>

我要做的是使用每个<tr> 开头的复选框，以生成某种循环来运行每行上看到的三个链接之一。

假设我选中了 3 个框（值 123、234 和 345），我需要 <tr id=123><tr id=234> and <tr id=345> 仅在其余数据保持不变的情况下更新它们各自的行。

是否可以创建这样一个循环来调用 AJAX 函数，使其运行次数与选中的复选框一样多？还是 AJAX 函数可以遍历每个选中的复选框，以便一个接一个地更新它们？

谢谢

【问题讨论】：

我知道这不是你的解决方案，但与此同时我设法让它工作：function loopForm(action) { for (var i = 0; i < formulaire.elements.length; i++ ) { if (formulaire.elements[i].type == 'checkbox') { if (formulaire.elements[i].checked == true) { getInfo(formulaire.elements[i].value,'','',action); } } } } 但它只在 Chrome 上工作一次，并且在第一次按钮调用该函数后没有'不再工作了。它在 IE 上运行良好。明天我回去工作后，我会测试你的回复。

标签： javascript jquery html ajax html-table

【解决方案1】：

请在谷歌上搜索然后尝试...如果您没有得到任何答案，请提出问题...

Check this Link..

$('#TableID > tr').each(function() {
    var postData = {
    'FirstName':$(this).find('#FirstName').val(),
    'SurName':$(this).find('#Surname').val()
    };
    $.ajax({
    type: "POST",
    cache: false, 
    url: "WuFoo.aspx",
    data: postData ,
    success: success
    });
 });

【讨论】：

【解决方案2】：

您可以通过执行类似的操作来使用 JQuery 获取所有选中的复选框

$("input[type=checkbox]:checked")

然后您可以使用.each 对其进行迭代并更新每个相应的行。

该代码应该放在您的 ajax 调用的 success: 函数中。

或者，您可以使用相同的 JQuery 代码来获取复选框，然后在 .each 中选择 <tr> 并使用该数据进行 Ajax 调用。

【讨论】：