Question

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

//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次打印所以上。

为什么会这样？

Answer 1

您需要使用事件委派

更改

$('.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>

<强>更新

您的结尾标记不正确，结构有很多语法错误。同时删除从function n()调用的onclick=n()，因为您已经在javascript中绑定了该事件。您的代码应如下所示

<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>');

jquery函数无法正常运行动态创建的复选框

1 个答案: