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>