Выберите элементы в каждых дочерних таблицах один на один

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"> 
       ...... 
       ......  

Что мне нужно сделать, это получить доступ ко всему флажок вложенной таблицы , для каждой таблицы. То есть установите флажки внутри первой вложенной таблицы, выполните некоторые операции с ней, перейдите к следующей вложенной таблице, сделайте то же самое с флажками внутри нее.

я могу получить доступ к отдельным таблицам, как ниже их идентификатору,

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

}); 

Это работает, но таблицы автоматически генерируется из БД и идентификатор не известен заранее, кроме того, количество таблиц может изменяться, поэтому у меня нет другого выбора, кроме выбора родительской таблицы, а затем искать для каждого ребенка таблиц внутри него один за другим ... Я попытался это ...

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

}); 

Но это не работает ... Как я иду об этом? Благодарю.

Answer 1

$('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 
    }); 
    }); 
}); 

ПРИМЕЧАНИЯ: - Я не использую селектор здесь, потому что спрашивающие отметил, что он не знает идентификаторы заранее.

Working Demo

Working Demo

Answer 2

Просто используйте:

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(); 
}); 

Это позволит выбрать все флажки, которые ребенок за столом.

EDIT Если вам нужно группировать, просто найдите идентификатор ближайшей родительской таблицы и используйте это как индекс для объекта. Вы получаете один большой объект со всеми свойствами id, используя только один цикл.

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