时间戳

首页 > 解决方案 > 将 JSON 数组传递给按钮 jQuery 的动态创建的 onclick 方法

javascript - 将 JSON 数组传递给按钮 jQuery 的动态创建的 onclick 方法

问题描述

以下是我的代码，数据是 json 数组，我想传入更新按钮的 onclick 方法 

function populateData(data) {
        $(".studentPanel").show();
        for (var i = 0; i < data.length; i++) {

            $(".totalFee" + i).val(data[i].total.amount);

            for (var j = 0; j < data[i].submissions.length; j++) {

                var ts = new Date(data[i].submissions[j].created_at);
                var dateString = ts.getDate() + "-" + ts.getMonth() + "-" + ts.getYear();
                console.log(data[i].submissions[j].amount);
                var tableRows = "<tr><td>" + data[i].submissions[j].amount + "</td><td>" + dateString + "</td>" +
                    "<td><button class=\"btn btn-primary Update\" onclick='updateFees(\"" + data[i].submissions[j].id + "\")'>Update</button></td><td><button  onclick='deleteFees(\"" + data[i].submissions[j].id + "\")'  class=\"btn btn-danger Delete\">Delete</button></td>\n</tr>";
                console.log(tableRows);
                $(".feeTable" + i).append(tableRows);
            }

        }
    }

标签： javascriptjquery

解决方案

这可以使用 data-id 属性来完成。前任：

 var tableRows = "<tr>"+
                   "<td>" + data[i].submissions[j].amount + "</td>"+
                   "<td>" + dateString + "</td>" +
                   "<td>"+
                     "<button class='btn btn-primary Update' data-id=" + data[i].submissions[j].id + " onclick='updateFees()'>"+
                        "Update"+
                     "</button>"+
                   "</td>"+
                   "<td>"+
                     "<button onclick='deleteFees()' class='btn btn-danger Delete' data-id=" + data[i].submissions[j].id + ">"+
                       "Delete"+
                     "</button>"+
                    "</td>"+
                  "</tr>";

然后在 updateFees 和 deleteFees 的函数体中，这个 id 可以被访问为：

function updateFees(e){
  var id = $(e.currentTarget).data("id");
  //Rest of the code follows here
}

推荐阅读