Question

我正在生成一个表，当我创建行时，我有一个这样的for循环：

 for (var i = 0 ; i < myList.length ; i++) {
     var row$ = $('<tr/>');
     for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
         if (columns[colIndex] == 'web_id'){
          cellValue = "<a onclick='showMoreData('myList[i][columns[colIndex]]')'>" + myList[i][columns[colIndex]] + "</a>"
         }
         else {
              var cellValue = myList[i][columns[colIndex]];
         }

         if (cellValue == null) { cellValue = ""; }

         row$.append($('<td/>').html(cellValue));
     }
     $(".table").append(row$);

但是这不起作用，我需要做什么才能根据列中的行内容添加onclick事件，以便我可以添加动态链接？

Answer 1

您可以创建一个A元素，将数据绑定到该元素，然后您需要创建事件委派并将其绑定到表中：

for (var i = 0 ; i < myList.length ; i++) {
    var row$ = $('<tr/>');

    for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
        var cellValue = '';
        if (columns[colIndex] == 'web_id'){
            // Set a data attribute with the colindex and add the class 'web_id' for the event delegation
            cellValue = "<a href=\"\" class=\"web_id\" data-index=\"" + myList[i][columns[colIndex]] + "\">" + myList[i][columns[colIndex]] + "</a>";
         } else {
             cellValue = myList[i][columns[colIndex]];
         }

        if (cellValue == null) { cellValue = ""; }

        row$.append($('<td/>').html(cellValue));
    }

    $(".table").append(row$);
}

// Bind a click event for every .web_id element in the table 
$('.table').on('click', '.web_id', function(e) {
    e.preventDefault();

    // You can put here the logic of the 'showMoreData()' function
    alert( $(this).data('index') ); 
});

这取代了将onclick添加到表中的A元素的需要，因为我添加了一个名为data-index的数据属性 - 此属性将通过jquery的{{3}提供功能。

我使用事件委派方法绑定click事件，该方法仅将事件处理程序附加到一个元素.table，并且事件只需要在一个级别上冒泡（来自单击的{{1}到'.table'）。 .data()

使用onClick事件动态创建表行

1 个答案: