【问题标题】：Dynamically setting an id to a button in js在js中为按钮动态设置id
【发布时间】：2017-05-04 05:59:50
【问题描述】：

我有一个由 firebase 填充的表。我有按钮连接到表中的每一行。问题是我不知道如何区分按钮。

在 ios 中，您可以在 cellForRowAtIndex 中执行此操作

 UIButton *aButton=[[UIButton alloc]initWithFrame:aFrame];
 aButton.tag= A_BUTTON_TAG_CONSTANT + indexPath.row;

然后在您的选择器中，您将确定 tableView 中的哪个按钮被按下，您可以处理数据右侧部分的操作。在我的网络应用中，我有以下内容。

 function myCreateFunction(order) {
var table = document.getElementById("ordersTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = order.addressType;
cell2.innerHTML = order.totalPrice;
for(i in order.address) {
  var aCell=row.insertCell(i+3);
  aCell.innerHTML=order.address[i];
console.log (i, order.address[i])
}
 var timeSince=makeTimeStamp(order.timeStamp);
 var row = table.rows[index]; 
cell3.innerHTML=timeSince;
cell4.innerHTML = '<input id="Button" type="button"  value="click"     onclick="return btntest_onclick()" />';

}

每次发生“child_added”事件时都会调用此方法。所以表格像堆栈一样增长，最近的在顶部。因此，最新的快照将填充在第 0 行，而最旧的将填充在第 n 行，其中 n 是快照数。

现在我希望能够知道在表格中按下了哪个按钮，以便我可以转到另一个页面并显示有关帖子的详细信息。那么我如何知道按下了哪个按钮以及针对的是哪一行？

【问题讨论】：

填充行后，将索引添加到 id，然后您可以使用 JavaScript this。选择按下的 id。

标签： javascript button indexing

【解决方案1】：

在你的函数中保留除最后一行之外的代码，即 -

var table = document.getElementById("ordersTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = order.addressType;
cell2.innerHTML = order.totalPrice;
for(i in order.address) {
  var aCell=row.insertCell(i+3);
  aCell.innerHTML=order.address[i];
  console.log (i, order.address[i])
}
 var timeSince=makeTimeStamp(order.timeStamp);
 var row = table.rows[index]; 
 cell3.innerHTML=timeSince;

然后这样写：

已编辑

var button = document.createElement("button");
button.addEventListener("click", function(){
  myclickFunction(row);
}, false);
cell4.appendChild(button);

您的 myClickFunction 将如下所示：

//this function will be called for the each cell4 button and would contain that cell's row info
function myclickFunction(clickedRow){
  //do something with the row info of clicked button and form payload for rest api
  var payload = formPayload(clickedRow); //the payload formed from the clicked row
  sendAjaxOfThisRow(payload);
}

这样您就不需要添加 id 并在之后进行不必要的 DOM 操作。

【讨论】：

好的。这绝对可以清理它。但是，我怎么知道点击了哪个行按钮？
为什么你必须知道点击了哪个按钮？因为据我了解，在click的回调函数中只需要行或单元格信息。所以我们可以让事情变得声明性而不是动态地获取信息。我正在编辑回调以进一步澄清。

【解决方案2】：

所以最终找到了解决方案。我确实使用了 Vineet 的按钮解决方案。然而，他的解决方案并不完整。我希望实现的主要目标是访问选择按钮的表格行中的信息。它是通过这种方式实现的。在我的按钮选择器中，我有以下内容

function myclickFunction()
{
var idex = $(this).closest('tr').index();
var idex1 = $(this).closest('tr').find('td:eq(0)').text();
var idex2 = $(this).closest('tr').find('td:eq(1)').text();
var idex3 = $(this).closest('tr').find('td:eq(2)').text();
//alert(document.getElementById("ordersTable").rows[0].innerHTML);
alert('<p><b>index:</b>' + idex + ' ' + idex1 + ' ' + idex2 + ' ' +   idex3 + '</p>');
}

我在其他地方找到了这个解决方案。虽然它并没有真正创建对 iOS 的类比；这是预期的行为。在我看来，最接近的电话以某种方式获得了父母。这将检索表格行文本并解决问题。希望这对某人有所帮助

【讨论】：