3

クリックすると親セルのIDを出力するテーブルがあります。複数のクリックされたセルを出力するようにこれを変更するにはどうすればよいですか。たとえば、現在、セルID「1」をクリックすると1が出力されます。セル「2」をクリックすると2が出力されます。セル1、2、および3をクリックした場合に、「1,2,3」を出力するようにするにはどうすればよいですか。HTML：

<table>
    <tr>
        <td class='test' id='1'><img src='images/Dog.gif'/></td>
        <td class='test' id='2'><img src='images/Cat.gif'/></td>
        <td class='test' id='3'><img src='images/Mouse.gif'/></td>
        <td class='test' id='4'><img src='images/Human.gif'/></td>
    </tr>
</table>
<div id='output'></div>

JS：

$(document).ready(function() { 
    $('td.test').click(function() { 
        $('#output').text(this.id);
    });
});

また、たとえばセル2をクリックして戻ると、リストから「2」が削除される方法はありますか。

4

3 に答える 3

1

配列を使用して、クリックされたアイテムを追跡します。

$(document).ready(function() { 
    var clicked = [];
    $('td.test').click(function() {
        var found = clicked.indexOf(this.id);

        // Remove
        if(found !== -1) {
            clicked.splice(found, 1);

        // Add
        } else {
            clicked.push(this.id);
        }
        $('#output').text(clicked.join(','));
    });
});

http://jsfiddle.net/mx2kj/

于 2013-02-20T14:48:07.573 に答える
1 
var ids = "";

$(".test").on("click", function () {

    $(this).data("selected", !$(this).data("selected"));

    var ids = $(".test").filter(function () {
       return $(this).data("selected") === true; 
    }).map(function () {
       return this.id; 
    }).get().join(",");

    alert(ids);

});

デモ： http： //jsfiddle.net/fY5tj/1

于 2013-02-20T14:49:15.780 に答える
0

クリックしたアイテムIDを次のように出力divに追加できます。

$('td.test').click(function() { 
 var currentText = $("#output").text();
 $("#output").text(currentText+this.id);
});
于 2013-02-20T14:48:28.137 に答える