jQuery生成动态表格

最新推荐文章于 2024-07-18 18:32:44 发布

Sicimike

最新推荐文章于 2024-07-18 18:32:44 发布

阅读量9.6k

点赞数 5

分类专栏：前端文章标签： JQuery动态生成表格动态添加行

本文链接：https://blog.csdn.net/Baisitao_/article/details/89713624

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

工作中常常需要动态的添加或者删除表格行或者列，所以稍微整理了一下，实现了一些比较通用的功能。

效果

动态表格

除表头外，第一行模拟从后台加载的数据，其余的行是动态添加
点击保存后，该行自动变成第一行的效果
点击删除时，如果该行未保存过，则直接删除；如果该行保存过，则会提示
删除成功后，行号会自动维护
复选框实现了全选、全不选、部分选择的效果
每一行都会有一个固定的ID，和行号不一定相同
如果需要动态删除列的话可以参考：$('#dynamic-table tr').find('td:last').remove();，删除最后一列

源文件

dynamicTable.html
源文件的内容就是下面的代码

代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Context-Type" content="text/html;charset=UTF-8">
<title>动态表格</title>
<style type="text/css">
* {
	font-family: "微软雅黑", font-size : 16px;
}

.container {
	width: 900px;
	margin: 270px auto;
}

.table tr td {
	border: 1px solid #0094ff;
	width: 15%;
	height: 30px;
}

.table {
	width: 100%;
	min-height: 25px;
	line-height: 25px;
	text-align: center;
	border-collapse: collapse;
}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
	<div class="container">
		<div>
			<table class="table" id="dynamic-table">
				<tr>
					<td><input id="checkAll" type="checkbox" name="checkAll"></td>
					<td>行号</td>
					<td>学号</td>
					<td>姓名</td>
					<td>性别</td>
					<td><a href="javascript:void(0)" id="add-line">新增</a></td>
				</tr>
				<!-- 此处是进入页面时，从后台加载的数据，id可以设置为数据的主键 -->
				<tr id="saved-item-1">
					<td><input type="checkbox" name="checkItem"></td>
					<td>1</td>
					<td>1001</td>
					<td>张三</td>
					<td>男</td>
					<td><span><a href="javascript:void(0)" οnclick="doDeleteLine('saved-item-1')">删除</a></span></td>
				</tr>
			</table>
		</div>
	</div>
</body>
</html>
<script type="application/javascript">
	
	var idRecord = 1;
	//添加行
	$('#add-line').click(function(){

		var trCount = $('#dynamic-table tr').length;

		var trHtml = '<tr id="dynamic-line-'+idRecord+'">'
		+ '<td><input id="check-item-'+idRecord+'" type="checkbox" name="checkItem"></td>'
		+ '<td>'+trCount+'</td>'
		+ '<td><input id="student-id-'+idRecord+'" type="text"></td>'
		+ '<td><input id="student-name-'+idRecord+'" type="text"></td>'
		+ '<td>'
		+	'<select id="student-sex-'+idRecord+'">'
		+		'<option value="1">男</option>'
		+		'<option value="2">女</option>'
		+	'</select>'
		+ '</td>'
		+ '<td><span id="operate-'+idRecord+'"><a href="javascript:void(0)" οnclick="deleteLine('+idRecord+')">删除</a>&nbsp;<a href="javascript:void(0)" οnclick="saveLine('+idRecord+')">保存</a></span></td>';
		$('#dynamic-table').append(trHtml);

		idRecord++;

		checkBoxStatus();
	});

	//删除非后台加载的数据
	function deleteLine(idSuffix){
		//如果该条数据保存过，则会有值
		var checkItemId = $('#dynamic-line-' + idSuffix).val();
		if (checkItemId) {
			//ajax请求后台
			alert("删除: " + checkItemId);
			//成功后，处理页面
			$('#dynamic-line-'+idSuffix).remove();
			//重新排序
			$('#dynamic-table tr').each(function(i, ob){
				//第一行是表头
				if (i > 0) {
					$(ob).find('td:eq(1)').html(i);
				}
			});
		} else {
			$('#dynamic-line-'+idSuffix).remove();
			$('#dynamic-table tr').each(function(i, ob){
				//第一行是表头
				if (i > 0) {
					$(ob).find('td:eq(1)').html(i);
				}
			});
		}

		checkBoxStatus();

	}

	//删除从后台加载的数据
	function doDeleteLine(trId){
		//ajax请求后台
		alert("删除: " + trId);
		//成功后，处理页面
		$('#'+trId).remove();
		//重新排序
		$('#dynamic-table tr').each(function(i, ob){
			//第一行是表头
			if (i > 0) {
				$(ob).find('td:eq(1)').html(i);
			}
		});

		checkBoxStatus();
	}

	//保存行
	function saveLine(idSuffix){
		var studentId = $('#student-id-' + idSuffix).val();
		var studentName = $('#student-name-' + idSuffix).val();
		var studentSex = $('#student-sex-' + idSuffix).val();
		var student = {
			studentId: studentId,
			studentName: studentName,
			studentSex: studentSex
		}
		//ajax保存
		alert("保存: " + JSON.stringify(student));

		//保存成功后
		$('#student-id-' + idSuffix).replaceWith('<span>'+studentId+'</span>');
		$('#student-name-' + idSuffix).replaceWith('<span>'+studentId+'</span>');

		var sexLabel = $('#student-sex-' + idSuffix).find('option:selected').text();
		$('#student-sex-' + idSuffix).replaceWith('<span>'+sexLabel+'</span>');

		//操作列去掉保存按钮
		$('#operate-' + idSuffix).replaceWith('<span id="operate-'+idSuffix+'"><a href="javascript:void(0)" οnclick="deleteLine('+idSuffix+')">删除</a></span>');

		//保存后把主键返回设置成tr的value，此处是我随意够造的字符串
		$('#dynamic-line-' + idSuffix).prop("value", "id" + idSuffix);
	}

	//全选
	$('#checkAll').click(function(e){
		if ($(this).prop("checked")) {
			$("input[name='checkItem']").prop("checked", true);
		} else {
			$("input[name='checkItem']").prop("checked", false);
		}
	});

	//第一列checkbox
	$("#dynamic-table").on("click",'input[name="checkItem"]',function(){
  		checkBoxStatus();
	});

	//checkbox状态切换
	function checkBoxStatus(){
		//选中的checkbox数量
  		var checkedCount = $('input[name="checkItem"]:checked').length;
  		//表格内容行数
  		var trCount = $('#dynamic-table tr').length -1;
  		if (checkedCount > 0 && checkedCount < trCount) {
  			//选中状态
  			$('#checkAll').prop("checked", false);
  			//部分选中状态
  			$('#checkAll').prop("indeterminate", true);
  		} else if (checkedCount === trCount) {
  			$('#checkAll').prop("checked", true);
  			$('#checkAll').prop("indeterminate", false);
  		}else{
  			$('#checkAll').prop("checked", false);
  			$('#checkAll').prop("indeterminate", false);
  		}
	}

</script>