复制代码代码如下： jQuery 表格自动增加 < ;meta name="distribution" content="global" /><BR>table { width:800px;边距：50px 自动；边框折叠：折叠；边框间距：0； }<BR>表 tr、表 th、表 td { 边框：1px 实心 #ddd;字体大小：12px； }<BR>表 tr td:first-child { width:30px;文本对齐：居中； }<BR>表 td 输入 { width:100%;高度：100%；内边距：5px 0； 边框：0 无； }<BR>table td input:focus { box-shadow:1px 1px 3px #ddd inset;大纲：无； }<BR></风格><BR><身体><BR> </P> <P><table id="count"><br> <tr><th>序号</th><th>姓名</th><th>金额[USD]< /th><th>时间</th><th>项目</th><th>单位</th><th>备注</th></tr><br> <tr><br> <td>1</td><br> <td><input type="text" /></td><br> <td><输入type="text" /></td><br> <td><input type="text" /></td><br> <td><input type="text" " /></td><br> <td><input type="text" //></td><br> <td><input type="text" //> </td><br> </tr><br></table> <p><脚本 src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script></p> <p><脚本类型=“text/javascript”><br>$(function(){</p> <p>但是<br>/* 这是一种方法，不专业，但是很好理解，就像面向过程编写的代码一样。<br> var oTable = $("#count"), oTr = '', oInput = '', eEle = '';<br> oTable.on('mouseover', function(){<br> oTr = oTable.find('tr').last();<br> oInput = oTr. find('input');<br> eEle = oTr.clone();<br> oInput.on('click', function(){<br> varparent = $(this).parents('tr') ;<br> if(oTr.index() == Parent.index()){<br> oTable.append(eEle);<br> }<br> });<br> });<br>* /</p> <p>//这是第二个方法，比较简洁，不像对jQ的理解了。<br>var oTable = $("#count"), iNum = 1, eEle = '';<br>oTable .on('click', function(e){<br> var target = e.target,<br> oTr = $(target).closest('tr');<br> if(oTr.index() = = oTable.find('tr').last().index()){<br> iNum ;<br> eEle = oTr.clone();<br> eEle.find('td').eq(0 ).text(iNum);<br> }<br> oTable.append(eEle);<br> });</p> <p><br>});<br></script><br> </body><br></html><br></p> </div> <br><br>运行看效果吧
