Of Stack

Table based on jQuery implementation click on the last row to implement the row auto increment effect

  • 2020-11-30 08:09:58
  • OfStack

Now pursue efficiency and humanization in any transaction, web effect is, of course, if one can edit the data table, the editor at the end of the 1, click can automatically add 1 line, that is the effect of a more humane, can discharge the suffering of one silk lawton, share 1 section of the code below.

The code is as follows: 


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.ofstack.com/" />
<title> The home of the script </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> The serial number </th>
<th> The name </th>
<th> The amount of [USD]</th>
<th> time </th>
<th> project </th>
<th> unit </th>
<th> note </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>

The above code realizes our requirements. Click the last 1 line of the table to automatically add a new line. The following is the implementation process of 1.

1. Code comments:

1.$(function(){}), when the document structure is fully loaded before executing the code in the function.
var oTable = $("#count"), gets the object whose id attribute value is count, in this case the table object.
3.iNum = 1, declare a variable and assign an initial value of 1, and then each additional line can be +1 as the line number.
4.eEle = ", declares a variable to store the row object.
5.oTable.on('click', function(e){}), registers the click event handler for the table object.
6.var target = ES31en. target, get the clicked source object.
7.oTr = $(target).closest('tr'), gets the nearest tr ancestor element.
8.f(oTr.index ()== oTable.find ('tr').last ().index ()), determine if the last line is clicked.
9.iNum++, iNum + 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 in the last line 1.
12.oTable.append(eEle), add rows to the end of the table.

Click on the last line of jQuery to realize the full contents of the table self-increment effect to introduce so much to you first. The above content is greatly commented. If you have any questions, you can refer to it.

Related articles: