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