jQuery - 有效地从 asp.net gridview 获取数据

Question

我有一个 asp.net gridview，它以 HTML 形式输出为表格。有一个系列 if <input>复选框告诉我用户是否要将数据导出到 Excel 中。

选中复选框后，我想从表中提取相应的行 ID。我不想返回服务器，因为数据就在那里，而新数据可能不同步。我也不想坚持使用 State，原因与 MS 最初没有这样做的原因相同。

如何使用 jQuery 收集选中的行 ID？

示例(其中“导出”是一个复选框)

导出 ID
[ 正确 ] 1
[假]2
[ 正确 ] 3

所以，jquery 结果应该是[1,3]。然后我可以使用这个结果并使用 $.get 来获取结果。

---

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

我可以给你一个基本的想法，无需 HTML 片段。但是，如果您提供了 HTML，那么您将获得所需的确切代码...无论如何，您都会这样做:

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

这是分割...

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

测试是否正确的简单方法 ->

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