JQuery实现动态操作表格

最近要做的东西，是对一个表格动态的添加行，删除行，并且对表格中内容进行非空验证。

<！DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="scripts/jquery-1.10.2.js"></script><script type="text/javascript">$（function （） {//获取表格的行数var tabRowLen = $（"table tbody tr"）.length;//点击add按钮时，$（"#add"）.on（"click", function （） {//获取表格的行数tabRowLen = $（"table tbody tr"）.length;var index = tabRowLen - 1;//表格行数为0时，或者表格不存在空值时if （IsNull（index） || tabRowLen == 0） {//添加一行$（"table tbody"）.append（"<tr>" +"<td><input type="text" class="Name"/><div id="dName" + tabRowLen + ""></div></td>" +"<td><input type="text" class="Age"/><div id="dAge" + tabRowLen + ""></div></td>" +"<td><input type="button" class="add" value="delete " /></td></tr>"）;//删除一行$（".add"）.on（"click", function （） {$（this）.parents（"tr"）.remove（）;}）;}//keyup事件$（"table input"）.on（"keyup", function （） {//验证是否有空值IsNull（index）;}）;}）;function IsNull（trIndex） {var result = true;debugger;//遍历表格的input$（"table tbody input"）.each（function （trIndex） {//判断是否存在空值if （$（"table tbody input"）[trIndex].value == ""） {//提示空值result = false;$（this）.next（）.html（"required"）;}//不为空else {//清空提示信息$（this）.next（）.html（""）;}}）;return result;};}）;</script></head><body><table><thead><tr><th>Name</th><th>Age</th><th><input type="button" id="add" value="addRow " /></th></tr></thead><tbody></tbody></table></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！