(function () { if (window.addEventListener) { window.addEventListener('load', run, false); } else if (window.attachEvent) { window.attachEvent('onload', run); } function run() { var t = document.getElementById('myTable'); t.onclick = function (event) { event = event || window.event; //IE8 var target = event.target || event.srcElement; while (target && target.nodeName != 'TR') { // find TR target = target.parentElement; } //if (!target) { return; } //tr should be always found var cells = target.cells; //cell collection - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement //var cells = target.getElementsByTagName('td'); //alternative if (!cells.length || target.parentNode.nodeName == 'THEAD') { return; } var f1 = document.getElementById('firstname'); var f2 = document.getElementById('lastname'); var f3 = document.getElementById('age'); var f4 = document.getElementById('total'); var f5 = document.getElementById('discount'); var f6 = document.getElementById('diff'); f1.value = cells[0].innerHTML; f2.value = cells[1].innerHTML; f3.value = cells[2].innerHTML; f4.value = cells[3].innerHTML; f5.value = cells[4].innerHTML; f6.value = cells[5].innerHTML; //console.log(target.nodeName, event); }; } })();
<form action="" method="" > <table id="form" cellspacing="1"> <tr width="100%"><th colspan="2" >php listview - anichandran</th></tr> <tr> <td id="left"> Firstname is:</td> <td><input type="text" id="firstname" /></td> </tr> <tr> <td id="left">Lastname is:</td> <td><input type="text" id="lastname" /></td> </tr> <tr> <td id="left">Age is:</td> <td><input type="text" id="age" /></td> </tr> <tr> <td id="left">Total is:</td> <td><input type="text" id="total" /></td> </tr> <tr> <td id="left">Discount is:</td> <td><input type="text" id="discount" /></td> </tr> <tr> <td id="left">Diff is:</td> <td><input type="text" id="diff" /></td> </tr> <tr><td></td> <td colspan="2"><input type="submit" value="Submit" /><input type="submit" value="Reset" /></td> </tr> </table> </form> <table id="myTable" cellspacing="1" style="height:15px;overflow:scroll;"> <thead> <tr> <th>first name</th> <th>last name</th> <th>age</th> <th>total</th> <th>discount</th> <th>diff</th> </tr> </thead> <tr> <td>peter</td> <td>parker</td> <td>28</td> <td>9.99</td> <td>20.3%</td> <td>+3</td> </tr> <tr> <td>john</td> <td>hood</td> <td>33</td> <td>19.99</td> <td>25.1%</td> <td>-7</td> </tr> <tr> <td>clark</td> <td>kent</td> <td>18</td> <td>15.89</td> <td>44.2%</td> <td>-15</td> </tr> <tr> <td>bruce</td> <td>almighty</td> <td>45</td> <td>153.19</td> <td>44%</td> <td>+19</td> </tr> <tr> <td>bruce</td> <td>evans</td> <td>56</td> <td>153.19</td> <td>23%</td> <td>+9</td> </tr> <tr> <td>clark</td> <td>kent</td> <td>18</td> <td>15.89</td> <td>44.2%</td> <td>-15</td> </tr> <tr> <td>bruce</td> <td>almighty</td> <td>45</td> <td>153.19</td> <td>44%</td> <td>+19</td> </tr> <tr> <td>bruce</td> <td>evans</td> <td>56</td> <td>153.19</td> <td>23%</td> <td>+9</td> </tr> </table>
th,tr { width:100px; height:10px; background:#ddd; } th { background:green; } #form,#myTable { width:100%; background:#ddd; margin:0px auto; border:1px solid orange; } input { background:#fff; border:1px solid ddd; } input[type="submit"] { background:eee; border:1px solid orange; font-weight:bold; border-radius:5px; color:red; } #left { text-align:right; }