CODEWITHSUNDEEP
javascriptjquery
redGREENblue
redGREENblue

Reputation: 3126

Select elements in each child tables one by one

I have the following html which is basically a parent table with some child tables inside it, 

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

What I need to do is access all checkboxes of the nested table, for each table. That is get the checkboxes inside the first nested table, perform some operations with it, move to the next nested table do the same with the checkboxes inside it.

I can access individual tables like below with their id, 

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

});

This works, but the tables are auto generated from db and the id is not known beforehand, also, the number of tables may vary, so I have no option other than selecting the parent table and then look for every child tables inside it one by one ... I have tried this ...

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

});

But it doesn't work... How do I go about this? Thanks.

Upvotes: 0

Views: 75

Answers (4)

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

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

NOTE :- I m not using id selector here because questioner mentioned that he doesn't know id's beforehand.

Working Demo

Working Demo

Upvotes: 1

RichieAHB
RichieAHB

Reputation: 2088

Just use:

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

This will select all checkboxes that are a child of a table.

EDIT if you need to group just find the id of the closest parent table and use that as an index for an object. You end up with one large object with all the id's as properties, while using only one each loop.

Upvotes: 1

laruiss
laruiss

Reputation: 3816

I would do something like this:

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

Upvotes: 1

Alnitak
Alnitak

Reputation: 339816

Your final code block looks acceptable, except that you haven't prevented the table selector from also selecting the outer table. As written, this would cause each set of checkboxes to be considered twice - once as part of its own table and again (actually first) as descendants of the outer table.

Try a more specific selector:

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

Upvotes: 1

Related Questions