如何通過單擊按鈕獲取單元格值

Question

我有一個問題，我無法解決我嘗試多少。 通過單擊“ 編輯客戶”按鈕，我不會從CustomerNr單元格中獲取值。 我的問題是，我不知道如何通過單擊按鈕獲取行索引，然后將其傳遞給我的函數，以便我可以專門獲取該行上的CustomerNr我按下按鈕。 您可以查看我的jsfiddle鏈接並注意，這是我第一次使用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);

}

http://jsfiddle.net/6srjc7qL/

Answer 1

我已經將你的按鈕的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：

<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>

}

Answer 2

按鈕位於tr內部的td內部，因此您需要向上移動2個節點。 試試這個：

function GetCellValues(obj) {

    alert(obj.parentNode.parentNode.rowIndex);

}

Answer 3

HTML

    <html>

    <head>
        <style>
            table, td {
                border: 1px solid black;
            }
            .selected {
                background-color: yellow;
            }
        </style>
    </head>

    <body>
        <center>
            <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 id="otherButton" onclick="GetCellValues()">Edit Customer</button>
                    </td>
                </tr>
                <tr>
                    <td onclick="myMethod(this);">22</td>
                    <td>Razor</td>
                    <td>David</td>
                    <td>
                        <button id="otherButton" onclick="GetCellValues()">Edit Customer</button>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>H&M</td>
                    <td>Samuel Adams</td>
                    <td>
                        <button id="otherButton" onclick="GetCellValues()">Edit Customer</button>
                    </td>
                </tr>
        </center>
    </body>

</html>

JS

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

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

如何通過單擊按鈕獲取單元格值

問題描述

3 個解決方案

解決方案1
3 已采納 2014-12-07 00:18:49

解決方案2
2 2014-12-06 23:57:23

解決方案3
1

如何通過單擊按鈕獲取單元格值

問題描述

3 個解決方案

解決方案1 3 已采納 2014-12-07 00:18:49

解決方案2 2 2014-12-06 23:57:23

解決方案3 1

解決方案1
3 已采納 2014-12-07 00:18:49

解決方案2
2 2014-12-06 23:57:23

解決方案3
1