Question

我有一个表，它会在单击时输出父单元格的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'。

Answer 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/

Answer 2

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

Answer 3

您可以在输出div中附加您点击的项ID，如下所示：

$('td.test').click(function() { 
 var currentText = $("#output").text();
 $("#output").text(currentText+this.id);
});

将父单元格ID存储在列表中

3 个答案: