Question

我有以下html，它基本上是一个父表，里面有一些子表，

<table id="roottable" class="tablemain" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td></td>
            <td>
                <table class="intable" align="center" border="0">
                    <tbody>
                        <tr>
                            <td class="chn" colspan="2" align="center">
                                <div>
                                    <div class="mparent">
                                        <div class="checkbox">
                                            <input type="checkbox" id="ch243" name="ch243" value="243">
                                            <label for="ch243"></label>
                                        </div>
                                        <div class="chtext">Category</div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Param two</td>
                                <td>
                                    <div class="checkbox">
                                        <input type="checkbox" id="ch244" name="ch244" value="244">
                                        <label for="ch244"></label>
                                    </div>
                                </td>
                        </tr>
                    </tbody>
                </table>
                ......
                ......
                <table class="intable" align="center" border="0">
                ......
                ......

我需要做的是访问每个表的嵌套表的所有复选框。这是获取第一个嵌套表中的复选框，使用它执行一些操作，移动到下一个嵌套表，使用其中的复选框执行相同操作。

我可以使用他们的ID

访问下面的各个表格

 $('#tableid').find('input[type="checkbox"]').each(function () {

});

这是有效的，但这些表是从db自动生成的，并且事先不知道id，而且，表的数量可能会有所不同，所以我除了选择父表之外别无选择，然后查找里面的每个子表它一个接一个......我试过这个......

$('table').each(function(){
 $(this).find('input[type="checkbox"]').each(function () {
    // DO STUFFS WITH CHECKBOXES

});

但它不起作用......我该如何解决这个问题？感谢。

Answer 1

只需使用：

var tableInputs = {};
$('#roottable input[type="checkbox"]').each(function () {
    var id = $(this).closest('table').attr('id');
    var name = $(this).attr('name');
    tableInputs[id] = {};
    tableInputs[id][name] = $(this).val();
});

这将选择作为表的子项的所有复选框。

编辑如果您需要分组，只需查找最近的父表的ID，并将其用作对象的索引。最终得到一个大对象，其中所有id都是属性，而每个循环只使用一个。

Answer 2

$('table tr td').each(function(){  // this line is for main outer table
  $(this).children('table').each(function () {  //this will iterate all the child table
    $(this).find('input:checkbox').each(function(){  //this will find checkbox inside each table
       //Your Stuff
    });
  });
});

注意： - 我这里没有使用id选择器，因为提问者提到他事先并不知道id。

Working Demo

Answer 3

您的最终代码块看起来可以接受，但您没有阻止table选择器也选择外部表。如上所述，这将导致每组复选框被认为是两次 - 一次作为其自己的表的一部分，再次（实际上是第一次）作为外部表的后代。

尝试更具体的选择器：

$('#roottable .intable').each(...)

Answer 4

我会做这样的事情：

$('#roottable').find('.intable').each(function(index, elt) {
  // operate now on each "child table"
  var $childTable = $(elt);
  $childTable.find('input[type="checkbox"]').each(function(i, cb){
    // Do your stuff with the checkoxes of the current ".intable" table
  });
});

逐个选择每个子表中的元素

4 个答案: