JQuery實現(xiàn)動態(tài)操作表格
更新時間：2017年01月11日 13:25:35 作者：Yu2
本文主要分享了jQuery實現(xiàn)對一個表格動態(tài)的添加行，刪除行，并且對表格中內(nèi)容進(jìn)行非空驗證的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
最近要做的東西，是對一個表格動態(tài)的添加行，刪除行，并且對表格中內(nèi)容進(jìn)行非空驗證。
<!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 () {
//獲取表格的行數(shù)
var tabRowLen = $("table tbody tr").length;
//點擊add按鈕時，
$("#add").on("click", function () {
//獲取表格的行數(shù)
tabRowLen = $("table tbody tr").length;
var index = tabRowLen - 1;
//表格行數(shù)為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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
jQuery實現(xiàn)簡單漂亮的Nav導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實現(xiàn)簡單漂亮的Nav導(dǎo)航菜單效果,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)遍歷與操作頁面元素屬性的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
jQuery插件zoom實現(xiàn)圖片全屏放大彈出層特效
jQuery zoom是一款能夠查看相冊大圖的jQuery彈出層插件，點擊相冊的縮略圖，就會彈出該相片對應(yīng)的大圖，并且?guī)в袀€性的加載動畫，還有上一張下一張按鈕以及關(guān)閉按鈕。使用方法非常簡單。兼容IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等瀏覽器。2015-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)飛機大戰(zhàn)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
從最開始看到Jquery這樣的選擇器就讓我想起了CSS的選擇器，簡直是同出一轍啊，CSS的選擇器語法個人覺得相當(dāng)?shù)慕?jīng)典，那么Jquery借鑒CSS也就沒有多少疑問了。2009-10-10
這篇文章主要介紹了jQuery實現(xiàn)的簡單在線計算器功能,結(jié)合完整實例形式分析了jQuery實現(xiàn)簡單四則運算的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
基于jquery的滾動鼠標(biāo)放大縮小圖片效果，需要的朋友可以參考下。2011-10-10
鼠標(biāo)移到導(dǎo)航當(dāng)前位置的LI變色處于選中狀態(tài)
本文所要實現(xiàn)的效果廣泛應(yīng)用于當(dāng)前導(dǎo)航,主要表現(xiàn)為鼠標(biāo)移到導(dǎo)航上面當(dāng)前的LI變色，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)HTML元素隱藏和顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了jQuery位置選擇器用法,結(jié)合實例形式分析了jQuery位置選擇器的功能、用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-06-06
jquery <li>標(biāo)簽 隔若干行加空白或者加虛線的方法
下面小編就為大家?guī)硪黄猨query <li>標(biāo)簽 隔若干行加空白或者加虛線的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12