如何运行涉及纠缠在 ajax 和 jquery 脚本中的对象的 for 循环答案

【问题标题】：How to run a for loop involving objects that are entangled in ajax and jquery scripts如何运行涉及纠缠在 ajax 和 jquery 脚本中的对象的 for 循环
【发布时间】：2017-07-31 16:55:00
【问题描述】：

<script>
    $(document).ready(function() {
        $.getJSON("json_encode.php", function (data) {
            var user_data = '';
            var rowcounter = 0;
            $.each(data, function (key, value) {
                rowcounter++;
                user_data += '<tr>';
                user_data += '<td>' + value.first_name + '</td>';
                user_data += '<td>' + value.last_name + '</td>';
                user_data += '<td>' + value.telephone_number + '</td>';
                user_data += '<td>' + value.street + '</td>';
                user_data += '<td>' + value.city + '</td>';
                user_data += '<td>' + value.state + '</td>';
                user_data += '<td>' + value.zip_code + '</td>';
                user_data += '<td>' + value.email_address + '</td>';
                user_data += '<td><input type="submit" id="delete' + rowcounter + '" value="Delete" align="center"></td>';
                user_data += '<td><input type="submit" id="edit' + rowcounter + '" value="Edit" align="center"></td>';
                user_data += '</tr>';
            });
            $('#user_table').append(user_data);
        });
    });

    for(var i=1, l = $(document).id("user_data").length; i <= l; i++){
        $(document).on('click', "#delete" + i, function () {
            alert('i');
    });

</script>

代码创建了一个包含 10 列的表。最后两列创建两列“删除”和“编辑”按钮。这些按钮在单击时应该删除或编辑它们所在的行。

现在，我正在尝试运行 for 循环以吐出单击“删除”按钮的行号，但我似乎无法使 for 循环脚本可运行。

例如，如果我点击第一行的删除按钮，他的 id 将是“delete1”，因为我的 id 代码是 (id="delete' + rowcounter + '")。

我想通过alert打印出“i”的值，即行号。

【问题讨论】：

让 i 和 alert(i)

标签： javascript jquery ajax for-loop

【解决方案1】：

假设数据是一个数组，这样做：

        data.forEach(function (value, index) {
            rowcounter++;
            user_data += '<tr>';
            user_data += '<td>' + value.first_name + '</td>';
            user_data += '<td>' + value.last_name + '</td>';
            user_data += '<td>' + value.telephone_number + '</td>';
            user_data += '<td>' + value.street + '</td>';
            user_data += '<td>' + value.city + '</td>';
            user_data += '<td>' + value.state + '</td>';
            user_data += '<td>' + value.zip_code + '</td>';
            user_data += '<td>' + value.email_address + '</td>';
            user_data += '<td><input type="submit" id="delete' + index + '" value="Delete" align="center"></td>';
            user_data += '<td><input type="submit" id="edit' + index + '" value="Edit" align="center"></td>';
            user_data += '</tr>';
        });

【讨论】：

然后添加几百个监听器：/...使用删除和编辑作为一个类，只需将索引分配给id。

【解决方案2】：

试试这个：

<script>
  $(document).ready(function () {
    $.getJSON("json_encode.php", function (data) {
      var user_data = ''
      $.each(data, function (value, key) {
        user_data += '<tr>'
        user_data += '<td>' + value.first_name + '</td>'
        user_data += '<td>' + value.last_name + '</td>'
        user_data += '<td>' + value.telephone_number + '</td>'
        user_data += '<td>' + value.street + '</td>'
        user_data += '<td>' + value.city + '</td>'
        user_data += '<td>' + value.state + '</td>'
        user_data += '<td>' + value.zip_code + '</td>'
        user_data += '<td>' + value.email_address + '</td>'
        user_data += '<td><input type="submit" id="delete' + key + '" value="Delete" align="center"></td>'
        user_data += '<td><input type="submit" id="edit' + key + '" value="Edit" align="center"></td>'
        user_data += '</tr>'
      })
      $('#user_table').append(user_data)
    })
  })

  $(document).on('click', '[id|="delete"]', function () {
    $(this).parent().parent().remove()
  })

【讨论】：

【解决方案3】：

哇，感谢您的及时回复。我最终只是将行号存储在 id 中，然后将 id 名称作为子字符串提取。

<script>
        $(document).ready(function() {
            $.getJSON("json_encode.php", function (data) {
                var user_data = '';
                var rowcounter = 0;
                $.each(data, function (key, value) {
                    rowcounter++;
                    user_data += '<tr>';
                    user_data += '<td>' + value.first_name + '</td>';
                    user_data += '<td>' + value.last_name + '</td>';
                    user_data += '<td>' + value.telephone_number + '</td>';
                    user_data += '<td>' + value.street + '</td>';
                    user_data += '<td>' + value.city + '</td>';
                    user_data += '<td>' + value.state + '</td>';
                    user_data += '<td>' + value.zip_code + '</td>';
                    user_data += '<td>' + value.email_address + '</td>';
                    user_data += '<td><button type="submit" id="delete' + rowcounter + '" value="" align="center"><span class="glyphicon glyphicon-trash"> Delete</span></button></td>';
                    user_data += '<td><button type="submit" id="edit' + rowcounter + '" value="" align="center"><span class="glyphicon glyphicon-pencil"> Edit</button></td>';
                    user_data += '</tr>';
                });
                $('#user_table').append(user_data);
                for(var i=1, l =$(user_data).length; i <= l; i++){
                    $(document).on('click', "#delete" + i, function () {
                        var val=this.id;
                        var delete_index = val.substring(6,8);
                        alert(delete_index);
                    });
                    $(document).on('click', "#edit" + i, function (){
                        var val=this.id;
                        var edit_index = val.substring(4,6);
                        alert(edit_index);
                    })
                }
            });
        });
    </script>

【讨论】：