通过单击表格行获取字段 (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) 值的主要内容,如果未能解决你的问题,请参考以下文章

为啥表格内的按钮在单击时没有获得 td 的值?

如何通过 JavaScript 获取 html 表格 td 单元格值?

jQuery:通过单击按钮从表行中获取值[重复]

jQuery - 获取与单击的元素在同一行中的表格单元格的文本值

获取表格视图中按钮单击的文本字段值

从页面顶部获取表格行高