javascript - How to get cell value by clicking on a button

I have a problem that I can't solve how much I try. By clicking on the Edit Customer button I wan't to get the value from the CustomerNr cell. My problem is that I don't know how to get the row index by clicking on a button and then pass it to my function so I can specifically get the CustomerNr on that row I pressed the button on. You can take a look at my jsfiddle link and note, this is the first time I code in Javascript/Jquery. I'm open for smart solutions.

Here you can see how far I came. I managed to select value from a specific cell.

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

}

I have managed to get the row index by clicking on on a td but I want to get it by pressing a button.

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

I wan't to somehow bine this two functions, like in C#. (I'm a C# programmer)

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

}

Here you can see how far I came. I managed to select value from a specific cell.

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

}

I have managed to get the row index by clicking on on a td but I want to get it by pressing a button.

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

I wan't to somehow bine this two functions, like in C#. (I'm a C# programmer)

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

}

http://jsfiddle/6srjc7qL/

Share Improve this question edited Jul 24, 2018 at 8:30 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Dec 6, 2014 at 23:42 Sadjad Johansson 3202 silver badges13 bronze badges

1 you can pass the trigger to the handler, and then use parentNode to reach the td and tr: jsfiddle/6srjc7qL/3 – dandavis Commented Dec 6, 2014 at 23:53
1 @dandavis Yes the button is in a cell between <td> – Sadjad Johansson Commented Dec 6, 2014 at 23:55

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

I've changed the id's of your buttons to classes, as you can't name two elements with the same id, then I looped through the elements... Working fiddle

You should avoid to use inline functions and pereferably do it like this, this might safe you a lot of time and keeps it better maintainability:

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>

}

the button is inside the td which is inside the tr, so you need to go 2 nodes up. Try this:

function GetCellValues(obj) {

    alert(obj.parentNode.parentNode.rowIndex);

}

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>

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to get cell value by clicking on a button - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)