jQuery操作table
严元白
jQuery操作table，动态增加行，删除行，获取行内数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery动态增加table</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function addRow(){
var length = $("#display").find("tr").length; //总行数，包括表头
var trId = "display" + length;
var tableTr = $("<tr id=" + trId + " ><td style='height: 30px;'><input type='text' name='valueId' class='fe-text w240'/></td><td style='height: 30px;'><input type='text' name='valueName' class='fe-text w240'/></td><td style='height: 30px;'><input type='button' value='获取' onclick='getInfo("+trId+")'/><input type='button' value='删除' onclick='deleteRow("+trId+")'/></td></tr>");
tableTr.appendTo('#display');
var length = $("#display").find("tr").length; //行数
}
function deleteRow(trObj){
trObj.remove();
}
function getInfo(trObj){
var trId = trObj.id;
var jQvalueId = "#" + trId + " input[name='valueId']";
var valueId = $(jQvalueId).val();
var jQvalueName = "#" + trId + " input[name='valueName']";
var valueName = $(jQvalueName).val();
console.log(valueId);
console.log(valueName);
}
</script>
</head>
<body>
<div>
<input type="hidden" id="menuValueId" value="">
<table id="display" border="1">
<tbody>
<tr>
<th>ID码</th>
<th>名称</th>
<th>操作</th>
</tr>
</tbody>
</table>
<input type="button" value="新增" onclick="addRow()"/>
</div>
</body>
</html>
类似资料：