点击按钮动态添加新的一行(添加文本框)

类似的论坛上发表投票主题:

 ※ <wbr>点击按钮动态添加新的一行(添加文本框)

 

<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:DataList ID="DataList1" runat="server" Width="100%" BorderWidth="1" ondeletecommand="MinusItemList_DeleteCommand">
        <ItemTemplate>
            <asp:TextBox ID="TextBox1" runat="server" Text='<%#("OptionName")%>'></asp:TextBox>
            <asp:Button ID="Button1" runat="server" CommandName="delete" Text="删除" />
        </ItemTemplate>
    </asp:DataList>
    <asp:Button ID="Button2" runat="server" οnclick="Button2_Click" Text="添加项" />
    <asp:Button ID="Button3" runat="server" Text="保存" οnclick="Button3_Click" />
    <asp:Literal ID="Literal1" runat="server"></asp:Literal>
    </form>
</body>

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace WebCommonLib.DataList
{
    public partial class Demo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable table = new DataTable();
                table.Columns.Add("OptionName", typeof(string));
                for (int i = 0; i < 5; i++)
                {
                    DataRow row = table.NewRow();
                    row["OptionName"] = string.Empty;
                    table.Rows.Add(row);
                }

                ViewState["table"] = table;
                DataList1.DataSource = table;
                DataList1.DataBind();
            }
        }

        protected void MinusItemList_DeleteCommand(object source, DataListCommandEventArgs e)
        {  
            foreach (DataListItem item in DataList1.Items)
            {
                Table.Rows[item.ItemIndex]["OptionName"] = (item.Controls[1] as TextBox).Text;
            }

            Table.Rows.RemoveAt(e.Item.ItemIndex);
            DataList1.DataSource = Table;
            DataList1.DataBind();
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            DataRow row = Table.NewRow();
            Table.Rows.Add(row);
            DataList1.DataSource = Table;
            DataList1.DataBind();
        }
       
        private DataTable Table {
            get {
                if (ViewState["table"] != null)
                    return (DataTable)ViewState["table"];
                return null;
            }
        }

        protected void Button3_Click(object sender, EventArgs e)
        {
            foreach (DataListItem item in DataList1.Items)
            {
                Literal1.Text += (item.Controls[1] as TextBox).Text;
            }
        }
    }
}

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以通过JavaScript代码实现在HTML表格中点击按钮添加一行,并在行中插入下拉菜单。 首先,在HTML表格中创建一个按钮,用于添加行: ```html <button onclick="addRow()">Add Row</button> ``` 然后,在JavaScript中编写一个函数,用于添加行和下拉菜单: ```javascript function addRow() { // 获取表格对象 var table = document.getElementById("myTable"); // 创建行 var row = table.insertRow(); // 在行中插入单元格 var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); // 创建下拉菜单 var selectList = document.createElement("select"); selectList.id = "mySelect"; // 添加选项 var option1 = document.createElement("option"); option1.value = "1"; option1.text = "Option 1"; selectList.appendChild(option1); var option2 = document.createElement("option"); option2.value = "2"; option2.text = "Option 2"; selectList.appendChild(option2); // 在单元格中插入下拉菜单 cell1.appendChild(selectList); // 在单元格中插入文本框 var input = document.createElement("input"); input.type = "text"; cell2.appendChild(input); } ``` 这个函数首先获取表格对象,然后使用`insertRow()`方法在表格中创建一个行。接着,它在行中插入两个单元格,第一个单元格中插入下拉菜单,第二个单元格中插入一个文本框。最后,这个函数在下拉菜单中添加两个选项。 注意,这个函数假设你的表格的`id`属性为`myTable`,如果不是,需要将`document.getElementById("myTable")`中的`myTable`替换为你表格的`id`属性值。 最后,将这个函数添加到JavaScript文件或`<script>`标签中,就可以在HTML页面中点击按钮添加行和下拉菜单了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值