Question

我有一个网格视图grdtest。我想使用JQuery从锚点击中出现的模态对话框更新gride中的文本框。我添加了代码，但模态对话框更新了网格中的所有文本框。如何仅更新与锚点在同一行中的文本框？

html代码是

<div id="output">
<asp:GridView ID="grdtest" CssClass="grid" Width="20%" AutoGenerateColumns="false" runat="server"
 DataKeyNames="ID" OnRowCreated="grdtest_RowCreated" OnRowCommand="grdtest_RowCommand">
<Columns>
<asp:BoundField DataField="ID" Visible="false" />
<asp:BoundField HeaderText="NAME"  DataField="NAME" ItemStyle-Width="5%"/>
<asp:TemplateField HeaderText="MONTH" ItemStyle-Width="5%">
<ItemTemplate>
<asp:TextBox ID="txtsubject" runat="server" Wrap="true"></asp:TextBox>
</ItemTemplate></asp:TemplateField>
<asp:TemplateField ItemStyle-Width="2%">
<ItemTemplate><a href="#" >Month</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>

<div id="overlay" class="web_dialog_overlay"></div>

<div id="dialog" class="web_dialog">
    <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
        <tr>
            <td class="web_dialog_title">Month Chooser</td>
            <td class="web_dialog_title align_right">
                <a href="#" id="btnClose">Close</a>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" style="padding-left: 15px;">
                <b>Choose the months from the list </b>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" style="padding-left: 15px;">
                <div id="months">
                    <input id="month1" name="month" type="checkbox" value="Jan" />January
                    <input id="month2" name="month" type="checkbox" value="Feb" />February
                    <input id="month3" name="month" type="checkbox" value="Mar" />March
                    <input id="month4" name="month" type="checkbox" value="Apr" />April
                    <input id="month5" name="month" type="checkbox" value="May" />May
                </div>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <input id="btnSubmit" type="button" value="Submit" />
            </td>
        </tr>
    </table>
</div>
</form>
</body>

js代码是

<script type="text/javascript">

    $(document).ready(function ()
    {
        $("#btnClose").click(function (e)
        {
            HideDialog();
            e.preventDefault();
        });


        $('#btnSubmit').click(function(e)
        {
            var sub = [];
            $(':checkbox:checked').each(function(i){
            sub[i] = $(this).val();
            });
            $("#grdtest").find("input[type=text][id*=txtsubject]").val(sub);
            HideDialog();
            e.preventDefault();
        });

    });

    function ShowDialog(modal)
    {
        $("#overlay").show();
        $("#dialog").fadeIn(300);

        if (modal)
        {
            $("#overlay").unbind("click");
        }
        else
        {
            $("#overlay").click(function (e)
            {
                HideDialog();
            });
        }
    }

    function HideDialog()
    {
        $("#overlay").hide();
        $("#dialog").fadeOut(300);
    } 

</script>

Answer 1

您可以在链接点击方法中添加一些内容，该方法为文本框提供了一个特定的类，您可以稍后将其定位，因此您只能将其定位为：

$(".openModalLink").click(function(){
    $(this).parent().parent()
        .find("input[type=text][id*=txtsubject]").addClass("ChangeMe");
    ShowDialog();
}

您应该在gridview中的<a href="#" class="your class name">Month</a>添加一个类。就我而言，它将是openModalLink。然后你的提交功能如下：

    $('#btnSubmit').click(function(e)
    {
        var sub = [];
        $(':checkbox:checked').each(function(i){
        sub[i] = $(this).val();
        });
        $("#grdtest").find(".ChangeMe").val(sub);
        HideDialog();
        e.preventDefault();
    });

在您的HideDialog中删除所有文本框中的特定类。

function HideDialog()
{
    $("#overlay").hide();
    $("#dialog").fadeOut(300);
    $("#grdtest").find("input[type=text][id*=txtsubject]").removeClass("ChangeMe");
}

希望这会有所帮助，而且正是您所寻找的。

Answer 2

您需要先获取文本框的索引。然后使用索引更新值。

我已将以下代码用于我的应用程序。效果很好..

$('[id*=txtBindSplitPercent]').change(function () {
            var value = $(this).val();
            index = $(this).closest('tr').index();
            if (value.trim() != '') {
                $(this).val(100);
            }
        });

使用Jquery在Gridview中设置Textbox的值

2 个答案: