jquery创建表格、自动增加表格的实例代码
本文导语: 本节内容： jquery创建表格，在点击单元格时自动增加一行表格。 例子： 代码示例: jQuery 表格自动增加-www. table { width:800px; margin:50px auto; border-collapse:collapse; border-spacing:0; } table tr, table th, table td { bord...
本节内容：
jquery创建表格，在点击单元格时自动增加一行表格。
例子：
jQuery 表格自动增加-www.
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; }
序号姓名金额[USD]时间项目单位备注
1
$(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);
}
});
});
*/
//这是第二种方法，比较精简，需要对jquery很熟悉。
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);
});
});
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。