前端模拟实现可编辑的表格table插件

最新推荐文章于 2023-12-10 19:38:47 发布

zhuaaaa3944210

最新推荐文章于 2023-12-10 19:38:47 发布

阅读量298

点赞数

分类专栏： js 文章标签：前端

本文链接：https://blog.csdn.net/zhuaaaa3944210/article/details/134196780

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在做项目中遇到了一个供货记录的功能，要求用户自己编辑添加删除表格数据，接下来我们就模拟下前端如何实现该功能

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>可编辑的表格table</title>
		<link rel="stylesheet" href="css/backstage.css">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/laydate/layer.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/html" id="v_every_ghrecord">
		    {{if data && data.length>0}}
		    {{each data as item index}}
		    <tr>
		    	<td><input type="text" name="NO" size="2" value="{{item.NO}}" /></td>
		    	<td>{{item.type}}</td>
				{{if !item.realname}}
		    	<td><input type="text" placeholder="请输入姓名" class="expert_inp_w100"></td>
				{{else}}
				<td><input type="text"  class="expert_inp_w100" value={{item.realname}}></td>
				{{/if}}
				{{if !item.company_name}}
		    	<td><input type="text" placeholder="请输入所属公司" class="expert_inp_w100"></td>
				{{else}}
				<td><input type="text"  class="expert_inp_w100" value={{item.company_name}}></td>
				{{/if}}
				{{if !item.zhichen}}
		    	<td><input type="text" placeholder="请输入职称职务" class="expert_inp_w100"></td>
				{{else}}
				<td><input type="text"  class="expert_inp_w100" value="{{item.zhichen}}"></td>
				{{/if}}
				{{if !item.shenfenzheng}}
		    	<td><input type="text" placeholder="请输入身份证号" class="expert_inp_w100"></td>
				{{else}}
				<td><input type="text"  class="expert_inp_w100" value="{{item.shenfenzheng}}"></td>
				{{/if}}
				{{if !item.phone}}
		    	<td><input type="text" placeholder="请输入手机号" class="expert_inp_w100"></td>
				{{else}}
				<td><input type="text"  class="expert_inp_w100" value="{{item.phone}}"></td>
				{{/if}}
		    	<td><a href="#" class="td_a_3" id="Button2" onClick="deltr(this)">删除</a></td>
		    </tr>
		    {{/each}}
		    {{else}}
		    <tr>
		        <td colspan="8"><p style="width:100%;text-align: center;margin-top: 12px;font-size:14px;font-weight: 700px">暂无信息!</p></td>
		    </tr>
		    {{/if}}
		</script>
		<!--添加删除专家-->
		<script type="text/javascript">
			var show_count = 10; //要显示的条数
			$(function(){
				getDefaultdata();
			})
			//初始化函数：数据的回显  在煤婆网的路径为：WebRoot\localdata\ghrecord.json（数据格式可以借鉴）
			function getDefaultdata(){
				$.ajax({
				    url:'./json/default.json',
				    data:{},
				    success:function (res) {
						if(res.code == '0'){
							var $data = res;
							if($data.data && $data.data.length>0){
								$data.data.forEach(function(obj){
									Object.assign(obj,{
									});
								})
							}
							var html_product = template('v_every_ghrecord',$data);
							$("#dynamicTbody").html(html_product);
						}else{
							layer.alert(data.message);
						}
				    }
				})
			}
			// 新增操作：表格中添加一行数据
			function addtr(){
				var length = $("#dynamicTable tbody tr").length;
				if (length < show_count) {//点击时候，如果当前的数字小于递增结束的条件
					$("#tab11 tbody tr").clone().appendTo("#dynamicTable tbody"); //在表格后面添加一行
					changeIndex(); //更新行号
				}else{
					layer.alert("显示的条数最多为"+show_count+"条");
					return false;
				}
			}
			// 函数更新索引：新增，删除之后需要更新行号
			function changeIndex() {
				var i = 1;
				$("#dynamicTable tbody tr").each(function() { //循环tab tbody下的tr
					$(this).find("input[name='NO']").val(i++); //更新行号
				});
			}
			// 函数单行操作：删除每一行的数据
			function deltr(opp) {
				var length = $("#dynamicTable tbody tr").length;
				//alert(length);
				if (length <= 1) {
					alert("至少保留一行");
				} else {
					$(opp).parent().parent().remove(); //移除当前行
					changeIndex();
				}
			}
		</script>
	</head>
	<body>
		<div class="fr w100">
			<div class="title_add"><a href="#" id="btn_addtr" onClick="addtr()"><span>新增</span></a></div>
			<div class="content_mm">
				<table border="1" class="table_100 text_align_l" id="tab11" style="display: none">
					<tbody>
						<tr>
							<td><input type="text" name="NO" size="2" value="1" /></td>
							<td>姓名</td>
							<td><input type="text" placeholder="请输入专家姓名" class="expert_inp_w100"></td>
							<td><input type="text" placeholder="请输入所属公司" class="expert_inp_w100"></td>
							<td><input type="text" placeholder="请输入职称职务" class="expert_inp_w100"></td>
							<td><input type="text" placeholder="请输入身份证号" class="expert_inp_w100"></td>
							<td><input type="text" placeholder="请输入手机号" class="expert_inp_w100"></td>
							<td><a href="#" class="td_a_3" id="Button2" onClick="deltr(this)">删除</a></td>
						</tr>
					</tbody>
				</table>
				<table border="1" class="table_100 text_align_l" id="dynamicTable">
					<thead>
						<tr>
							<th width="5%">ID</th>
							<th width="10%">类型</th>
							<th width="10%">姓名</th>
							<th width="15%">所属公司</th>
							<th width="10%">职称职务</th>
							<th width="20%">身份证号</th>
							<th width="20%">手机号</th>
							<th width="10%">操作</th>
						</tr>
					</thead>
					<tbody id="dynamicTbody">
					</tbody>
				</table>
			</div>
		</div>
		<!--下面是无用代码-->
		<div style="display:none">
			<a href="http://www.bootstrapmb.COM">更多前端代码</a>
		</div>
	</body>
</html>

对应的数据为是模拟的，对应的文件为


{
    "code": 0,
    "msg": "",
    "count": 5,
    "data": [
        {
			"NO":1,
			"type":"支付宝",
			"realname":"zcz001",
			"company_name":"公司001",
			"zhichen":"A++",
			"shenfenzheng":"1212121212122112",
			"phone":"138356455455"
        },
        {
        	"NO":2,
        	"type":"微信",
        	"realname":"zcz002",
        	"company_name":"公司002",
        	"zhichen":"B++",
        	"shenfenzheng":"1212121212122222222112",
        	"phone":"138356455456"
        },
        {
        	"NO":3,
        	"type":"线下",
        	"realname":"zcz003",
        	"company_name":"公司003",
        	"zhichen":"C++",
        	"shenfenzheng":"12121212",
        	"phone":"138356455457"
        },
        {
        	"NO":4,
        	"type":"线上",
        	"realname":"zcz004",
        	"company_name":"公司004",
        	"zhichen":"D++",
        	"shenfenzheng":"1212121212112121212",
        	"phone":"138356455458"
        },
        {
        	"NO":5,
        	"type":"大大大",
        	"realname":"zcz005",
        	"company_name":"公司005",
        	"zhichen":"F++",
        	"shenfenzheng":"1212",
        	"phone":"138356455459"
        }
    ]
}

以上就是对应的代码，部分js.css没有，想看整个效果可以去下载对应的资源里面下载，感觉不错的点个赞哦。