Issue on Getting Selected Row Values From Table with Checkbox

Question

Can you please take a look at above demo and let me know why I am not able to get the values of selected (checked) rows from the table? I have a code like this:

$("#btn").on("click", function () {
    var checkedRows = [];
    $("#tbody tr").each(function () {

        if ($(this).find("input").is(":checked")) {
            checkedRows.push($(this).find("td:eq(1)").html());
        }
        // console.log(checkedRows);    
    });

        var result = [];

    $.each($("td:eq()"), function (idx, item) {
        if (checkedRows.indexOf(idx> -1)){ result.push(item);}
    });

    if (result.length < 2) {
        alert("Please Select 2 to 4 Models");
    }
    if (result.length > 4) {
        alert("Please Select 2 to 4 Models");
    } else {
        console.log(result);
    }
    });

and HTML as:

<table border="1" width="100%">
        <thead>
                <tr>
                    <td><input type='checkbox' /></td>
                        <td>Row 1, cell 2</td>
                        <td>Row 2, cell 3</td>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td><input type='checkbox' /></td>
                        <td>Row 2, cell 2</td>
                        <td>Row 2, cell 3</td>
                </tr>
                <tr>
                        <td><input type='checkbox' /></td>
                        <td>Row 3, cell 2</td>
                        <td>Row 3, cell 3</td>
                </tr>
                <tr>
                        <td><input type='checkbox' /></td>
                        <td>Row 4, cell 2</td>
                        <td>Row 4, cell 3</td>
                     <tr>
                        <td><input type='checkbox' /></td>
                        <td>Row 4, cell 2</td>
                        <td>Row 4, cell 3</td>
                </tr>
                </tr>
        </tbody>
</table>
<input id="btn" type="button" label="button" value="get rows" />

Thanks,

Update

result = [
           [' Row 1, cell 2 ' , ' Row 2, cell 3 '],
           [' Row 2, cell 2 ' , ' Row 2, cell 3 '],
           [' Row 1, cell 2 ' , ' Row 2, cell 3 ']
        ]

What's your goal here $.each($("td:eq()"), function (idx, item) { if (checkedRows.indexOf(idx> -1)){ result.push(item);} });? — PeterKA
– PeterKA, Commented Nov 13, 2014 at 3:33
To be honest I got lost. Technicality what I want to do is generating Array of each selected row and pushing them in result arry — Suffii
– Suffii, Commented Nov 13, 2014 at 4:01

PeterKA · Accepted Answer · 2014-11-13 05:01:39Z

3

Getting the second column html of all the checked rows is quite straight forward; .map() makes it really easy:

    $('#btn').on('click', function() {
        var checkedRows = $(':checkbox:checked')
        .closest('tr').find('td:eq(1)').map(function() { 
            return $(this).html(); 
         }).get();
         console.log( checkedRows );
    });

    $('#btn').on('click', function() {
        var checkedRows = $(':checkbox:checked')
        .closest('tr').find('td:eq(1)').map(function() { 
            return $(this).html(); 
         }).get();
        
        //Output --- just for demo
        $('pre.out').text( JSON.stringify( checkedRows ) );
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" width="100%">
        <thead>
                <tr>
                    <td><input type='checkbox' /></td>
                        <td>Row 1, cell 2</td>
                        <td>Row 2, cell 3</td>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td><input type='checkbox' /></td>
                        <td>Row 2, cell 2</td>
                        <td>Row 2, cell 3</td>
                </tr>
                <tr>
                        <td><input type='checkbox' /></td>
                        <td>Row 3, cell 2</td>
                        <td>Row 3, cell 3</td>
                </tr>
                <tr>
                        <td><input type='checkbox' /></td>
                        <td>Row 4, cell 2</td>
                        <td>Row 4, cell 3</td>
                     <tr>
                        <td><input type='checkbox' /></td>
                        <td>Row 4, cell 2</td>
                        <td>Row 4, cell 3</td>
                </tr>
                </tr>
        </tbody>
</table>
<input id="btn" type="button" label="button" value="get rows" />

<pre class="out"></pre>

UPDATE

To generate an array of array as indicated in the your comments under this question, here is the code:

$('#btn').on('click', function() {
    var checkedRows = [];
    $(':checkbox:checked').closest('tr').each(function() {
        checkedRows.push(
          $(this).find('td:gt(0)').map(function() {
              return $(this).html();
          }).get()
        ); 
     });

    console.log( checkedRows );
});

    $('#btn').on('click', function() {
        var checkedRows = [];
        $(':checkbox:checked').closest('tr').each(function() {
            checkedRows.push(
              $(this).find('td:gt(0)').map(function() {
                  return $(this).html();
              }).get()
            ); 
         });
        
        //Output --- just for demo
        $('pre.out').text( JSON.stringify( checkedRows ) );
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" width="100%">
        <thead>
                <tr>
                    <td><input type='checkbox' /></td>
                        <td>Row 1, cell 2</td>
                        <td>Row 2, cell 3</td>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td><input type='checkbox' /></td>
                        <td>Row 2, cell 2</td>
                        <td>Row 2, cell 3</td>
                </tr>
                <tr>
                        <td><input type='checkbox' /></td>
                        <td>Row 3, cell 2</td>
                        <td>Row 3, cell 3</td>
                </tr>
                <tr>
                        <td><input type='checkbox' /></td>
                        <td>Row 4, cell 2</td>
                        <td>Row 4, cell 3</td>
                     <tr>
                        <td><input type='checkbox' /></td>
                        <td>Row 4, cell 2</td>
                        <td>Row 4, cell 3</td>
                </tr>
                </tr>
        </tbody>
</table>
<input id="btn" type="button" label="button" value="get rows" />

<pre class="out"></pre>

OUTPUT: -- with all checkboxes selected.

[
    ["Row 1, cell 2","Row 2, cell 3"],
    ["Row 2, cell 2","Row 2, cell 3"],
    ["Row 3, cell 2","Row 3, cell 3"],
    ["Row 4, cell 2","Row 4, cell 3"],
    ["Row 4, cell 2","Row 4, cell 3"]
]

edited Nov 13, 2014 at 5:01

answered Nov 13, 2014 at 3:31

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Suffii Over a year ago

Hi Peter and thanks for what you have done but what I need is loading selected values in an array of array like

result = [               [' Row 1, cell 2 ' , ' Row 2, cell 3 '],               [' Row 2, cell 2 ' , ' Row 2, cell 3 '],              .....               [' Row 1, cell 2 ' , ' Row 2, cell 3 '],           ]

Suffii Over a year ago

Can you please let me know how to do that?

Suffii Over a year ago

I am sorry it seems like I cant explain what I need! can you please take a look at update?

Suffii Over a year ago

What I need to get at end is a array like hard coded array at the update

PeterKA Over a year ago

And how does that differ from the output from my updated demo?

|

MH2K9 · Accepted Answer · 2014-11-13 02:42:19Z

1

$("#tbody tr") should be $("tbody tr") because tbody is not an ID. Also suggest you to add input type in if condition (input[type=checkbox]).

$("#btn").on("click", function () {
    var checkedRows = [];
    $("tbody tr").each(function () {
        if ($(this).find("input[type=checkbox]").is(":checked")) {
            checkedRows.push($(this).find("td:eq(1)").html());
        }
    });
    console.log(checkedRows);
    //......
});

answered Nov 13, 2014 at 2:42

MH2K9

12.1k7 gold badges34 silver badges49 bronze badges

Collectives™ on Stack Overflow

Issue on Getting Selected Row Values From Table with Checkbox

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related