C# 如何在gridview中使用JQuery将标签更改为文本框单击复选框

我得到了一个gridview，其中每一行都显示复选框。单击复选框后，备用名称标签应更改为文本框，其中的内容保持不变

如果用户取消选中该复选框，文本框应再次恢复为标签

如何在Jquery中实现这一点

代码背后的代码如下所示：

<asp:GridView ID="GridView1" runat="server" OnRowUpdating="GridView1_RowUpdating" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:CheckBox ID="checkbox1" runat="server" OnClick="checkboxing()" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:CheckBox ID="checkbox1" runat="server" />
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="City Name Id">
                    <ItemTemplate>
                        <asp:Label ID="NameId" runat="server" Text='<%# Eval("Name_Id") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:Label ID="CityName" runat="server" Text='<%# Eval("name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Geo Name">
                    <ItemTemplate>
                        <asp:Label ID="GeoName" runat="server" Text='<%# Eval("geoname") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Ascii Name">
                    <ItemTemplate>
                        <asp:Label ID="AsciiName" runat="server" Text='<%# Eval("asciiname") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Alternate Names" SortExpression="AlternateNames">
                    <EditItemTemplate>
                        <asp:Label ID="AlternateNames" runat="server" Text='<%# Eval("alternateNames") %>'>
                        </asp:Label>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="AlternateNames" runat="server" Text='<%# Eval("alternateNames") %>'>
                        </asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Longitude">
                    <ItemTemplate>
                        <asp:Label ID="Longitude" runat="server" Text='<%# Eval("longitude") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Latitude">
                    <ItemTemplate>
                        <asp:Label ID="Latitude" runat="server" Text='<%# Eval("latitude") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

---

有两种方法可以实现它

1在每个复选框单击时动态创建元素 2创建标签和文本框，但根据复选框事件隐藏它们

因为您使用的是强类型视图，所以第二个视图应该是更好的选择

如果使用客户端输入元素，则可以基于click函数动态追加该元素

---

现在我建议使用第二种方法，而不是第一种方法，因为第二种方法将操作dom，在您的情况下，这不是必需的，因为第二种方法只会向元素添加一个隐藏类，它不太复杂，而且在性能方面也更好

名称应该是

input

，而不是

标签

，使用

类

每行项目，而不是

id

建议：从

输入：选中

查找

父行

并查找

名称

• 您可以将DOM从标签更改为输入字段
• 切换复选框后，可以启用/禁用
• 还可以将自定义样式设置为禁用的输入字段，就像设置标签一样

---

希望这个想法能有所帮助

试试下面的方法。我假设您正在尝试编辑最后一行，并且每行只有一个复选框

$(document).ready(function () {
        $("table input[type=checkbox]").on("change", function (event) {                
            var obj = $(event.target);
            var tr = $(obj).closest("tr");
            var td = $(tr).find("td:last");                
            if ($(obj).is(":checked")) {
                var data = $(td).find("span").html();
                $(td).html("<input id=none value=" + data + " />");

            }
            else {
                var data = $(td).find("input").val();
                $(td).html("<span >"+data+"</span>" );
            }

        });
    });

$（文档）.ready（函数（）{
$（“表输入[type=checkbox]”）。在（“更改”上，函数（事件）{
var obj=$（event.target）；
var tr=$（obj）.最近的（“tr”）；
var td=$（tr）.find（“td:last”）；
如果（$（obj）.is（“：checked”））{
var data=$（td.find（“span”）.html（）；
$（td）.html（“”）；
}
否则{
var data=$（td.find（“input”）.val（）；
$（td.html（“+data+”）；
}
});
});

尝试以下代码

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<script type="text/javascript">
    function toggleControl(chk)
    {
        var cell = $(chk).parent();
        var lbl = $(cell).siblings().find('#lblNames');
        var txtbx = $(cell).siblings().find('#txtNames');
        var str;

        if($(chk).is(':checked'))
        {
            str = $(lbl).text();
            $(lbl).hide();
            $(txtbx).val(str);
            $(txtbx).show();
        }
        else {
            $(lbl).show();
            $(txtbx).hide();
        }
    }
</script>

<asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server">
    <Columns>
        <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="checkbox1" runat="server" OnClick="toggleControl(this)" />
                </ItemTemplate>                   
            </asp:TemplateField>

        <asp:TemplateField  HeaderText="Alternate Names"> 
            <ItemTemplate>
               <asp:Label ID="lblNames"  ClientIDMode="Static" runat="server" Text='Hello World!'>
               </asp:Label>
               <input type="text" id="txtNames" style="display:none;" />                   
            </ItemTemplate>
 </asp:TemplateField>
    </Columns>
</asp:GridView>

功能切换控制（chk）
{
变量单元格=$（chk）.parent（）；
var lbl=$（cell.sillides（）.find（'#lblNames'）；
var txtbx=$（cell.sibbins（）.find（'#txtNames'）；
var-str；
如果（$（chk）.is（':checked'））
{
str=$（lbl.text（）；
$（lbl.hide（）；
$（txtbx）.val（str）；
$（txtbx.show（）；
}
否则{
$（lbl.show（）；
$（txtbx.hide（）；
}
}

Default.aspx.cs文件代码：
名称空间aspnetWeb
{
公共部分类\u默认值：第页
{
受保护的无效页面加载（对象发送方、事件参数e）
{
列表=新列表（）；
对于（int i=1；名称应为
input
而不是
label
，使用
class
每行项目而不是
id
。建议：从
input:选中
查找
父行
并查找
名称
请包含生成的html，而不是ASP。我可以帮助更多说明您需要标签和文本框，但当您单击复选框时，只需从前端jquery或其他客户端脚本隐藏标签并显示文本框是的，我执行并测试了它
Default.aspx.cs file codes:

    namespace aspnetWeb
    {
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            List<Student> list = new List<Student>();

            for(int i=1;i<=10;i++)
            list.Add(new Student { ID = 1, Count = 20 });

            GridView1.DataSource = list.AsQueryable();
            GridView1.DataBind();
        }
    }

    public class Student
    {
        public int ID { get; set; }

        public int Count { get; set; }
    }
   }