Question

<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 +'”）。

我想通过警告打印出“i”的值，这将是行的编号。

Answer 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>';
        });

Answer 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()
  })

Answer 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>

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

3 个答案: