0

クリックされたテーブル セルのテキストを取得する際に問題が発生しました。イベントを発生させる唯一の方法は、「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);
    });
});
4

1 に答える 1

3

問題は、クリック ハンドラーが EXISTING テーブルにバインドされていることです。「任意の」テーブルにバインドする必要があります。ドキュメント準備完了機能:

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

.container破棄されることが想定されていないコンテナー ラッパー要素はどこにありますか。これをできるだけ近い祖先にします。候補がない場合は を使用できますがbody、可能であれば、これほど高くすることは避けたいと思います。

もちろん、tdセレクターは必要に応じてより具体的に変更できます。この動作が必要なタイプのテーブルがある場合は、ID のことは忘れて、そのタイプのテーブルにクラスを指定してください。次に、tdちょうど.someClass td代わりになります。

おそらく、使用する前に LefCellText が存在することをサニタイズすることもできます。変数をそのまま宣言しても問題ありませんが (そのようなセレクターがない場合は未定義になるだけです)、コンテンツがあると仮定したくない場合は、フォールバック計画を作成する必要があります。

于 2012-04-29T00:31:21.800 に答える