Question

I have an asp.net gridview which is output as a table in HTML. There’s a series if <input> checkboxes that tell me if the user wants to export the data into excel.

When a checkbox is checked I want to pull the corresponding rows ID from the table. I don’t want to go back to the server because the data is right there and the new data could be out of sync. I also do not want to persist with State for the same reasons MS didnt do it in the first place.

How can I gather the checked row ID’s with jQuery?

Example (where Export is a checkbox)

Export ID
[ true ] 1
[ false ] 2

[ true ] 3

So, the jquery result should be [1,3]. Then I can take this result and use $.get to obtain the results.

---

Sample HTML

            <div style="">
                <div>
    <table class="cssTable" cellspacing="1" GroupIndent="15px" AllowColMoving="True" AllowGrouping="True" AllowColSizing="True" border="0" id="_ctl0_ContentPlaceHolder1_cwgBatch">
        <tr class="headTableRow">
            <th scope="col">Export</th><th scope="col">&nbsp;</th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$ContentPlaceHolder1$cwgBatch&#39;,&#39;Sort$batchID&#39;)">ID</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$ContentPlaceHolder1$cwgBatch&#39;,&#39;Sort$DueDate&#39;)">Due</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$ContentPlaceHolder1$cwgBatch&#39;,&#39;Sort$repName&#39;)">Rep</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$ContentPlaceHolder1$cwgBatch&#39;,&#39;Sort$area&#39;)">Area</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$ContentPlaceHolder1$cwgBatch&#39;,&#39;Sort$Region&#39;)">Region</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$ContentPlaceHolder1$cwgBatch&#39;,&#39;Sort$territory&#39;)">AreaRegion</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$ContentPlaceHolder1$cwgBatch&#39;,&#39;Sort$batchDate&#39;)">Started</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$ContentPlaceHolder1$cwgBatch&#39;,&#39;Sort$Submitted&#39;)">Submitted</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$ContentPlaceHolder1$cwgBatch&#39;,&#39;Sort$Acknowledged&#39;)">col10</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$ContentPlaceHolder1$cwgBatch&#39;,&#39;Sort$Rejected&#39;)">col11</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$ContentPlaceHolder1$cwgBatch&#39;,&#39;Sort$Approved&#39;)">col12</a></th>
        </tr><tr>
            <td>
                            <span class="enabledExport"><input id="_ctl0_ContentPlaceHolder1_cwgBatch__ctl2_exportCb" type="checkbox" name="_ctl0:ContentPlaceHolder1:cwgBatch:_ctl2:exportCb" /></span>        
                        </td><td><a href=Page.aspx?batchID=1>View</a></td><td>1</td><td>20115 </td><td nowrap="nowrap">
            A Dood</td><td>51</td><td>R1</td><td>51R1</td><td>5/17/2011 00:03:08 PM</td><td>5/24/2011 12:47:21 AM</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        </tr><tr class="oddTableRow">
            <td>
                            <span class="enabledExport"><input id="_ctl0_ContentPlaceHolder1_cwgBatch__ctl3_exportCb" type="checkbox" name="_ctl0:ContentPlaceHolder1:cwgBatch:_ctl3:exportCb" /></span>        
                        </td><td><a href=Page.aspx?batchID=2>View</a></td><td>
            2</td><td>20115 </td><td nowrap="nowrap">
            Some Girl</td><td>B9</td><td>R2</td><td>B9R2</td><td>5/18/2011 00:31:15 PM</td><td>5/19/2011 
            12:21:18 AM</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        </tr><tr>
            <td>
                            <span class="enabledExport"><input id="_ctl0_ContentPlaceHolder1_cwgBatch__ctl4_exportCb" type="checkbox" name="_ctl0:ContentPlaceHolder1:cwgBatch:_ctl4:exportCb" /></span>        
                        </td><td><a href=Page.aspx?batchID=3>View</a></td><td>
            3</td><td>20115 </td><td nowrap="nowrap">Bart Simpson</td><td>
            B8</td><td>R1</td><td>B8R1</td><td>5/10/2011 00:47:12 PM</td><td>5/11/2011 12:26:51 AM</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        </tr><tr class="oddTableRow">
            <td>
                            <span class="enabledExport"><input id="_ctl0_ContentPlaceHolder1_cwgBatch__ctl5_exportCb" type="checkbox" name="_ctl0:ContentPlaceHolder1:cwgBatch:_ctl5:exportCb" /></span>        
                        </td><td><a href=Page.aspx?batchID=4>View</a></td><td>
            4</td><td>20115 </td><td nowrap="nowrap">Somebody Name</td><td>5</td><td>
            R5</td><td>5R5</td><td>5/19/2011 00:46:53 AM</td><td>5/19/2011 12:48:54 AM</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
        </tr>
    </table>
</div>                
            </div>

Answer 1

I can give you a basic idea w/o the HTML snippet. But if you provided the HTML then you’d get the exact code you needed… anyhow, you’d do it something like this:

    //3 lines of code is all you need    
    //EDIT - changed siblings -> children()  & moved the tranversing inside map
    var arrayOfIds = $('input:checked').closest('tr').children('td:nth-child(3)').map(function() {
        return $.trim($(this).text());
    }).get();

Here’s the breakdown…

//all the rows that have a checked input
var rows = $(':input:checked').closest('tr');

//now we select the cells that contain the ID (in your example its the 3rd cell)
var cells = rows.children('td:nth-child(3)');

//then we iterate over each cell
var $data = cells .map(function() {
      //returning the text of each cell (per your example)
      return $.trim($(this).text());
    });

//retrieve the raw array (containing all your IDs)
var data = $data.get();

Easy way to test if it is correct ->

//alerts all your IDs that were selected
alert(data.join(','));