javascript - 如何在不使用按钮或 tbody 的情况下从动态生成的表中单击一行来获取 HTML 表中单元格的值
问题描述
我希望能够单击一行中的任意位置并获取其第一个单元格的内容,无论我单击何处。请注意,这是一个动态生成的表,仅由<th>
和<tr>
元素<td>
组成(no <tbody>
),因此所述表中的所有行都没有id
. 注释部分自行工作,为什么我不能从第一个单元格中获取文本?或者甚至只是该行的内容将是一个好的开始。我所在的函数中的任何地方的选择器有问题//trying to get the contents
吗?我不知道这有什么问题。
// Build HTML Table
function buildHtmlTable(portalData, tablename) {
var columns = [];
var headerTr$ = $('<tr/>');
var n = 0;
if (tablename == "order-table") {
document.getElementById("dist-name").innerText = JSON.parse(JSON.stringify(portalData[0], null, 2))["Company Name"];
n = 1;
}
for (var i = 0 ; i < portalData.length ; i++) {
var rowHash = portalData[i];
for (var key in rowHash) {
if ($.inArray(key, columns) == -1) {
columns.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$('#' + tablename).append(headerTr$);
for (i = 0 ; i < portalData.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = n ; colIndex < columns.length ; colIndex++) { // n is how many columns to drop, based on table name
var cellValue = portalData[i][columns[colIndex]];
if (cellValue == null) {
cellValue = "";
}
row$.append($('<td/>').html(cellValue));
}
$('#' + tablename).append(row$);
}
// Drop unnecessary columns
for(i = 0 ; i<n; i++) {
$("#order-table").find('td,th').first().remove();
}
//Trying to get the contents
$(function(){
$("#order-table td").click(function() {
// var column_num = parseInt( $(this).index() ) + 1;
// var row_num = parseInt( $(this).parent().index() );
// alert( "Row_num = " + row_num);
var column = $(this);
var row = ($(this).parent());
alert(row.innerText);
alert(column.innerText);
});
});
}
解决方案
您可以将点击事件绑定到页面上的现有元素,并使用 DOM 导航获取第一个单元格的值。因此,例如,如果您的表格已经存在于页面上,并且您希望将点击事件绑定到动态添加的行,则可以引用该table
元素:
$(document).ready(function() {
$('table').on('click', 'tr', function() {
var value = $(this).find('td:first-child').text();
//do something with value
});
});
在您的情况下,您似乎正在将表格本身动态添加到页面中。在这种情况下,您可以绑定document
并引用动态添加的表的 id:
$(document).ready(function() {
$('document').on('click', '#order-table tr', function() {
var value = $(this).find('td:first-child').text();
//do something with value
});
});
如果您希望在所有表格上发生此点击事件,您可以执行以下操作:
$(document).ready(function() {
$('document').on('click', 'table tr', function() {
var value = $(this).find('td:first-child').text();
//do something with value
});
});
推荐阅读
- facebook - 无法使用 Facebook 登录登录到我的应用
- python - 如何使用 scikit-learn 将 one-hot-encoded 数据替换为与它们相关的原始数据?
- swift - 如何访问 switch case 的关联值,它本身在尾随闭包中
- flutter - 在 Flutter 中,如何将 'transformEvents' 替换为 `on
`带有`EventTransformer`? - node.js - 如何仅在周日但每秒打开 Cron Job?
- html - 我无法创建 CSS 下拉菜单
- excel - 使用 VBA 代码进行网页抓取:如何浏览登录页面?
- boost - Boost:如何构建特定的数学工具目标?
- selenium - 如何转换为c#
- r - ggplot2:使用 geom_point() 并不是我所有的字符标签都绘制在 X 轴上