Question

我在.aspx文件中有此代码段：

<table id="myTable" class="table table-striped">
    <tr>
        <th>Id</th>
        <th>Nome</th>
        <th>Ops</th>
    </tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
</table>
<button id="buttonTest" onclick="updateTable()">Test Button</button>

在与此文件关联的Javascript文件中，我具有以下方法：

function updateTable(data) {
    parsedData = JSON.parse(data);
    // Find a <table> element with id="myTable":
    var table = document.getElementById("myTable");

    //Deletes all the rows
    deleteTableRows(table);

    //Inserts the new data
    for (i = 0; i < parsedData.length; i++) {
        var row = table.insertRow(table.rows.length);

        // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);

        // Add some text to the new cells:
        tAID = parsedData[i].TipoAtributoID;
        cell1.innerHTML = tAID;
        cell2.innerHTML = parsedData[i].Nome;
        cell3.innerHTML = '<button onclick="deleteTipoAtributo('+tAID+')" class="btn btn-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>';
        cell3.innerHTML += '<button onclick="deleteTipoAtributo('+tAID+')" class="btn btn-info"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>';
        }
}

如您所见，我正在通过click事件传递第一个单元格ID。这对我来说似乎很粗略，但是我找不到更好的方法。最好的选择是什么，以便在onclick上调用的函数可以找出按钮所在的行的第一个单元格的内容是什么？

将多次调用更新表内容的方法，因此（我认为）很难对html中的按钮进行编码。谢谢！

Answer 1

如果确定该按钮是<td>的直接子代，则可以通过以下方式检索该行中的第一个单元格：

转到按钮的父项<td>：this.parentNode
转到<td>的父<tr>：td.parentNode
获取<tr>的第一个子节点：tr.firstChild
获取第一个单元格的html内容：td.innerHTML

function onBtnClick(e) {
  // note that here 'this' is the element on which the function was called
  var firstCell = this.parentNode.parentNode.firstChild;

  deleteTipoAtributo(firstCell.innerHTML); // call your function
}

现在，您可以将onClick函数分配给onBtnClick，而无需任何参数：

<button onclick="onBtnClick" class="btn btn-info"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>

此外，为避免重复和通过HTML字符串设置单元格内容，您可以创建一个按钮DOM节点，然后使用.appendChild()将其插入到单元格中。

获取按钮中第一个单元格的值，请单击第三个单元格

1 个答案: