Question

我使用jQuery .append()生成动态表：

$el.append('<tr data-id=' + data[i].id + ' data-token=' + data[i].token + '><td>' + data[i].order + '</td>\n\<td><input name="qty" id="qty" type="number" value="' + data[i].qty + '" min="1"></td>\n\...

我想点击按钮，如果checkbox为checked，则在tr标记中选择其中一个值并创建数组。例如data[i].id：

$('body').on('click', '#button', function(e) {
    e.preventDefault();  
    var tr = $(this).closest('tr'),
    ids = [],
    id = tr.data('id');

    $('.group:checked').each(function(i, e) {
        ids.push(id);
    });
    alert(ids.join());
});

但是在这种情况下，数组为空，因为id为undefined，但如果我将代码更改为ids.push($(this).val())，则输出类似于on,on,on（显示复选框值）。但不适用于tr代码

我找到了解决方案。我将变量从第一个函数移动到第二个函数：

$('body').on('click', '#button', function(e) {
  e.preventDefault();  
 var ids = [];
  $('.group:checked').each(function(i, e) {
      var tr = $(this).closest('tr'),
      id = tr.data('id');
    ids.push(id);
    });
    alert(ids.join());
});

Answer 1

您在click和id上绑定了IDS must be unique个活动，因为您要生成多行，每行都有button您可以指定class按钮并绑定点击class

var ids = [];
$('body').on('click', '.button', function(e) {
  e.preventDefault();
  var tr = $(this).closest('tr'),
    id = tr.data('id');

  if (tr.find('.group').is(":checked"))
    ids.push(id);
});

此外，您需要检查checkbox中的current row。如果您需要array填充multiple values，则需要在该功能之外创建它。

编辑

如果您希望获得id的{{1}}行。你可以这样做

checkbox is checked

Answer 2

jQuery中的.data()方法是一种只读方法。因此，在使用数据属性创建动态DOM元素时，访问它们的最佳方法是使用.attr('data-id')。

来自API：jQuery Docs

第一次访问数据属性时会拉出data-属性，然后不再访问或变异（所有数据值都会在内部存储在jQuery中）。

如何在jQuery中创建动态生成元素的数组

2 个答案: