快捷導(dǎo)航

基于jQuery實(shí)現(xiàn)點(diǎn)擊最后一行實(shí)現(xiàn)行自增效果的表格

更新時(shí)間：2016年01月12日 11:32:11 作者：我是代碼努力

現(xiàn)在任何事務(wù)都追求效率和人性化，當(dāng)然網(wǎng)頁(yè)效果也是如此，如果一個(gè)可以編輯數(shù)據(jù)的表格，編輯到最后一行的時(shí)候，點(diǎn)擊可以自動(dòng)添加一行，這樣算是一個(gè)比較人性化的效果，可以免去一絲勞頓之苦，下面分享一段這樣的代碼

現(xiàn)在任何事務(wù)都追求效率和人性化，當(dāng)然網(wǎng)頁(yè)效果也是如此，如果一個(gè)可以編輯數(shù)據(jù)的表格，編輯到最后一行的時(shí)候，點(diǎn)擊可以自動(dòng)添加一行，這樣算是一個(gè)比較人性化的效果，可以免去一絲勞頓之苦，下面分享一段這樣的代碼。

代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>腳本之家</title>
<style type="text/css">
table 
{
width:800px;
margin:50px auto;
border-collapse:collapse;
border-spacing:0;
}
table tr, table th, table td 
{
border:1px solid #ddd;
font-size:12px;
}
table tr td:first-child 
{
width:30px;
text-align:center;
}
table td input 
{
width:100%;
height:100%;
padding:5px 0;
border:0 none;
}
table td input:focus 
{
box-shadow:1px 1px 3px #ddd inset;
outline:none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var oTable = $("#count"), iNum = 1, eEle = '';
oTable.on('click', function(e){
var target = e.target,
oTr = $(target).closest('tr');
if(oTr.index() == oTable.find('tr').last().index())
{
iNum++;
eEle = oTr.clone();
eEle.find('td').eq(0).text(iNum);
}
oTable.append(eEle);
});
});
</script>[/size]
[size=2]</head>
<body>
<table id="count">
<tr>
<th>序號(hào)</th>
<th>姓名</th>
<th>金額[USD]</th>
<th>時(shí)間</th>
<th>項(xiàng)目</th>
<th>單位</th>
<th>備注</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</table>
</body>
</html>

以上代碼實(shí)現(xiàn)了我們的要求，點(diǎn)擊表格的最后一行，可以自動(dòng)添加新行，下面介紹一下它的實(shí)現(xiàn)過(guò)程。

一.代碼注釋:

1.$(function(){})，當(dāng)文檔結(jié)構(gòu)完全加載完畢再去執(zhí)行函數(shù)中的代碼。
2.var oTable = $("#count")，獲取id屬性值為count的對(duì)象，在這里就是表格對(duì)象。
3.iNum = 1，聲明一個(gè)變量并賦初值為1，以后可以每增加一行就會(huì)+1作為行號(hào)。
4.eEle = ''，聲明一個(gè)變量用來(lái)存儲(chǔ)行對(duì)象。
5.oTable.on('click', function(e){})，為表格對(duì)象注冊(cè)click事件處理函數(shù)。
6.var target = e.target，獲取被點(diǎn)擊的源對(duì)象。
7.oTr = $(target).closest('tr')，獲取最近的tr祖輩元素。
8.f(oTr.index()==oTable.find('tr').last().index())，判斷點(diǎn)擊的是否是最后一行。
9.iNum++，iNum的值加1。
10.eEle = oTr.clone()，克隆當(dāng)前行對(duì)象。
11.eEle.find('td').eq(0).text(iNum)，設(shè)置最后一行第一個(gè)單元格的值。
12.oTable.append(eEle)，為表格的最后添加行。

關(guān)于jQuery實(shí)現(xiàn)點(diǎn)擊最后一行實(shí)現(xiàn)行自增效果的表格的全部?jī)?nèi)容先給大家介紹這么多，以上內(nèi)容給大有注釋?zhuān)胁幻靼椎玫胤娇梢詤⒖枷?，非常感謝大家一直以來(lái)對(duì)腳本之家網(wǎng)站的支持。

您可能感興趣的文章: