javascript - 无法使用 onclick 动态获取表格单元格值

Question

我面临一个奇怪的问题。我正在生成一个动态表，并在每个表行末尾使用 onclick 我必须获取特定的表单元格值。这里的问题是我每次执行 onclick 时都无法执行 onclick 它显示

在收到该错误后，当我检查元素时，我发现这是 onclick 上的问题

它在 test() 的左侧创建双引号，另一个问题是我有一个名为 hour 的列，它显示像 7-8 这样的间隔，就像它在中显示 -1 一样结果。

for (var i = 0; i < Location.length; i++) {
  tr = tr + "<tr>";
  tr = tr + "<td >" + Location[i].Date + "</td>";
  tr = tr + "<td >" + Location[i].Hour + "</td>";
  tr = tr + "<td >" + Location[i].Amount + "</td>";                
  tr = tr + "<td><input  type='button'  class='nav_button btnAction' onclick='test('" + Location[i].Hour + "','" + Location[i].Date + "','" + Location[i].Amount + "'></td>";
  tr = tr + "</tr>";               
};

下面是我的动态表数据

Answer 1

检查此工作代码。

var tr='';
var Location=[{Date:'25 jun 2017',Hour:'1-2',Amount:100},{Date:'25 jun 2017',Hour:'2-3',Amount:200},{Date:'25 jun 2017',Hour:'3-4',Amount:300}];
for (var i = 0; i < Location.length; i++) {
  tr = tr + "<tr>";
  tr = tr + "<td >" + Location[i].Date + "</td>";
  tr = tr + "<td >" + Location[i].Hour + "</td>";
  tr = tr + "<td >" + Location[i].Amount + "</td>";                
  tr = tr + '<td><input type="button"  value="test" class="nav_button btnAction" onclick="test(\'' + Location[i].Hour + '\',\'' + Location[i].Date +  '\',\'' + Location[i].Amount + '\')"></td>';
  tr = tr + "</tr>";               
};
document.getElementById('container').innerHTML=tr;

function test(hour, date, amount){
	console.log( hour, date, amount);
}

<table id="container"></table>