Question

这里我有一个数据表：http://jsbin.com/OJAnaji/15/edit

我将数据添加到表并显示它。之后我添加新列 - kontrole。

data = google.visualization.arrayToDataTable([
        ['Name', 'Gender', 'Age', 'Donuts eaten'],
        ['Michael' , 'Male', 12, 5],
        ['Elisa', 'Female', 20, 7],
        ['Robert', 'Male', 7, 3],
        ['John', 'Male', 54, 2],
        ['Jessica', 'Female', 22, 6],
        ['Aaron', 'Male', 3, 1],
        ['Margareth', 'Female', 42, 8],
        ['Miranda', 'Female', 33, 6]
    ]);

    data.insertRows(0, [['Drew', 'Male', 32, 1]]);

          data.addColumn('string', 'Kontrole');
         for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
    if (data.getValue(y, 4) != 'a') {
      data.setValue(y, 4, '<button id="edit" class="btn btn-info">edit row</button>');
    }
}

在新的空行中，我添加了html按钮：<button id="edit" class="btn btn-info">edit row</button>

现在我想点击按钮ID编辑来调用此代码：

new google.visualization.events.addListener(table, 'ready', function () {
        google.visualization.events.addListener(table.getChart(), 'select', function () {
            var selection = table.getChart().getSelection();
            // iterate over all selected rows
            for (var i = 0; i < selection.length; i++) {
              $("#edit").removeClass("btn btn-success disabled")
              $('#edit').addClass('btn btn-success');
              $("#name").val(table.getDataTable().getValue(selection[i].row,0));
              $("#gender").val(table.getDataTable().getValue(selection[i].row,1));
              $("#age").val(table.getDataTable().getValue(selection[i].row,2));
              $("#donuts_eaten").val(table.getDataTable().getValue(selection[i].row,3));

            }
        });
    });

当我有单独的按钮（在桌子外面）时，这段代码效果很好，但是当我把按钮ID =编辑到表格中然后就不起作用了？

这里有什么问题？

Answer 1

为表创建select事件处理程序会取消表上的事件冒泡，因此点击永远不会在您的编辑按钮上注册（当用户点击一行中的任何位置时，您的代码实际上会触发编辑）。如果要为按钮使用单击事件处理程序，则可以使用此方法。首先，您需要修复创建按钮的方式（因为您不能拥有具有相同ID的多个元素，并且您需要能够识别按钮所属的行：

data.addColumn('string', 'Kontrole');
for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) {
    if (data.getValue(y, 4) == null) {
        data.setValue(y, 4, '<button class="edit btn btn-info" data-row="' + y + '">edit row</button>');
    }
}

然后，不使用表的select事件处理程序，而是使用按钮的click事件处理程序：

$(document).on('click', '.edit', function () {
    var row = parseInt($(this).data('row'));
    $(this).removeClass("btn btn-success disabled")
    $(this).addClass('btn btn-success');
    $("#name").val(table.getDataTable().getValue(row,0));
    $("#gender").val(table.getDataTable().getValue(row,1));
    $("#age").val(table.getDataTable().getValue(row,2));
    $("#donuts_eaten").val(table.getDataTable().getValue(row,3));
});

获取选定的表行和使用函数

1 个答案: