有没有什么办法,可以动态的在html表格中插入列和行

有没有什么办法,可以动态的在html表格中插入列和行,第1张

//动态添加行与列

function addHtml( )

{

var tab=document.getElementById("viewTabs")//获得表格

var colsNum=tab.rows.item(0).cells.length //表格的列数

var num=document.getElementById("viewTabs").rows.length//表格当前的行数

var rownum=num-1

tab.insertRow(rownum)

for(var i=0i<colsNum-1i++)

{

tab.rows[rownum].insertCell(i)//插入列

tab.rows[rownum].cells[i].innerHTML="dfd"

}

tab.rows[rownum].insertCell(i)

tab.rows[rownum].cells[i].innerHTML="ddddkk"

}

比如设置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.表格有什么?1)框架2)横线3)竖线4)方格所以,一个表格是由许多线和方格组成的。当然,可以加上标题等。用HTML创建表格没有任何不同。1)table:表格标记,表格中所有的属性等都必须在

当中2)tr:行标记,表格中水平间隔3)td:列标记,表格中垂直间隔

2.OK,来做一个简单的表格。

语文 数学
英语 嘿嘿

3.效果图如下好吧,没有框框

4.怎么加上框框呢?给table加上属性

再来试试

5.给表格设置标题:只要在

的下面加上即可。XXXXS

6.效果图如下

7.有时候,表格是有表头的,给表头加黑是一种方式,还有一种方式则是设置表头。

8.关于表格的内容还有很多,我这里只是起到一个抱砖引玉的作用,还有更多的知识,不要不断的努力去学习,才能掌握。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存