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

时间:2012-04-29 00:26:10

标签: javascript jquery

我一直在检索单击的表格单元格的文本时遇到了一些问题,我唯一能够触发该事件的方法就是用“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);
    });
});

1 个答案:

答案 0 :(得分:3)

问题是您的点击处理程序绑定到EXISTING表。您需要将其绑定到“任何”表。在文档就绪功能中:

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

其中.container是任何预期不会被销毁的容器包装元素。使这成为最接近的祖先。如果没有候选人可用,那么你可以使用body,但如果可以,我会避免这么高。

如果需要,td选择器当然可以修改为更具体。如果您有一种表格应该存在此行为,请忘记ID并为该类型的表提供类。然后,td只会变为.someClass td

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