<head>
<title>动态增加、删除table中的tr示例</title>
<script language="javascript">
//添加行函数
function addrow(){
//得到table对象
var mytable = document.getElementById("testtable")
//向table中插入一行
var mytr=mytable.insertRow()
//创建一个新的td对象
var mytd=document.createElement("td")
//创建一个新的<input >对象
var inputtext=document.createElement("<INPUT name='ok'>")
//设置input对象的type属性
inputtext.setAttribute("type","text")
//初始化td中的文本信息
mytd.innerText="输入关键字:"
//向td中加入input对象
mytd.appendChild(inputtext)
//向tr中加入td对象
mytr.appendChild(mytd)
}
//删除行
function deleterow(){
//得到table对象
var mytable = document.getElementById("testtable")
//得到table中的行对象数组
var arr=mytable.rows
if(arr.length==1){
alert("至少存在一行")
}else{
//删除最后一行
arr[arr.length-1].removeNode(true)
}
}
</script>
</head>
<body>
<h2>table中动态增加、删除行示例</h2>
<table>
<tr>
<td>
<table id="testtable">
<tr><td>输入关键字:<input type="text" name="name"></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="button" onclick="addrow()" value="增加">
<input type="button" onclick="deleterow()" value="删除">
</td>
</tr>
</table>
</body>
</html>
说明：把此代码赋值到一个html文件中就可以直接运行
动态添加输入行可以使用 javascript 就能够完成
<html><body>
<input type="button" value="add" onclick="add()"/>
<ul id="ul"><li><input type="text"/></li></ul>
</body>
</html>
<script>
function add(){
var ul = document.getElementById("ul")
var li = ul.firstChild.cloneNode(true)
ul.appendChild(li)
}
</script>
如上代码中使用的ul、li，如果使用 table 其实也是一样的。
为什么不用jquery的append方法？这个你想添加什么标签就添加什么标签。for循环将你要添加的标签写上，然后直接
var talbeAdd=""
for(){
tableAdd+="<tr><td>这儿写你要添加的内容</td></tr>"
}
$("table").append("这个写你要添加的标签")
你想通过什么事件添加自己写
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）