table增、删、获取值
1.js实现，缺点getElementsByClassName兼容性问题，IE8以下不支持。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 导入 jquery 库 -->
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//增加
function add(){
var tab = document.getElementById("table1");
var tr = tab.insertRow(tab.rows.length);
var td1 = tr.insertCell(0);
td1.innerHTML = '<input class="xh" type="text"/>';
var td2 = tr.insertCell(1);
td2.innerHTML = '<input class="name" type="text"/>';
var td3 = tr.insertCell(2);
td3.innerHTML = '<input class="sex" type="text"/>';
var td4 = tr.insertCell(3);
td4.innerHTML = "<input type='button' value='删除' onclick='del("+(tab.rows.length-1)+")'/>";
}
//提交
function sub(){
var rows = document.getElementById("table1").rows.length;
for ( var i = 1; i < rows; i++) {
console.log(document.getElementById("table1").rows[i].cells[0].getElementsByClassName("xh")[0].value);
console.log(document.getElementById("table1").rows[i].cells[1].getElementsByClassName("name")[0].value);
console.log(document.getElementById("table1").rows[i].cells[2].getElementsByClassName("sex")[0].value);
}
}
//删除
function del(e){
var tab = document.getElementById("table1");
tab.deleteRow(e);
}
</script>
</head>
<body>
<table id="table1" border="1" cellpadding="10" cellspacing="0">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input class="xh" type="text"/></td>
<td><input class="name" type="text"/></td>
<td><input class="sex" type="text"/></td>
<td><input type="button" value="增加" onclick="add()"/></td>
</tr>
</table>
<input type="button" value="提交" onclick="sub()"/>
</body>
</html>
2.jquery实现，无兼容性问题。
<!DOCTYPE html>
<html>
<head>
<title>jquery_02.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 导入 jquery 库 -->
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#table1").append(
"<tr>"+
"<td><input class='xh' type='text'/></td>"+
"<td><input class='name' type='text'/></td>"+
"<td><input class='sex' type='text'/></td>"+
"<td><input type='button' value='增加' onclick='add()'/></td>"+
"</tr>"
);
});
//增加
function add(){
var tab = document.getElementById("table1");
$("#table1").append(
"<tr>"+
"<td><input class='xh' type='text'/></td>"+
"<td><input class='name' type='text'/></td>"+
"<td><input class='sex' type='text'/></td>"+
"<td><input type='button' value='删除' onclick='del("+tab.rows.length+")'/></td>"+
"</tr>"
);
}
//删除
function del(e){
var tab = document.getElementById("table1");
tab.deleteRow(e);
}
//提交
function sub(){
var tab = document.getElementById("table1");
for(var i = 1; i < tab.rows.length; i++){
console.log($("table tr:eq("+i+")").children("td:eq(0)").find("input").val());
console.log($("table tr:eq("+i+")").children("td:eq(1)").find("input").val());
console.log($("table tr:eq("+i+")").children("td:eq(2)").find("input").val());
}
}
</script>
</head>
<body>
<table id="table1" border="1" cellpadding="10" cellspacing="0">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
<input type="button" value="提交" onclick="sub()"/>
</body>
</html>