JQuery實現(xiàn)動態(tài)操作表格
更新時間：2017年01月11日 13:25:35 作者：Yu2
本文主要分享了jQuery實現(xiàn)對一個表格動態(tài)的添加行，刪除行，并且對表格中內容進行非空驗證的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
最近要做的東西，是對一個表格動態(tài)的添加行，刪除行，并且對表格中內容進行非空驗證。
<!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>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
自從接觸了jQuery后就為其強大的選擇器所震撼，這也正是jQuery的優(yōu)勢所在2012-02-02
最近要實現(xiàn)在web頁面上導出excel文件的功能，下面是具體的實現(xiàn)方法及思路2013-04-04
這篇文章主要介紹了jQuery實現(xiàn)自定義事件的方法,實例分析了jQuery自定義事件的定義與使用方法,需要的朋友可以參考下2015-04-04
:input表示選擇表單中的input,select,textarea,button元素，input僅僅選擇input元素。2011-07-07
如何使用jquery修改css中帶有!important的樣式屬性
如何使用jquery修改css中帶有!important的樣式屬性？下面小編就為大家?guī)硪黄褂胘query修改css中帶有!important的樣式屬性方法。希望對大家有所幫助。一起跟隨小編過來看看吧2016-04-04
下面小編就為大家?guī)硪黄嘘Pjquery與DOM節(jié)點操作方法和屬性記錄。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考2016-04-04
jquery實現(xiàn)的隨機多彩tag標簽隨機顏色和字號大小效果
這篇文章主要介紹了jquery實現(xiàn)的隨機多彩tag標簽隨機顏色和字號大小效果,需要的朋友可以參考下2014-03-03
隨著頁面扁平化的普及，越來越多的網站都開始使用響應式布局，作為一個優(yōu)秀的前端工作者，必須要精通的，這里給大家推薦一款響應式布局的jQuery插件。2014-11-11
修改jquery.lazyload.js實現(xiàn)頁面延遲載入
jquery.lazyload.js并未真正的實現(xiàn)頁面延遲載入，它的實現(xiàn)原理是頁面載入完畢后將html中所有img標簽的src屬性都替換為空，把src的初始值存儲到一個自定義的屬性中，當頁面滾動到img標簽位置時再將圖片載入進來。2010-12-12
jQuery實現(xiàn)經典的網頁3D輪播圖封裝功能【附源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)經典的網頁3D輪播圖封裝功能,結合實例形式詳細分析了基于jQuery插件Figure_3D.js實現(xiàn)3D輪播圖功能的具體步驟與相關操作技巧,需要的朋友可以參考下2019-02-02