欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery实现表格动态增加删除行

程序员文章站 2022-04-24 23:53:16
...

 

 

 

效果

jQuery实现表格动态增加删除行

 数据获取

 

jQuery实现表格动态增加删除行

代码 (需引入jQuery.js)

<!DOCTYPE html>
<html>
<head>
	<title>tableDemo</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<style type="text/css">
html{
	font-size: 62.5%;
}
table{
	margin-left: auto;
	margin-right: auto;
}
td{
	width: 100px;
	height: 50px;
}
input{
	padding: .625em;
    font-size: 1.6rem;
    line-height: 1.2;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0;
    -webkit-appearance: none;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.am-btn{
	display: inline-block;
    margin-bottom: 0;
    padding: .625em 1em;
    vertical-align: middle;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    outline: 0;
    -webkit-appearance: none;
}
.am-btn-secondary {
    color: #fff;
    background-color: #3bb4f2;
    border-color: #3bb4f2;
}
.am-btn-danger {
    color: #fff;
    background-color: #dd514c;
    border-color: #dd514c;
}
.am-btn-success {
    color: #fff;
    background-color: #5eb95e;
    border-color: #5eb95e;
}
input[name="name"]{
	border-color: #0e90d2;
}
input[name="phone"]{
	border-color: #3bb4f2;
}
input[name="num"]{
	border-color: #5eb95e;
}
.btn-box{
	text-align: center;
}
.btn-ml{
	margin-left: 5rem;
}
</style>
<div>
	<table>
		<thead>
			<tr>
				<th>姓名</th>
				<th>手机号</th>
				<th>金额</th>				
			</tr>
		</thead>
		<tbody>
			<tr class="tr0">
				<td><input type="text" name="name"></td>
				<td><input type="text" name="phone"></td>
				<td><input type="text" name="num"></td>
				<td><button class="am-btn am-btn-danger" οnclick="dele(0)">删除</button></td>
			</tr>
		</tbody>		
	</table>
</div>
<div class="btn-box">
	<button class="am-btn am-btn-secondary" οnclick="addTr()">增加</button>
	<button class="am-btn am-btn-success btn-ml" οnclick="showText()">数据</button>
</div>
</body>
<script type="text/javascript">
var a=1;
function showText(){
	var c=$('tbody>tr').length;
	var arr=new Array();
	for(var i=1;i<=c;i++){
		var name = $('tbody>tr:nth-of-type('+i+')>td:nth-of-type(1)>input[name="name"]').val();
		var phone = $('tbody>tr:nth-of-type('+i+')>td:nth-of-type(2)>input[name="phone"]').val();
		var amount = $('tbody>tr:nth-of-type('+i+')>td:nth-of-type(3)>input[name="num"]').val();
		arr.push(name+","+phone+","+amount);
	}
	console.log(arr);
}
function addTr(){
	var apStr='<tr class="tr'+a+'"><td><input type="text" name="name"></td><td><input type="text" name="phone"></td><td><input type="text" name="num"></td><td><button class="am-btn am-btn-danger" οnclick="dele('+a+')">删除</button></td></tr>';
	$('table').append(apStr);
	a++;
}
function dele(con){
	$('.tr'+con).remove();
}
</script>
</html>