JQuery实现动态操作表格
最近要做的东西，是对一个表格动态的添加行，删除行，并且对表格中内容进行非空验证。
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<scriptsrc="scripts/jquery-1.10.2.js"></script>
<scripttype="text/javascript">
$(function(){
//获取表格的行数
vartabRowLen=$("tabletbodytr").length;
//点击add按钮时，
$("#add").on("click",function(){
//获取表格的行数
tabRowLen=$("tabletbodytr").length;
varindex=tabRowLen-1;
//表格行数为0时，或者表格不存在空值时
if(IsNull(index)||tabRowLen==0){
//添加一行
$("tabletbody").append("<tr>"+
"<td><inputtype='text'class='Name'/><divid='dName"+tabRowLen+"'></div></td>"+
"<td><inputtype='text'class='Age'/><divid='dAge"+tabRowLen+"'></div></td>"+
"<td><inputtype='button'class='add'value='delete'/></td></tr>");
//删除一行
$(".add").on("click",function(){
$(this).parents("tr").remove();
});
}
//keyup事件
$("tableinput").on("keyup",function(){
//验证是否有空值
IsNull(index);
});
});
functionIsNull(trIndex){
varresult=true;
debugger;
//遍历表格的input
$("tabletbodyinput").each(function(trIndex){
//判断是否存在空值
if($("tabletbodyinput")[trIndex].value==""){
//提示空值
result=false;
$(this).next().html("required");
}
//不为空
else{
//清空提示信息
$(this).next().html("");
}
});
returnresult;
};
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th><inputtype="button"id="add"value="addRow"/></th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！