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