showing results for - "how to get row index and cellindex together in javascript"
Beatrice
29 Jan 2017
1<html>
2<head>
3    <title>Read Data from HTML Table uisng JavaScript</title>
4    <style>
5        th, td, p, input {
6            font:14px Verdana;
7        }
8        table, th, td 
9        {
10            border: solid 1px #DDD;
11            border-collapse: collapse;
12            padding: 2px 3px;
13            text-align: center;
14        }
15        th {
16            font-weight:bold;
17        }
18    </style>
19</head>
20
21<body>
22    <table id="empTable">
23        <tr>    
24            <th id="id">ID</th>
25                <th id="emp">Employee Name</th>
26                    <th id="age">Age</th>
27        </tr>
28        <tr><td>01</td><td>Alpha</td><td>37</td></tr>
29        <tr><td>02</td><td>Bravo</td><td>29</td></tr>
30        <tr><td>03</td><td>Charlie</td><td>32</td></tr>
31    </table>
32
33    <p><select name="select" id="opt">
34        <option value="">--Select a Value--</option>
35        <option value="id">ID</option>
36        <option value="emp">Employee Name</option>
37        <option value="age">Age</option></select>
38    </p>
39
40    <input type="button" id="bt" value="Show Data" onclick="showTableData()" />
41    <p id="info" style="font-style:italic;"></p>
42</body>
43
44<script>    
45    function showTableData() { 
46        document.getElementById('info').innerHTML = ""; 
47        var myTab = document.getElementById('empTable'); 
48        var opt = document.getElementById("opt").value; 
49        var index = document.getElementById(opt).cellIndex; 
50        
51        for (i = 1; i < myTab.rows.length; i++) { 
52            var objCells = myTab.rows.item(i).cells; 
53            
54            for (var j = index; j <= index; j++) { 
55                info.innerHTML = info.innerHTML + ' ' + objCells.item(j).innerHTML; 
56            } 
57            
58            info.innerHTML = info.innerHTML + '<br />'; 
59        } 
60    }
61</script>
62</html>