点击表格行并获取所有单元格的值 [英] Click table row and get value of all cells

问题描述

我不知道JQuery，所以我希望有一种方法可以在纯javascript中执行此操作。

我需要点击表格行并获取该行中每个单元格的值。这是我的表格格式：

 < table class ='list'> 
< tr> 
< th class ='tech'> OCB< / th> 
< th class ='area'>区域< / th> 
< th class ='name'>名称< / th> 
< th class ='cell'> Cell＃< / th> 
 < / tr> 
< tr onclick =somefunction（）> 
< td> 275< / td> 
< td> Layton安装< / td> 
< td>本杰明劳埃德< / td> 
< td>（801）123-456< / td> 
< td> Ben< / td> 
< / tr> 
< / table> 
  

是否有为每个单元添加唯一ID的问题？

解决方案

不需要添加id或将多个事件处理程序添加到表中。一键式事件就是所需要的。你也应该使用表格的add和tbody来将标题从内容中分离出来。

HTML：
$ b

 < table class ='list'> 
< thead> 
< tr> 
< th class ='tech'> OCB< / th> 
< th class ='area'>区域< / th> 
< th class ='name'>名称< / th> 
< th class ='cell'> Cell＃< / th> 
 < / tr> 
< / thead> 
< tbody> 
< tr> 
< td> 275< / td> 
< td> Layton安装< / td> 
< td>本杰明劳埃德< / td> 
< td>（801）123-456< / td> 
< td> Ben< / td> 
< / tr> 
< / tbody> 
< / table> 
  

JavaScript：

  var table = document.getElementsByTagName（table）[0]; 
 var tbody = table.getElementsByTagName（tbody）[0]; 
 tbody.onclick = function（e）{
 e = e || window.event; 
 var data = []; 
 var target = e.srcElement || e.target; 
 while（target& target.nodeName！==TR）{
 target = target.parentNode; 
} 
 if（target）{
 var cells = target.getElementsByTagName（td）; 
 for（var i = 0; i< cells.length; i ++）{
 data.push（cells [i] .innerHTML）; 
} 
} 
 alert（data）; 
}; 
  

示例：

http://jsfiddle.net/ZpCWD/

I don't know JQuery, so I'm hoping there is a way to do this in pure javascript.

I need to click on a table row and get the value of each cell in that row. Here is the format of my table:

<table class='list'>
    <tr>
        <th class='tech'>OCB</th>
        <th class='area'>Area</th>
        <th class='name'>Name</th>
        <th class='cell'>Cell #</th>
        <th class='nick'>Nickname</th>
    </tr>
    <tr onclick="somefunction()">
        <td>275</td>
        <td>Layton Installation</td>
        <td>Benjamin Lloyd</td>
        <td>(801) 123-456</td>
        <td>Ben</td>
    </tr>
</table>

Is there anyway short of putting a unique ID to each cell?

解决方案

There is no need to add ids or add multiple event handlers to the table. One click event is all that is needed. Also you should use thead and tbody for your tables to separate the heading from the content.

HTML:

<table class='list'>
    <thead>
        <tr>
            <th class='tech'>OCB</th>
            <th class='area'>Area</th>
            <th class='name'>Name</th>
            <th class='cell'>Cell #</th>
            <th class='nick'>Nickname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>275</td>
            <td>Layton Installation</td>
            <td>Benjamin Lloyd</td>
            <td>(801) 123-456</td>
            <td>Ben</td>
        </tr>
    </tbody>
</table>

JavaScript:

var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    if (target) {
        var cells = target.getElementsByTagName("td");
        for (var i = 0; i < cells.length; i++) {
            data.push(cells[i].innerHTML);
        }
    }
    alert(data);
};

Example:

http://jsfiddle.net/ZpCWD/

这篇关于点击表格行并获取所有单元格的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！