[英]Click table row and get value of all cells
我不知道 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 嗎?
無需向表中添加 id 或添加多個事件處理程序。 一鍵事件就是所需要的。 此外,您應該對表格使用 thead 和 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>
例子:
檢查這個小提琴鏈接
HTML:
<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);
};
}
}
}
$("tr").click(function () {
var rowItems = $(this).children('td').map(function () {
return this.innerHTML;
}).toArray();
});
這顯示了根據 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);
});
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
函數中?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.