动态创建 tr & td 并附加到 table。 onclick 传递 json 选中的对象

Question

将行追加到现有 table。每次点击时都必须传递所选对象。

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 上调用。

注：我用的是jquery1.7

Answer 1

有多种方法可以满足您的需求。这是两个：

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

$("#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>

Answer 2

您可以将 row 的值设置为 json 对象，即：{'datas': row} inside click event handler 然后使用 event 对象访问它.即：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>

动态创建 tr & td 并附加到 table。 onclick 传递 json 选中的对象

To create tr & td dynamically and append to table. Onclick pass the json selected object

jquery

jquery-1.7

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

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