javascript - 在 jQuery 中单击后检索表格单元格的文本

Question

我在检索被单击的表格单元格的文本时遇到了一些问题，触发事件的唯一方法是将“tbody td”替换为

$("body").click(function(e) {

但这不会为单击的单元格返回正确的数据值。有人知道我可能做错了什么吗？我需要使用 jQuery 创建表格，以便可以根据表单给出的输入动态调整其大小。

$(document).ready(function() {
    $('#selection').submit(function() {
        $(function () {

            var $tbl = $('<table border="1">').attr('id', 'table');
            var $tbody = $('<tbody>').attr('id', 'tableBody');

            for (var i = 0; i < $("#numOfPieces").val(); i++) {
                var trow = $("<tr>"); // New row

                for (var j = 0; j < $("#numOfPieces").val(); j++) {
                    $("<td>")
                            .text('Row : ' + i + ', Col: ' + j)
                            .appendTo(trow); // New data cell
                }
                trow.appendTo($tbody);
            }

            $tbl.append($tbody);
            $('table').remove(); // Remove previously created table
            $('body').append($tbl);
        });
        return false;
    });

    $("tbody td").click(function(e) {
        var currentCellText = $(this).text();
        var LeftCellText = $(this).prev().text();
        alert(currentCellText);
    });
});

Answer 1

问题是您的点击处理程序绑定(bind)到现有表。您需要将其绑定(bind)到“任何”表。在文档就绪函数中:

$('.container').on('click', 'td', function(e) {
  var currentCellText = $(this).text();
  // etc
});

其中 .container 是任何预计不会被销毁的容器包装元素。尽可能让它成为最接近的祖先。如果没有可用的候选人，那么您可以使用 body，但如果可以的话，我会避免使用这么高的位置。

如果需要，td 选择器当然可以修改为更具体。如果您有一种类型的表应该存在此行为，请忘记 ID，并为该类型的表指定一个类。然后td就变成了.someClass td。

在尝试使用 LefCellText 之前，您可能还需要清理它是否存在。按照您拥有的方式声明变量是可以的(如果没有这样的选择器，它就会变得未定义)，但您不想假设您将拥有内容，您需要创建一个后备计划。