javascript 单击表格行并获取所有单元格的值

oyjwcjzk 于 2023-04-04 发布在 Java

关注(0)|答案(6)|浏览(148)

我不知道jQuery，所以我希望有一种方法可以在纯Javascript中做到这一点。
我需要点击表格中的一行并获取该行中每个单元格的值。下面是我的表格的格式：

<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>

是否有任何短的把一个唯一的ID到每个单元格？

JavaScript

来源：https://stackoverflow.com/questions/16426163/click-table-row-and-get-value-of-all-cells

6条答案

按热度按时间

cig3rfwq1#

不需要添加id或添加多个事件处理程序到表中。只需一次单击事件即可。此外，您应该为表使用head和tbody来将标题与内容分开。

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);
};

<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>

示例：
http://jsfiddle.net/ZpCWD/

赞(0）回复(0）举报 2023-04-04

dvtswwa32#

检查此小提琴link

超文本标记语言：

<table id="rowCtr" 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>

脚本：

init();
function init(){

    addRowHandlers('rowCtr');

}

function addRowHandlers(tableId) {
    if(document.getElementById(tableId)!=null){
        var table = document.getElementById(tableId);
        var rows = table.getElementsByTagName('tr');
        var ocb = '';
        var area = '';
        var name = '';
        var cell = '';
        var nick = '';
        for ( var i = 1; i < rows.length; i++) {

            rows[i].i = i;
            rows[i].onclick = function() {

                ocb = table.rows[this.i].cells[0].innerHTML;                
                area = table.rows[this.i].cells[1].innerHTML;
                name = table.rows[this.i].cells[2].innerHTML;
                cell = table.rows[this.i].cells[3].innerHTML;
                nick = table.rows[this.i].cells[4].innerHTML;
                alert('ocb: '+ocb+' area: '+area+' name: '+name+' cell: '+cell+' nick: '+nick);
            };
        }
    }
}

赞(0）回复(0）举报 2023-04-04

avwztpqn3#

var elements  = document.getElementsByTagName('td');
for (var i =0; i < elements.length; i++) {
   var cell_id = 'id' + i;
   elements[i].setAttribute('id', cell_id);
}

也许把这样的东西在函数中你的onclick链接从tr？

赞(0）回复(0）举报 2023-04-04

nnvyjq4y4#

$("tr").click(function () {
    var rowItems = $(this).children('td').map(function () {
        return this.innerHTML;
    }).toArray();
});

赞(0）回复(0）举报 2023-04-04

but5z9lq5#

这显示了根据dataTr.querySelectorAll（“td”）[0].innerText;

document.querySelector("#myTable").addEventListener("click",event => {
    let dataTr = event.target.parentNode;
    let dataRes = dataTr.querySelectorAll("td")[0].innerText;
    console.log(dataRes);
});

赞(0）回复(0）举报 2023-04-04

g6ll5ycj6#

您可以使用访问td单元格内容

$("tr").click(function () {
var data= $(this).children("td").map(function(){
                  return $(this).text();
                }).get();
});

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<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>
        <td>275</td>
        <td>Layton Installation</td>
        <td>Benjamin Lloyd</td>
        <td>(801) 123-456</td>
        <td>Ben</td>
    </tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$("tr").click(function () {
var data= $(this).children("td").map(function(){
                  return $(this).text();
                }).get();
 // first column of table
    console.log(data[0]); 
     console.log('--------------'); 
    //3rd column
    console.log(data[2]);             
});
    

</script>
</body>
</html>

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 单击表格行并获取所有单元格的值

6条答案

相关问题

热门标签

最新问答