1

将行追加到现有表。在每次点击时都必须传递选定的对象。

function populateResult(data, resultElementId){
              $.each(data, function(i,row){

                      $tr = $('<tr><td>'+ row.name+'</td></tr>' ).appendTo(resultElementId);

                      $tr.on("click", myfunction(row));

              });
}



function myfunction(shipObj){
     console.log("data :"+JSON.stringify(shipObj));
}

myfunction 这个方法不是在 onclick 上调用的。

注意：我使用的是 jquery 1.7

4

2 回答 2

1

您可以将值设置row为 json 对象，即：{'datas': row}在 click 事件处理程序中，然后使用事件对象访问它。即：e.data.datas。

演示代码：

function populateResult(data, resultElementId) {
  $.each(data, function(i, row) {
    $trs = $(`<tr><td> ${row.name} </td></tr>`).appendTo(resultElementId);
    //on click pass that row as well
    $trs.on('click', {
      'datas': row
    }, myfunction);
  })

}
 function myfunction(e) {
 //use event object to access data
    console.log('Data :  ' + JSON.stringify(e.data.datas));
  }



populateResult([{
  "name": "s1",
}, {
  "name": "s2"
}], "#myTableBody")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<table>
  <tbody id="myTableBody"></tbody>
</table>

于 2021-05-03T14:39:24.677 回答
0

有很多方法可以实现您所需要的。这里有两个：

将点击处理程序分配给委托人父级

$("#table tbody").on("click", "tr", function() {
  // get the tbody TR index and that's its position in the data array
  const idx = $(this).index();
  const row = data[idx];
  myfunction(row);
});

或者

使用已分配的点击处理程序创建 TR

function populateResult(data, resultElementId) {
  $.each(data, (i, row) => $("<tr>", {
    html: `<td>${row.name}</td>`,
    appendTo: resultElementId,
    click() {
      myfunction(row)
    }
  }));
}

最后一个例子的演示：

function populateResult(data, resultElementId) {
  $.each(data, (i, row) => $("<tr>", {
    html: `<td>${row.name}</td>`,
    appendTo: resultElementId,
    click() {
      myfunction(row)
    }
  }));
}

function myfunction(shipObj) {
  console.log("data :" + JSON.stringify(shipObj));
}

const data = [{name:"Lorem"}, {name: "Ipsum"}];
populateResult(data, "#myTableBody");
<table>
  <tbody id="myTableBody"></tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

于 2021-05-03T10:07:37.797 回答