具有不同 ID 的 HTML 表正在从 AJAX 回调接收相同的值 - HTML tables with different ID's are receiving sames value form AJAX callback

这个问题让我发疯了！！情况是这样的，我有一个来自我的 AJAX post 方法的回调数据，我需要传递给不同的 HTML 表，那里会有 7 个不同的表。我已经实现了从控制器接收具有不同对象的数据。今天早些时候，我制作了我的第一个表，它运行良好，但是当我想从 ajax 回调数据再次将值传递给具有不同数据的不同表时，即使 ID 不同，即使第二个表上没有 ID，两个表也接收相同的值......老实说，这让我发疯了。

这是我的带有回调数据的 AJAX 发布方法：

$(document).ready(
    function() {
      $('#call_back_btn').click(function() {
            $.post("/app_dev.php/AjaxSearch", {
                  person_name: $('#input_text').val()
                },
                function(data) {
                  objConnectors = data[0];
                  objContacts = data[1];
                  var ParseConnector = JSON.parse(objConnectors);
                  var ParseContacts = JSON.parse(objContacts);
                  var cycles;
                  for (cycles = 0; cycles < ParseConnector.length; cycles++) {
                    $('tbodyCONNECTOR').append('<tr>' + ParseConnector[cycles].id + '</td><td>' + ParseConnector[cycles].n_c + '</td><td>' + ParseConnector[cycles].description + '</td></tr>');
                  }
                  for (cycles = 0; cycles < ParseContacts.length; cycles++) {
                    $('tbodyCONTACT').append('<tr>' + ParseContacts[cycles].id + '</td><td>' + ParseContacts[cycles].n_c + '</td><td>' + ParseContacts[cycles].description + '</td></tr>');
                  }
                }

如您所见，附加是不同的

这是 HTML ：

div class="bs-example" data-example-id="panel-without-body-with-table">
    <div class="panel panel-default">
        <div class="panel-heading">Available connectors</div>
        <table id="Connectors">
            <thead>
            <tr>
                <th>12NC</th>
                <th>Description</th>
            </tr>
            </thead>
            <tbody id="tbodyCONNECTOR">
            </tbody>
        </table>
    </div>
</div>
<div class="bs-example" data-example-id="panel-without-body-with-table">
    <div class="panel panel-default">
        <div class="panel-heading">Available Contacts</div>
        <table id="Contacts">
            <thead>
            <tr>
                <th>12NC</th>
                <th>Description</th>
            </tr>
            </thead>
            <tbody id="tbodyCONTACT">
            </tbody>
        </table>
    </div>
</div>

这是两个表。我得到的值始终是第一个值，因此：解析连接器我将非常感谢任何帮助!!

$('tbodyCONNECTOR').append("...");

和

$('tbodyCONTACT').append("...");

缺少哈希符号。

尝试使用$('#tbodyCONNECTOR').append("...");

tbodyCONTACT也是如此

由于我无法评论，我只想指出，在简要查看之后，这些行不应该

$('tbodyCONNECTOR').append('<tr>' + ParseConnector[cycles].id + '</td><td>' + ParseConnector[cycles].n_c + '</td><td>' + ParseConnector[cycles].description + '</td></tr>');
$('tbodyCONTACT').append('<tr>' + ParseContacts[cycles].id + '</td><td>' + ParseContacts[cycles].n_c + '</td><td>' + ParseContacts[cycles].description + '</td></tr>');

是

$('#tbodyCONNECTOR').append('<tr>' + ParseConnector[cycles].id + '</td><td>' + ParseConnector[cycles].n_c + '</td><td>' + ParseConnector[cycles].description + '</td></tr>');
$('#tbodyCONTACT').append('<tr>' + ParseContacts[cycles].id + '</td><td>' + ParseContacts[cycles].n_c + '</td><td>' + ParseContacts[cycles].description + '</td></tr>');

我相信你只是错过了这一点，但是在选择带有 ID 的元素时需要这些元素，当获得带有类的元素时，您将使用 . 而不是#(想想CSS(

正如评论中已经提到的，您缺少选择器前面的#。

除此之外，如果您想将完全相同的内容添加到两者中，您可以使用一个循环并使用此选择器#tbodyCONNECTOR, #tbodyCONTACT：

for (cycles = 0; cycles < ParseConnector.length; cycles++) {
  $('#tbodyCONNECTOR, #tbodyCONTACT').append('<tr>' + ParseConnector[cycles].id + '</td><td>' + ParseConnector[cycles].n_c + '</td><td>' + ParseConnector[cycles].description + '</td></tr>');
}

或者向两个tbody添加一个公共类。

通常，您应该避免在循环中一遍又一遍地查询相同的元素，因此最好以这种方式编写：

var tbodyElements = $('#tbodyCONNECTOR, #tbodyCONTACT');
for (cycles = 0; cycles < ParseConnector.length; cycles++) {
  tbodyElements.append('<tr>' + ParseConnector[cycles].id + '</td><td>' + ParseConnector[cycles].n_c + '</td><td>' + ParseConnector[cycles].description + '</td></tr>');
}

检查 jQuery ID 选择器 ('#id'( 的使用情况，因为您在选择器中缺少#。

另请注意，不要使用指向表tbody的选择器：

$('#tbodyCONNECTOR')
$('#tbodyCONTACT')

您应该使用指向表的 ID 选择器 ('#id'(，然后获取表的 tbody 元素：

$('#tableId > tbody')

法典：

$('#Connectors > tbody')
$('#Contacts > tbody')