Based on jQuery, a table that realizes row increment effect by clicking on the last row

Based on jQuery, a table that realizes row increment effect by clicking on the last row_jquery

WBOY

Release： 2016-05-16 15:20:34

Original

1658 people have browsed it

Everything nowadays pursues efficiency and humanity. Of course, the same is true for web page effects. If you have a table that can edit data, when you edit the last row, you can click to automatically add a row. This is a more humane effect. To save you a bit of trouble, let me share a piece of such code below.

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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>序号</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>
</body>
</html>

Copy after login

The above code realizes our requirements. Click on the last row of the table to automatically add a new row. Here is an introduction to its implementation process.

1. Code comments:

1.$(function(){}), when the document structure is completely loaded, execute the code in the function.
2.var oTable = $("#count"), get the object whose id attribute value is count, which is the table object here.
3. iNum = 1, declare a variable and assign the initial value to 1. In the future, 1 will be used as the line number for each additional line.
4.eEle = '', declare a variable to store the row object.
5.oTable.on('click', function(e){}), register the click event processing function for the table object.
6.var target = e.target, get the clicked source object.
7.oTr = $(target).closest('tr'), get the nearest tr ancestor element.
8.f(oTr.index()==oTable.find('tr').last().index()), determine whether the clicked one is the last row.
9.iNum, the value of iNum is increased by 1.
10.eEle = oTr.clone(), clone the current row object.
11.eEle.find('td').eq(0).text(iNum), set the value of the first cell of the last row.
12.oTable.append(eEle), add rows to the end of the table.

I would like to introduce all the contents of the table with jQuery to realize the row auto-increment effect by clicking on the last row. The above content is greatly commented. If you don’t understand something, you can refer to it. Thank you very much for your continued understanding of the script. Home website support.