2

获取复选框选择的表格单元格值

//function to get table cells values    
function n() {
  $('.m').on('click',function() {
    var id = $(this).closest("tr").find(".t").text();
    var p= $(this).closest("tr").find(".t1").text();
    $('#c').append('<span>', id, '</span>');
  });
} 
for(int i=0;i<10;i++) {
  div.innerHTML="<table><tr><td><input type='checkbox' class='m' onclick=n()></td><td class='m'>data</td><td class='t1'>data</td></tr></table>";
}
//appending values on checkbox selection
<div id='c'></div>

虽然复选框在上面的示例中选择了在函数 n() 中获取表行的值，但值附加在 中div#c，例如在第一个复选框单击 2 次时，在第二次单击时打印 3 次，依此类推。

为什么会发生这种情况？

4

1 回答 1

5

您需要使用事件委托

改变

$('.m').on('click',function()

至

$(document).on('click', '.m', function()

使用内联事件是一种不好的做法。您始终可以选择在 javascript 中附加事件。

此外，您绑定事件的方式会为表中的每个复选框多次绑定事件。这是因为，每当您单击复选框时，都会调用function n(). 这将选择所有元素class="m"并在其上附加事件。

您应该处理的方式是将this上下文传递给函数并从函数内部完全删除事件处理签名。

您的代码应如下所示。

$(document).on('click', '.m',function() {
    var id = $(this).closest("tr").find(".t").text();
    var p= $(this).closest("tr").find(".t1").text();
    $('#c').append('<span>', id, '</span>');
  });

for(int i=0;i<10;i++) {
  div.innerHTML="<table><tr><td><input type='checkbox' class='m'></td>"
                + "<td class='m'>data</td><td class='t1'>data</td></tr></table>";
}
//appending values on checkbox selection
<div id='c'></div>

更新

您的结束标签不正确，并且结构有许多语法错误。由于您已经在javascript中绑定了事件，因此还要删除function n()调用的内容。onclick=n()您的代码应如下所示

<style>
    .c:hover { color:red; };
    .li { };
</style>

<script>
    // document Ready handler
    $(function () {
        // Click event for elements with class m 
        $(document).on('click', '.m', function () {
            var id = $(this).closest("tr").find(".t").text();
            var p = $(this).closest("tr").find(".t1").text();
            $('#c').append('<li class="li">id<span class ="c">X</span></li >');
        });
        // Click events for elemenst with class c
        $(document).on('click', '.c ', function () {
            $(this).closest("li").remove() alert("ok");
        });
    }); 
</script>

这条线

$('#c').append('<li class="li">id<span class ="c">X</span></li >');

应该是

$('#c').append('<li class="li">'+ id + '<span class ="c">X</span></li >');

和

$('#cart1').append('<span id=li1>',id,+p,+q ,"Amount="+p*q,'<span class=close>X</span></span>','</br>');

应该是

$('#cart1').append('<span id="li1">' + id + p + q + 'Amount=' + (p * q) + '<span class=close>X</span></span></br>');
于 2013-07-29T07:29:59.673 回答