Javascript 如何通过单击按钮获取单元格值

我有一个问题，我无法解决我尝试了多少。通过单击“编辑客户”按钮，我不想从CustomerNr单元格中获取值。我的问题是，我不知道如何通过单击一个按钮来获取行索引，然后将其传递给我的函数，这样我就可以明确地获取我按下按钮的那一行上的CustomerNr。您可以查看我的JSFIDLE链接并注意，这是我第一次使用Javascript/Jquery编写代码。我对智能解决方案持开放态度

在这里你可以看到我走了多远。我设法从特定单元格中选择值

function GetCellValues() {
    var Row = document.getElementById("somerow");
    var Cells = Row.getElementsByTagName("td");
    alert(Cells[0].innerText);

}

我已经设法通过点击td来获取行索引，但我想通过按下按钮来获取它

function myMethod(obj) {
    alert(obj.parentNode.rowIndex); // parentNode is also used
}

我不想以某种方式将这两个函数结合起来，就像在C中一样。我是一个C程序员

function GetCellValues(e) {
    //Something here
    alert(Cells[0].Rows[e] innerText);

}

---

该按钮位于tr内的td内，因此需要向上移动2个节点。试试这个：

function GetCellValues(obj) {

    alert(obj.parentNode.parentNode.rowIndex);

}

HTML

---

我已经将按钮的id更改为类，因为不能用相同的id命名两个元素，然后我循环遍历这些元素

您应该避免使用内联函数，并始终这样做，这可能会为您节省大量时间并保持更好的可维护性：

Javascript:

    var a = document.getElementsByClassName('otherButton');

for (var i = 0; i<a.length;i++) {
    a[i].addEventListener('click',function(){

     var b = this.parentNode.parentNode.cells[0].textContent;
    alert(b);


    });


}

HTML:

---

您可以将触发器传递给处理程序，然后使用parentNode到达td和tr:@dandavis是按钮位于两者之间的单元格中，如果不修改上游代码以传递元素，则无法工作，此时，obj将是未定义的。请参阅我的小提琴，了解正确工作的示例

function GetCellValues(elm) {
    alert(elm.parentNode.parentNode.cells[0].textContent);
}

function myMethod(obj) {
    alert(obj.parentNode.rowIndex);
}

    var a = document.getElementsByClassName('otherButton');

for (var i = 0; i<a.length;i++) {
    a[i].addEventListener('click',function(){

     var b = this.parentNode.parentNode.cells[0].textContent;
    alert(b);


    });


}

<table id="somerow">
        <tr>
            <th>CustomerNr</th>
            <th>Name</th>
            <th>Contact</th>
        </tr>
        <tr >
            <td>1</td>
            <td>Cigarettes Inc</td>
            <td>Rambo</td>
            <td>
                <button class="otherButton" >Edit Customer</button>
            </td>
        </tr>
        <tr >
            <td >22</td>
            <td>Razor</td>
            <td>David</td>
            <td>
                <button class="otherButton">Edit Customer</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>H&M</td>
            <td>Samuel Adams</td>
            <td>
                <button class="otherButton" >Edit Customer</button>
            </td>
        </tr>

}