用js实现动态添加表格数据

JavaScript014

用js实现动态添加表格数据,第1张

1、在页面div中事先创建一个空白表格，可以根据需求而定。

2、表格创建好后，我们就可以写动态生成表格的关键代码了。我们写一个js方法供触发使用。

3、在<tb>标签中我们添加了<input>标签，主要是用来提供用户输入参数， 而全局变量num，主要是用来区分每一个添加的参数的id的唯一性而存在的。

4、获得表格中的数据。

5、拿到表格中的数据后，我们根据它值的形式把它转换成json格式的数据。

<input type="button" value="创建一个新表格" onclick="createTable(800,8,5)" />

<script type="text/javascript">

function createTable(width,rows,cells)

{

//创建一个表格对象

var mytable=document.createElement("table")

mytable.cellSpacing="1px"

//创建一个表头对象

var mythead=document.createElement("thead")

for(a=0a<1a++)

{

var myrow=document.createElement("tr")

for(b=0b<cellsb++)

{

var mytd=document.createElement("td")

mytd.innerHTML="表 头 " +(b+1)

mytd.style.cssText="text-align:center"

myrow.appendChild(mytd)

}

mythead.appendChild(myrow)

}

//创建一个表体对象

var mytbody=document.createElement("tbody")

for(i=0i<rowsi++)

{

var myrow=document.createElement("tr")

for(j=0j<cellsj++)

{

var mytd=document.createElement("td")

mytd.style.backgroundColor="#fff"

mytd.innerHTML="第"+(i+1)+"行第"+(j+1)+"列"

myrow.appendChild(mytd)

}

mytbody.appendChild(myrow)

}

//创建一个表脚对象

var mytfoot=document.createElement("tfoot")

for(c=0c<1c++)

{

var myrow=document.createElement("tr")

for(d=0d<1d++)

{

var mytd=document.createElement("td")

mytd.innerHTML="脚"+(d+1)

mytd.style.cssText="text-align:center"

mytd.colSpan="10"

myrow.appendChild(mytd)

}

mytfoot.appendChild(myrow)

}

//将表头追加到表格

mytable.appendChild(mythead)

//将表体追加到表格

mytable.appendChild(mytbody)

//将表脚追加到表格

mytable.appendChild(mytfoot)

//追加对象样式

mythead.style.cssText="background-color:#003color:#FFFfont-size:14pxfont-weight:600width:"+width+"px"

mytable.style.cssText="background-color:#999border:0pxwidth:"+width+"px"

mytfoot.style.cssText="background-color:#003color:#FFFfont-size:14pxfont-weight:600width:"+width+"px"

document.body.appendChild(mytable)

}

</script>

一、动态加载表格

1.首先在html中为表格的添加位置设置id

即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下

<div id="tdl"><div>

2.在javascript中写添加表格的语句

若在当前html文件中，则写在<script>标签内部，如

复制代码 代码如下:

<script type="text/javascript" >

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //此处添加的表格可根据自己需要创建

</script>

若是通过引入js文件，则在js文件（假设是test.js）中直接写如下语句

复制代码 代码如下:

document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>"

然后再引入自己的html文件

复制代码 代码如下:

<script type="text/javascript" src="test.js"></script>

二、 动态添加表格行

1.首先在html中为表格行的添加位置设置id，此位置必须是<tbody>内部（不是特别准确，但根据我的测试就得到此结论，有其他的方法请留言，谢谢），如下

复制代码 代码如下:

<table>

<thead></thead>

<tfoot><tfoot>//tfoot与thead是与tbody配套使用，但我在写的时候，没用也可以。

<tbody id="rows"></tbody>

</table>

[\s\S ]*\n

2.在javascript内容中，要先创建行和单元格，再在<.tbody>中添加行，如下

[code]

row=document.createElement("tr")//创建行

td1=document.createElement("tr")//创建单元格

td1.appendChild(document.createTextNode("content"))//为单元格添加内容

row.appendChild(td1)//将单元格添加到行内

document.getElementById("rows").append(row)//将行添加到<tbody>中