jquery創(chuàng)建表格(自動增加表格)代碼分享
<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>jQuery 表格自動增加</title>
<meta name="keywords" content="jQuery, 表格, table, 自動增加" />
<meta name="description" content="jQuery表格自動增加" />
<meta name="viewport" content="width=device-width" />
<meta name="copyright" content="imsole.net" />
<meta name="designer" content="sole" />
<meta name="publisher" content="imsole.net" />
<meta name="author" content="sole" />
<meta name="robots" content="all" />
<meta name="distribution" content="global" />
<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>
<body>
<table id="count">
<tr><th>序號</th><th>姓名</th><th>金額[USD]</th><th>時間</th><th>項目</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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
/* 這是一種方法，但是不精簡，不過很好理解，就像面向過程編寫代碼一樣。
var oTable = $("#count"), oTr = '', oInput = '', eEle = '';
oTable.on('mouseover', function(){
oTr = oTable.find('tr').last();
oInput = oTr.find('input');
eEle = oTr.clone();
oInput.on('click', function(){
var parent = $(this).parents('tr');
if(oTr.index() == parent.index()){
oTable.append(eEle);
}
});
});
*/
//這是第二種方法，比較精簡，要看對jQ的理解了。
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>
</body>
</html>
運行看效果吧
- JQuery 動態(tài)生成Table表格實例代碼
- jQuery動態(tài)生成Bootstrap表格
- JQuery Ajax動態(tài)生成Table表格
- Jquery 動態(tài)生成表格示例代碼
- 基于jquery的動態(tài)創(chuàng)建表格的插件
- JQuery右鍵菜單插件ContextMenu使用指南
- jQuery右鍵菜單contextMenu使用實例
- jquery實現(xiàn)在網(wǎng)頁指定區(qū)域顯示自定義右鍵菜單效果
- jquery實現(xiàn)右鍵菜單插件
- jQuery實現(xiàn)自定義右鍵菜單的樹狀菜單效果
- jQuery實現(xiàn)右鍵菜單、遮罩等效果代碼
- jQuery動態(tài)生成表格及右鍵菜單功能示例
相關(guān)文章
這篇文章主要介紹了jQuery如何實現(xiàn)模糊搜索，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了jquery 校驗中國身份證號碼實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了jQuery解析Json的方法,結(jié)合實例形式較為詳細(xì)的分析了jQuery針對json的常用解析與轉(zhuǎn)換技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細(xì)介紹了多種jQuery綁定事件的實現(xiàn)方式，分享了jQuery防止重復(fù)綁定事件的解決方法，感興趣的小伙伴們可以參考一下2016-06-06
jquery.cookie.js實現(xiàn)用戶登錄保存密碼功能的方法
這篇文章主要介紹了jquery.cookie.js實現(xiàn)用戶登錄保存密碼功能的方法,結(jié)合實例形式詳細(xì)分析了jquery.cookie.js插件操作cookie實現(xiàn)保存用戶登錄信息的相關(guān)技巧,需要的朋友可以參考下2016-04-04
Jquery實現(xiàn)多個表格的全選復(fù)選框功能方式
這篇文章主要介紹了Jquery實現(xiàn)多個表格的全選復(fù)選框功能方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了簡單的jQuery banner圖片輪播實例代碼的相關(guān)資料,需要的朋友可以參考下2016-03-03
談?wù)凧query ajax中success和complete有哪些不同點
jquery ajax中success和complete有哪些不同點呢？大家都了解嗎，接下來通過本篇文章給大家介紹jquery ajax中success和complete的不同點，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這篇文章主要介紹了EasyUI加載完Html內(nèi)容樣式渲染完成后顯示的相關(guān)資料,需要的朋友可以參考下2016-07-07
這里給大家分享幾段JQuery提示效果的代碼，非常的簡單實用，有需要的小伙伴直接拿走吧2014-11-11