<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文件中就可以直接运行
<html><head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
getSum()
})
function getSum(){
var tds = $("#tab tr td:nth-child(2)")
var sum = 0
for(var i=0i<tds.lengthi++){
sum += parseInt(tds[i].innerHTML)
}
$("#result").val(sum)
}
function delResult(idx){
$("#tab tr:eq(2)").remove()
getSum()
}
</script>
</head>
<body>
<input type="text" id="result" value="0"/><br/><br/>
<table id="tab" style="border:1px solid blackborder-spacing:1">
<tr><th>姓名</th><th>分数</th><th> *** 作</th></tr>
<tr><td>张三</td><td>60</td><td><input type="button" onclick="delResult(1)" value="删除"</td></tr>
<tr><td>李四</td><td>70</td><td><input type="button" onclick="delResult(2)" value="删除"</td></tr>
<tr><td>王五</td><td>80</td><td><input type="button" onclick="delResult(3)" value="删除"</td></tr>
</table>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）