Menu
I need your help.
I have the following table as detailed below. What I would like to do is to click on one of the rows in the table (headers excluded) and obtain the column values of the selected row.
How do I populate the textboxes with the information from the selected row in the table?
No libraries please.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="myTable" cellspacing="1">
<thead>>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
Firstname is:<input type="text" id="firstname" />
<br>
Lastname is:<input type="text" id="lastname" />
<br>
Age is:<input type="text" id="age" />
<br>
Total is:<input type="text" id="total" />
<br>
Discount is:<input type="text" id="discount" />
<br>
Diff is:<input type="text" id="diff" />
</body>
</html>
385
Here is one example how to use event delegation in javascript (it's especially convenient for dynamically added content) . The event handler is attached to TABLE element's onclick attribute:
function run(){
document.getElementById('myTable').onclick = function(event){
event = event || window.event; //for IE8 backward compatibility
var target = event.target || event.srcElement; //for IE8 backward compatibility
while (target && target.nodeName != 'TR') {
target = target.parentElement;
}
var cells = target.cells; //cells collection
//var cells = target.getElementsByTagName('td'); //alternative
if (!cells.length || target.parentNode.nodeName == 'THEAD') { // if clicked row is within 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;
}
}
JSFIDDLE: code / result page
The alternative solution, where the event handler is directly attached to each TR element can look like this:
function run() {
var t = document.getElementById('myTable');
var rows = t.rows; //rows collection - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement
for (var i=0; i<rows.length; i++) {
rows[i].onclick = function () {
if (this.parentNode.nodeName == 'THEAD') {
return;
}
var cells = this.cells; //cells collection
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;
};
}
}
JSFIDDLE: code / result page
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
