单击表格行,获取所有单元格的值
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或添加多个事件处理程序。只需要一次点击事件。此外,您应该使用表的ad和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/
检查这个小提琴链接
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>
JAVASCRIPT:
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);
};
}
}
}
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
链接到的函数中放一些类似的东西?
$("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);
});
您可以使用访问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>
相关文章:
- 从Javascript中选定的行中获取特定单元格的值
- 使用JavaScript获取Gridview单元格值
- jQuery如何获取td单元格值
- 获取关联单元格onchange的值
- 无法使用document.getElementById获取动态生成的单元格的值
- 正在获取IE中的表单元格内容
- 获取命名单元格的行和列索引
- 如何使用javascript从动态表中获取特定的单元格值
- 如何获取嵌入在单元格中的文本框的值
- 如何使用jquery获取表单元格中子元素的值
- 仅使用 PHP 获取表单元格值,没有 ajax
- 在javascript中第一次单击行时获取表单元格值
- 获取HTML表中单击的列中第一个单元格和单击的行中第一个单元的内容
- 获取表中某个单元格的列索引和行索引
- 如何获取gridPanel单元格值?ExtJs
- 在单元格编辑时获取extjs中的行数据
- 如何从HTML表中的多个单元格获取复选框
- 从HTMLTableRowElement中的特定单元格获取子元素并隐藏/删除它们
- 从Google Drive电子表格单元格获取数据
- RadGrid-从客户端从特定单元格获取对象