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

最新推荐文章于 2024-07-03 02:58:57 发布

Sagitarioo

最新推荐文章于 2024-07-03 02:58:57 发布

阅读量344

点赞数

本文链接：https://blog.csdn.net/Sagitarioo/article/details/91493264

版权

效果

数据获取

代码 (需引入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" onclick="dele(0)">删除</button></td>
			</tr>
		</tbody>		
	</table>
</div>
<div class="btn-box">
	<button class="am-btn am-btn-secondary" onclick="addTr()">增加</button>
	<button class="am-btn am-btn-success btn-ml" onclick="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" onclick="dele('+a+')">删除</button></td></tr>';
	$('table').append(apStr);
	a++;
}
function dele(con){
	$('.tr'+con).remove();
}
</script>
</html>