Pages

▼

2018/02/07

How to get the selected value from within a table using JavaScript.

This post is about how to get the selected value from within a table using JavaScript.

The Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table id="dataTable">
            <tr>
            <td><input value="first" name="first" /></td>
            <td><input value="second" name="second" /></td>
            <td>
            <select name="third">
                <option value="option1">One</option>
                <option value="option2">Two</option>
            </select>
            </td>
            </tr>
        </table>

        <button onclick="getData()">Click</button>
    
        <script>
            function getData(){
                var table = document.getElementById("dataTable");
                var row;
                for (var i = 0,  row = table.rows[i]; i < table.rows.length ;i++) {
                    console.log('here')
                    var x = row.cells[0].childNodes[0].value;
                    var y = row.cells[1].childNodes[0].value;
                    var z = row.cells[2].childNodes[1].value; // select option field
                    console.log(x,y,z);
                }
            }
        </script>     
    </body>
</html>

The Result


The HTML Structure


Reference:

How to get selected option value of all rows of table in JavaScript?
https://stackoverflow.com/questions/43094914/how-to-get-selected-option-value-of-all-rows-of-table-in-javascript
at

No comments:

Post a Comment