Jquery creates table of automatically increases table code sharing

  • 2020-03-30 01:04:52
  • OfStack

<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>jQuery  Table auto-increment </title>
<meta name="keywords" content="jQuery,  form , table,  Automatically add " />
<meta name="description" content="jQuery Table auto-increment " />
<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; }
<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>
  <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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

//This is the second method, which is more concise, depending on the understanding of 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()){
  eEle = oTr.clone();


Let's see what happens

Related articles: