在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

問題在於您的點擊處理程序已綁定到EXISTING表。 您需要將其綁定到“任何”表。 在文檔准備功能中：

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

.container是任何不希望被破壞的容器包裝元素。 使它成為最接近的祖先。 如果沒有可用的候選人，那么您可以使用body ，但是如果可以的話，我會避免走高。

如果需要，當然可以將td選擇器修改為更具體。 如果您有應該存在此行為的表類型，請忽略ID，並為該類型的表提供一個類。 然后， td才變成.someClass td 。

您可能還想清理LefCellText，然后再嘗試使用它。 聲明變量的方式很好（如果沒有這樣的選擇器，它將變為未定義），但是您不想假設自己將擁有內容，則需要創建一個后備計划。