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>中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<table id="asp" border="1" celllspacing="0" width="65%" bgcolor="#efefef">
<tbody>
<tr>
<td colspan="2" style="font-weight:bold">当前设置范围列表:</td>
</tr>
<tr>
<td style="font-weight:boldtext-align:center">设置范围</td>
<td style="font-weight:boldtext-align:center">是否删除</td>
</tr>
</tbody>
</table>
<input type="button" value="add" onclick="addTr('新加上的')" />
<SCRIPT LANGUAGE="JavaScript">
<!--
var s_i=1
function addTr(s){
var tab=document.getElementById("asp")
var tr=tab.insertRow()
var td1=document.createElement("td")
td1.innerHTML=s+s_i
td1.style.textAlign="center"
var td2=document.createElement("td")
td2.innerHTML="<input type=\"button\" value=\"删除\" onclick=\"document.getElementById('asp').deleteRow(event.srcElement.parentElement.parentElement.rowIndex)\"/>"
td2.style.textAlign="center"
tr.appendChild(td1)
tr.appendChild(td2)
}
//-->
</SCRIPT>
</BODY>
</HTML>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）