Javascript-如何通过数组添加表行onclick函数

Question

我有一个数组和branch_id，我想使用onclick函数传递给javascript add table行。

var branch_id = 1;
var member_data= [];
    member_data.push({
        phone: 123,
        name: "aaa",
        id: 3,
    });
    member_data.push({
        phone: 456,
        name: "bbb",
        id: 4,
    });
  addrow(branch_id ,member_data)

将数据和数组传递给addrow函数，并将数组设置为onclick函数中的参数。 单击“显示”按钮时，它将显示所有阵列数据

function addrow(branch_id, member_data){
   console.log(member_data)//able to read array
   var table = document.getElementById("itemTable");
   var tableRow = table.rows.length;
   var row = table.insertRow(tableRow);
   var cell1 = row.insertCell(0);

   cell1.innerHTML = 
                    '<button type="button" onclick="show_member(member_data)">Show</button>'//this line of show "member_data is not defined"
                    + '<input type="text" name="branch" value="'+branch_id+'">';
}

function show_member(member_data){
    for (var i = 0; i < member_data.length; i++) {
       alert(member_data[i]);
    }
}

但是我无法将数组传递给onclick，它显示“未定义member_data”。 无法将数组传递给onclick函数

Answer 1

您尚未显示完整的代码，但是如果您将show_member(member_data)临时更改为show_member("fake data") ，则会收到一条错误消息，指出show_member ，这表明问题不仅在于member_data可以找不到，但实际上也找不到show_member函数。 这告诉我们问题是范围。

我已经对您的代码进行了重新组织，以便将需要访问的项置于更持久的范围内，并且代码现在可以运行：

<script>

// These variables and functions are being declared in a higher scope than where 
// they will be called from, which makes them accessible to any lower scopes.
var branch_id = 1;
var member_data = [];
member_data.push({
  phone: 123,
  name: "aaa",
  id: 3,
});

member_data.push({
  phone: 456,
  name: "bbb",
  id: 4,
});

function show_member(data) {
  for (var i = 0; i < data.length; i++) {
    alert(data[i].phone);
  }
}

function addrow(branch_id, member_data) {
  console.log(member_data)//able to read array
  var table = document.getElementById("itemTable");
  var tableRow = table.rows.length;
  var row = table.insertRow(tableRow);
  var cell1 = row.insertCell(0);

  cell1.innerHTML = '<button type="button" onclick="show_member(member_data)">Show</button>'
                    + '<input type="text" name="branch" value="' + branch_id + '">';
}

window.addEventListener("DOMContentLoaded", function () {
  // addrow was declared at a higher scope, so it's accessible here
  // We need to have this function call wait until the DOM is loaded
  // because it needs to scan the DOM for the table elements
  addrow(branch_id, member_data);
});

</script>