如何通过jquery动态给表格添加一行

如何通过jquery动态给表格添加一行,第1张

比如设置table的id为tab

var

trHTML

=

"<tr><td>...</td></tr>"

$("#tab").append(trHTML)//在table最后面添加一行

$("#tab

tr:eq(2)").after(trHTML)

//

在table的第3行后面添加一行

这样就可以进行动态的添加行了,至于你是通过什么事件来动态添加那就看你自己的意思了,通过button或者div之类的点击事件添加,只要把上面的两行代码放进去就ok,注意,要把var

trHTML那行代码放进添加事件里面,不然不管点击多少下,都只能添加一行

$(function()

{

$(":button").click(function()

{

var

tr

=

"<tr><td>new</td></tr>"

//$("table").append(tr)

$("table

tr:eq(2)").after(tr)

})

})

这是我测试用的代码,你可以运行看看

1.首先新建一个项目,并拖入一个按钮,然后双击该按钮,进入代码窗口。

2.写入代码

          Button a = new Button()

          this.Controls.Add(a)

第一句的意思是,定义一个按钮。

第二句的意思是将这个按钮加入"this",也就是加入这个窗体。

3.运行这个程序,然后点击按钮。

4.可以在左上角看到一个空白按钮。

5.想要动态加入控件,肯定就不满于这么单调的功能,其实我们在加入按钮时,可以定义按钮的参数的,修改一下代码。

          Button a = new Button()

          a.Text = "动态增加的按钮"

          this.Controls.Add(a)

中间的那句意思不用我解释了吧,是设置按钮上的文字的意思。

6.OK,运行程序,点击按击,可以看到,左上角的按钮文字变了,不过文字没全显示出来,没事,还可以更改按钮大小。

7.再增加一句代码

          Button a = new Button()

          a.Text = "我是动态增加的按钮"

          a.Width = 200

          this.Controls.Add(a)

第三句代码是把新增按钮的宽度设置为200

8.再运行程序看看结果,可以看以按钮变得很长了。

你好!方法很多,但基本都是拼接HTML。1、服务器端(比如你是从数据库读取数据添加到表格中的话)方法:可以在页面你想生成表格的地方,放一个服务器控件。label 或者literal 等都行 可以如下形式……<table Id="tbBindTab"><asp:Literal ID="LiteralBindTab" runat="server" EnableViewState="false"></asp:Literal>//记得带上EnableViewState="false“ 出于性能考虑</table>……在cs页面就从数据库读取数据,加上你的逻辑,把拼接好的HTML赋值给上面的控件的text属性就好了。如下形式 protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{ BindTab()

}

} private void BindTab()

{StringBuilder NewTab = new StringBuilder(4000)NewTab.AppendFormat("<tr><td>{0}</td><td>{1}</td></tr>","新增td1","新增td2")NewTab.AppendFormat("<tr><td>{0}</td><td>{1}</td></tr>","新增td1","新增td2")NewTab.AppendFormat("<tr><td>{0}</td><td>{1}</td></tr>","新增td1","新增td2")NewTab.AppendFormat("<tr><td>{0}</td><td>{1}</td></tr>","新增td1","新增td2")//我这数据是写死得,而你可以从数据中读取数据循环,加上判断、加上你需要的逻辑来拼接上面的HTML。LiteralBindTab.Text=NewTab.ToString()//最好把拼接好的HTML整到aspx页面上就行了,这里通过赋值给之前放在页面上的Literal控件的text属性。} 2、客户端(比如你想无刷新的动态添加表格)那就用javascript实现吧,或者用jquery实现更简单以上所说的两种方式,希望对你有帮助。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11894657.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存