Question

Here is my problem, I have a table which was created dynamically with Javascript, as a result I have something like this:

<table>
<tbody id="bodyDepartment">
            <tr><td class="Depa" style="width:30px;" align="center"><input id="Depa" name="Depa" type="checkbox" value="1" style="width:30px;"/> </td>
                <td>value 1.1</td>
                <td>value 1.2</td>
                <td>value 1.3</td>
            </tr>
            <tr><td class="Depa" style="width:30px;" align="center"><input id="Depa" name="Depa" type="checkbox" value="1" style="width:30px;"/> </td>
                <td>value 2.1</td>
                <td>value 2.2</td>
                <td>value 2.3</td>
            </tr>
</tbody>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

What I want is to get all the elements from all the rows selected, I was trying to use this code to get the elements with Javascript:

function Click(){
if ($("input:checkbox[name='Depa']:checked")) {
    var id, num, piso
    $("input:checkbox[name='Depa']:checked").parents("tr").each(function (index) {
      $("input:checkbox[name='Depa']:checked").parents("tr").children("td").each(function (index2) {
        switch (index2) {
        case 1:
            id = $(this).text();
            alert(id);
            break;
        case 2:
            num= $(this).text();
            alert(num);
            break;
        case 3:
            piso = $(this).text();
            alert(piso);
            break;

         }
      })
    })
}

​ }​

but I can only get “n” times the last element selected, where “n” is the amount of elements selected can someone please tell me what is wrong and how to fix it.

Here is the demo of my problem: http://jsfiddle.net/ZPxqJ/180/

Answer 1

Try:

function getDetails(){
    var checkboxes = $("input:checkbox[name='Depa']:checked");
    $(checkboxes).each(function(){
        var arr = $(this).closest('tr').find('td:not(.Depa)');
        $(arr).each(function(){
            console.log(this.innerHTML);
        });
    });
}