使用Jquery在Gridview中设置Textbox的值答案

【问题标题】：Set the value of Textbox in Gridview using Jquery使用Jquery在Gridview中设置Textbox的值
【发布时间】：2012-04-19 12:16:17
【问题描述】：

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

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>

【问题讨论】：

看来您的问题可能是您的 Caps Lock 已打开
tL;dr（太吵了，没看）
是什么创建了模态弹出窗口？
@Caleb Doucet 抱歉，模态弹出窗口是由下面的代码函数 ShowDialog(modal) { $("#overlay").show(); $("#dialog").fadeIn(300); if (modal) { $("#overlay").unbind("click"); } else { $("#overlay").click(function (e) { HideDialog(); }); } }
你在哪里绑定了调用ShowDialog()函数的事件

标签： jquery asp.net gridview webforms

【解决方案1】：

你可以在你的链接点击方法中添加一些东西，为文本框提供一个特定的类，你以后可以定位它，这样你就只定位一个：

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

您应该在您的网格视图中向<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");
}

希望这对您有所帮助，并且是您正在寻找的。p>

【讨论】：

你拯救了我的一天@Caleb Doucet....过去两天一直在尝试这样做。非常感谢：）
@Prince 没问题，我很高兴能帮上忙 :)
你能提供一个使用Jquery实现自动完成的例子
试试看 jquery ui http://jqueryui.com/demos/autocomplete/

【解决方案2】：

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

我在我的应用程序中使用了以下代码。效果很好..

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

【讨论】：