通过单击表格行获取字段 (td) 值
Posted
技术标签:
【中文标题】通过单击表格行获取字段 (td) 值【英文标题】：Obtain field (td) values by clicking on table row 【发布时间】：2013-08-01 13:00:56 【问题描述】：我需要你的帮助。
我有下表，详细如下。我想做的是点击表格中的一行（不包括标题）并获取所选行的列值。
如何使用表格中选定行的信息填充文本框？
请不要图书馆。
<!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>
【问题讨论】：
请张贴代码显示您尝试过的内容 @Avitus "请不要图书馆" 提供的答案不使用库 【参考方案1】：这是一个如何在 javascript 中使用event delegation 的示例（对于动态添加的内容特别方便）。事件处理程序附加到 TABLE 元素的 onclick 属性：
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
事件处理程序直接附加到每个 TR 元素的替代解决方案如下所示：
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
【讨论】：
【参考方案2】：只需使用普通的 javascript，您就可以做到这一点：
<html>
<head>
<script language="javascript" type="text/javascript">
function showRow(row)
var x=row.cells;
document.getElementById("firstname").value = x[0].innerHTML;
document.getElementById("lastname").value = x[1].innerHTML;
document.getElementById("age").value = x[2].innerHTML;
document.getElementById("total").value = x[3].innerHTML;
document.getElementById("discount").value = x[4].innerHTML;
document.getElementById("diff").value = x[5].innerHTML;
</script>
</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 onclick="javascript:showRow(this);">
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>9.99</td>
<td>20.3%</td>
<td>+3</td>
</tr>
<tr onclick="javascript:showRow(this);">
<td>john</td>
<td>hood</td>
<td>33</td>
<td>19.99</td>
<td>25.1%</td>
<td>-7</td>
</tr>
<tr onclick="javascript:showRow(this);">
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>15.89</td>
<td>44.2%</td>
<td>-15</td>
</tr>
<tr onclick="javascript:showRow(this);">
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>153.19</td>
<td>44%</td>
<td>+19</td>
</tr>
<tr onclick="javascript:showRow(this);">
<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>
【讨论】：
【参考方案3】：试试这个（见the fiddle):
var table = document.getElementById( 'myTable' ),
inputHash =
'0': 'firstname',
'1': 'lastname',
'2': 'age',
'3': 'total',
'4': 'discount',
'5': 'diff'
;
for ( var i in inputHash )
inputHash[ i ] = document.getElementById( inputHash[ i ] );
table.addEventListener( 'click', function( evt )
var target = evt.target;
if ( target.nodeName != 'TD' )
return;
var columns = target.parentNode.getElementsByTagName( 'td' );
for ( var i = columns.length; i-- ; )
inputHash[ i ].value = columns[ i ].innerHTML;
);
【讨论】：
如果您使用的是旧版浏览器，这将不起作用，因为旧版浏览器不支持“addEventListener”。这就是为什么在 jQuery 中他们做其他事情的原因。请阅读：***.com/questions/4810766/… 为什么点击的元素没有加载到文本框jsfiddle.net/rrzZU/703【参考方案4】：像这样在每个 trs 上放置一个 onclick：
onclick="fillme(this)"
然后把这个脚本放在你的脑海里
<script>
function fillme(o)
var inputs=document.getElementsByTagName('input');
var tds=o.getElementsByTagName('td');
for(a in tds)
inputs[a].value=tds[a].innerHTML;
</script>
【讨论】：
这仅在输入与 TD 的顺序相同时才有效。如果它们的顺序不同，您的数据将显示错误。 您好 Adam，尝试将for(a in cells) 更新为：for(var a in cells) if (!cells.hasOwnProperty(a)) continue; inputs[a].value=tds[a].innerHTML; 以仅分配数字索引。除此之外，解决方案还可以。以上是关于通过单击表格行获取字段 (td) 值的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 JavaScript 获取 html 表格 td 单元格值？