<head>
<title></title>
<style type="text/css">
table {
width: 100%
align: center
border: solid 1px black
}
table td {
width: 20%
text-align: center
border: solid 1px black
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("table tr:last-child").after
("<tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr>")
})
$("#cut").click(function(){
var value=$("table tr").length
if(value!=2){
$("table tr:last-child").remove()
}
})
})
</script>
</head>
<body>
<table id="table">
<tr>
<td colspan="5">供应商信息</td>
</tr>
<tr>
<td>序号</td>
<td>供应商</td>
<td>地址</td>
<td>联系人</td>
<td>联系电话</td>
</tr>
</table>
<input id="add" type="button" value="增加">
<input id="cut" type="button" value="减少">
</body>
</html>
注：jquery.js自已可以在网上下载，它们放在同一个目录下的。
HTML(全称 HyperText Markup Language)：超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。一、动态加载表格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>中
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）