2

aspx ページに gridview があり、gridivew には多くの行と 3 列があるとします。列は

選択 - チェックボックス、名 - テキストボックス、姓 - テキストボックスなど

jqueryでグリッドビューをループし、チェックボックスが選択されている行からテキストボックスの値を読み取りたいです。

グリッドビューは次のようになります

<asp:GridView
    id="GridView1"
    DataSourceID="srcMovies"
    DataKeyNames="Id"
    Runat="server" AutoGenerateColumns="false">


<asp:TemplateField>
    <ItemTemplate>
    <asp:Label ID="lblslno" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
    <ItemTemplate>
    <asp:TextBox ID="txtFName" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
    <ItemTemplate>
    <asp:TextBox ID="txtLName" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

</Columns>
</asp:GridView>

チェックボックスが選択されている場合、各行からテキストボックスの値を読み取るjqueryコードを取得しました...コードは次のとおりです

 <script type="text/javascript">
 $(document).ready(function () {
     var sum = 0;
     $('#btn1').click(function () {
         $('#tr').each(function () {
             if ($(this).find('input:checkbox').attr("checked"))
                 sum += parseInt($(this).find('input:text').attr("value"));
         });
         window.alert(sum.toString());
     });
 });
</script>

私の懸念は、txtFName および txtLName テキストボックスからデータを読み取り、各行に lblslno というラベルを付ける方法です。誰でも正しいコードに向かって運転できます。ありがとう

私は良い解決策を得ました....ここにあります

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    var jsonData = new Array();
    $(".getJSON").click(function() {
        $.map($("table[id*=gvPurchaseOrderDetails] tr"), function(item, index) {
            if ($(item).find("input[type=text]").length>0) {
                jsonData[index] = new Object();
                jsonData[index].employeeid = $(item).find("input[type=text][id*=employeeid]").val();
                jsonData[index].employeename = $(item).find("input[type=text][id*=employeename]").val();
                jsonData[index].sex = $(item).find("select[id*=sex]").val();
                jsonData[index].graduate = $(item).find("input[type=checkbox][id*=graduate]").attr("checked");
            }
        });

        var jsonStringData = JSON.stringify(jsonData);
    });
});


<asp:GridView ID="gvPurchaseOrderDetails" runat="server"
    AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="employeeid">
            <ItemTemplate>
                <asp:TextBox ID="employeeid" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="employeename">
            <ItemTemplate>
                <asp:TextBox ID="employeename" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
       <asp:TemplateField HeaderText="sex">
            <ItemTemplate>
                <asp:DropDownList ID="sex" runat="server" ><asp:ListItem>Male</asp:ListItem><asp:ListItem>Female</asp:ListItem></asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Is Graduate">
            <ItemTemplate>
                <asp:CheckBox ID="graduate" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<a class="getJSON" href="#">get json data</a>
4

1 に答える 1

1

GridViewは、テキストボックスのIDをマングルします。最も簡単な方法は、cssクラスをテキストボックスに追加し、それを使用してそれらを見つけることです。

<asp:TemplateField>
    <ItemTemplate>
        <asp:TextBox ID="txtFName" CssClass="FName" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
    <ItemTemplate>
        <asp:TextBox ID="txtLName" CssClass="LName" runat="server" />    
    </ItemTemplate>
</asp:TemplateField>

編集：コメントで示唆されているように、それらはクラスセレクターを使用して見つけることができます：

$(this).find('.LName').val()
于 2012-06-06T13:53:34.507 に答える