HTML动态为复杂table添加、删除行

最新推荐文章于 2024-05-18 13:50:21 发布

TaoXXing

最新推荐文章于 2024-05-18 13:50:21 发布

阅读量836

点赞数 1

文章标签： javascript js html css jquery

本文链接：https://blog.csdn.net/weixin_43288034/article/details/110196659

版权

HTML动态为复杂table添加、删除行

首先申明一下，我是一个做后台的java开发，但是由于公司工作的调整，我的工作中还是会涉及到前端页面的开发。就在最近的一个业务中，有这样一个需求；如下图：
在这里插入图片描述

看到绩效指标一列后面的操作按钮了吗？没错，我们要做的就是希望用户能根据自己的需求自行添加和删除行，但是这个表格的结构也算是比较复杂的了，对于我一个只会一点点前端技术的人来说，确实还是有点困难的，我也找了公司的前端大佬帮忙，但是他们都嫌太复杂了不肯帮忙。没办法，自己的工作还是得靠自己才行。下面来看看我的解决思路吧。
在这里插入图片描述
不知道我这个层级划分你是否明白是什么意思，我也没有划完，我怕全部画出来反而效果不好，这个意思大概就是从左往右看，根据类型来划分层级，和树状图差不多是一个意思。这样的划分很有利于我们后面的操作，这样才能有更清晰的思路。先来看看关键代码，看看我是如何在代码中分层的。

<table class="performance-table" id="myTable" border="1" cellpadding="0" cellspacing="0">
            <tr class="performance" id="performance">
                <td rowspan="9">绩效指标</td>
                <td>一级指标</td>
                <td class="colum-third">二级指标</td>
                <td class="colum-fourth">三级指标</td>
                <td class="colum-fifth">指标值</td>
                <td>二级指标</td>
                <td class="colum-seven">三级指标</td>
                <td class="colum-eight">指标值</td>
                <td class="last-colum cz">操作</td> 
            </tr>
            <tr class="performance output quantitative" id="quantitative" top="output">
                <td rowspan="4">产出指标</td>
                <td>数量指标</td>
                <td></td>
                <td></td>
                <td>数量指标</td>
                <td></td>
                <td></td>
                <td class="last-colum"><a class="btn-add-1" id="addBtn" onclick="addFun(true)" href="javascript:;" >添加</a></td>
            </tr>
            <tr class="performance output quality" id="quality">
                <td>质量指标</td>
                <td></td>
                <td></td>
                <td>质量指标</td>
                <td></td>
                <td></td>
                <td class="last-colum"><a id="addBtn" href="javascript:;" onclick="addFun(false)">添加</a></td>
            </tr>
            <tr class="performance output timeliness" id="timeliness">
                <td>时效指标</td>
                <td></td>
                <td></td>
                <td>时效指标</td>
                <td></td>
                <td></td>
                <td class="last-colum"><a id="btn-add-3" href="javascript:;" onclick="addFun(false)">添加</a></td>
            </tr>
            <tr class="performance output cost" id="cost">
                <td>成本指标</td>
                <td></td>
                <td></td>
                <td>成本指标</td>
                <td></td>
                <td></td>
                <td class="last-colum"><a id="btn-add-4" href="javascript:;" onclick="addFun(false)">添加</a></td>
            </tr>
            <tr class="performance benefit social-benefit" id="social-benefit"  top="benefit">
                <td rowspan="3">效益指标</td>
                <td>社会效益指标</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>社会效益指标</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="last-colum"><a id="btn-add-5" href="javascript:;" onclick="addFun(true)">添加</a></td>
            </tr>
            <tr class="performance benefit ecological-benefit" id="ecological-benefit">
                <td>生态效益指标</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>生态效益指标</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="last-colum"><a id="btn-add-6" href="javascript:;" onclick="addFun(false)">添加</a></td>
            </tr>
            <tr class="performance benefit sustainable-impact" id="sustainable-impact">
                <td>可持续影响指标</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>可持续影响指标</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="last-colum"><a id="btn-add-7" href="javascript:;" onclick="addFun(false)">添加</a></td>
            </tr>
            <tr class="performance satisfaction customer-satisfaction" id="customer-satisfaction" top="satisfaction">
                <td>满意度指标</td>
                <td>服务对象满意度指标</td>
                <td></td>
                <td></td>
                <td>服务对象满意度指标</td>
                <td></td>
                <td></td>
                <td class="last-colum"><a id="btn-add-8" href="javascript:;"  onclick="addFun(true)">添加</a></td>
            </tr>
        </table>

我是用class来使我的table结构分层级的performance表示该行类型属于绩效指标 output 表示该行类型属于产出指标 quantitative表示该行类型属于数量指标。然后还可以看到某些行还有和class值相同的id和top属性值。说明一下，我用id来区分三级级指标是否在第一个位置。比如：
在这里插入图片描述
上图中红色方框的都是属于在第一行的三级指标。top属性是一个自定义属性，用来帮助我找到二级指标中的第一个指标。如图：

红色方框的就属于是二级指标中的第一个指标。为什么要找到这些指标呢？有没有发现，一级指标是和这些第一个指标是属于一行的。找到第一个三级指标也是一样的道理，因为前面的二级指标又是和第一个三级指标属于同一行的。
现在来看看js代码吧，这里js中用到了jQuery的语法。添加行的方法中会接收一个Boolean类型的参数，这个参数是判断二级指标是否为在第一个，是就传true，不是则传false或者不传。详细解释代码中有，我怕我越说越乱，所以还是需要自己去读一下代码才能明白我的思路。

function addFun(isTop){
		// 得到当前点击操作所在的行，这里用的是原生js绑定点击事件，因此不能用$(this)来直接得到当前点击元素，这里点击的是单元格中的a标签，两次parent就到了tr元素，也就是行。
		let currColumn = $(this.document.activeElement).parent().parent().prevAll().length;
		// 得到当前点击按钮所在行的class所有值
		let classList = $(this.document.activeElement).parent().parent()[0].classList;
		// 三级指标顶部有添加按钮行的id
		let domId = "#" + classList[2]
		// 自定义属性 区分二级指标是否在最顶行
		let topSelect = ("tr[top='"+ classList[1] +"']")
		// 三级指标顶部有添加按钮行的行号
		let topRow = $(domId).prevAll().length;
		// 二级指标的顶部行
		let parentRow = $(topSelect).prevAll().length;
		// 定义要添加的行
		const tr1 = '<tr class="'+classList.value+'"><td></td><td></td><td></td><td></td><td class="last-colum"><a class="btn-rm-1" href="javascript:;" onClick="removeFun()">删除</a></td></tr>'
		// 在指定位置插入行
		$(tr1).insertAfter($(`#myTable tr:eq(${currColumn})`));
		// 获取table
		var columNum = document.getElementById('myTable')
		// 以为绩效指标这一项的行数是固定的  因此这里写死为11行
		columNum.rows[11].cells[0].rowSpan = columNum.rows[11].cells[0].rowSpan+1;
		// 二级指标的顶部行的第一列所占行数加1
		columNum.rows[parentRow].cells[0].rowSpan = columNum.rows[parentRow].cells[0].rowSpan+1;
		if(isTop){// 三级指标在第一个位置
			// 三级指标的顶部行的第二列所占行数加1
			columNum.rows[topRow].cells[1].rowSpan = columNum.rows[topRow].cells[1].rowSpan+1;
			// 三级指标的顶部行的第五列所占行数加1
			columNum.rows[topRow].cells[4].rowSpan = columNum.rows[topRow].cells[4].rowSpan+1;
		}else{
			columNum.rows[topRow].cells[0].rowSpan = columNum.rows[topRow].cells[0].rowSpan+1;
			columNum.rows[topRow].cells[3].rowSpan = columNum.rows[topRow].cells[3].rowSpan+1;
		}
}

下面附上完整代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="add.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="add.js"></script>
</head>
<body>
    <span class="annual-year-add">年度计划-新增</span>
    <form class="content">
        <table class="performance-table" id="myTable" border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td class="colum-first">项目名称</td>
                <td colspan="8">xxxxxxx项目</td>
            </tr>
            <tr>
                <td>单元格</td>
                <td colspan="4"></td>
                <td class="colum-six">单元格</td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td>单元格</td>
                <td colspan="4"></td>
                <td>单元格</td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td>单元格</td>
                <td colspan="4"></td>
                <td>单元格</td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td rowspan="4">单元格</td>
                <td class="colum-second">单元格</td>
                <td colspan="3"></td>
                <td>单元格</td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td>单元格</td>
                <td colspan="3"></td>
                <td>单元格</td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td>单元格</td>
                <td colspan="3"></td>
                <td>单元格</td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td>单元格</td>
                <td colspan="3"></td>
                <td>单元格</td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td>单元格</td>
                <td colspan="8"></td>
            </tr>
            <tr>
                <td rowspan="2">单元格</td>
                <td colspan="4">单元格</td>
                <td colspan="4">单元格</td>
            </tr>
            <tr>
                <td colspan="4"></td>
                <td colspan="4">&nbsp;</td>
            </tr>
            <tr class="performance" id="performance">
                <td rowspan="9">绩效指标</td>
                <td>一级指标</td>
                <td class="colum-third">二级指标</td>
                <td class="colum-fourth">三级指标</td>
                <td class="colum-fifth">指标值</td>
                <td>二级指标</td>
                <td class="colum-seven">三级指标</td>
                <td class="colum-eight">指标值</td>
                <td class="last-colum cz">操作</td> 
            </tr>
            <tr class="performance output quantitative" id="quantitative" top="output">
                <td rowspan="4">产出指标</td>
                <td>数量指标</td>
                <td></td>
                <td></td>
                <td>数量指标</td>
                <td></td>
                <td></td>
                <td class="last-colum"><a class="btn-add-1" id="addBtn" onclick="addFun(true)" href="javascript:;" >添加</a></td>
            </tr>
            <tr class="performance output quality" id="quality">
                <td>质量指标</td>
                <td></td>
                <td></td>
                <td>质量指标</td>
                <td></td>
                <td></td>
                <td class="last-colum"><a id="addBtn" href="javascript:;" onclick="addFun(false)">添加</a></td>
            </tr>
            <tr class="performance output timeliness" id="timeliness">
                <td>时效指标</td>
                <td></td>
                <td></td>
                <td>时效指标</td>
                <td></td>
                <td></td>
                <td class="last-colum"><a id="btn-add-3" href="javascript:;" onclick="addFun(false)">添加</a></td>
            </tr>
            <tr class="performance output cost" id="cost">
                <td>成本指标</td>
                <td></td>
                <td></td>
                <td>成本指标</td>
                <td></td>
                <td></td>
                <td class="last-colum"><a id="btn-add-4" href="javascript:;" onclick="addFun(false)">添加</a></td>
            </tr>
            <tr class="performance benefit social-benefit" id="social-benefit"  top="benefit">
                <td rowspan="3">效益指标</td>
                <td>社会效益指标</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>社会效益指标</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="last-colum"><a id="btn-add-5" href="javascript:;" onclick="addFun(true)">添加</a></td>
            </tr>
            <tr class="performance benefit ecological-benefit" id="ecological-benefit">
                <td>生态效益指标</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>生态效益指标</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="last-colum"><a id="btn-add-6" href="javascript:;" onclick="addFun(false)">添加</a></td>
            </tr>
            <tr class="performance benefit sustainable-impact" id="sustainable-impact">
                <td>可持续影响指标</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>可持续影响指标</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="last-colum"><a id="btn-add-7" href="javascript:;" onclick="addFun(false)">添加</a></td>
            </tr>
            <tr class="performance satisfaction customer-satisfaction" id="customer-satisfaction" top="satisfaction">
                <td>满意度指标</td>
                <td>服务对象满意度指标</td>
                <td></td>
                <td></td>
                <td>服务对象满意度指标</td>
                <td></td>
                <td></td>
                <td class="last-colum"><a id="btn-add-8" href="javascript:;"  onclick="addFun(true)">添加</a></td>
            </tr>
        </table>
        <div class="bottom">
            <button class="tj btn">提交</button>
            <button class="cancel btn">取消</button>
        </div>
    </form>
    
</body>
</html>

CSS

body{
    display: block;
    height: auto;
    width: 1321px;
    margin: 0;
    /* background-color: antiquewhite; */
}
.annual-year-add {
    position: relative;
    margin: 20px;
    top: 10px;
}
h3{
    position: relative;
    top: 30px;
    width: 100%;
    font-family: 'Arial Negreta',
    'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    color: #333333;
    text-align: center;
}
.content{
    width: 100%;
    position: relative;
    top: 35px;
}
.performance-table{
    margin: 0 auto;
    width: 1305px;
    border-collapse:collapse;
}
table,
th,
td {
    padding:0 0 0 4px;
    height: 25px;
    font-family: 'Arial Normal',
    'Arial';
    font-weight: 400;
    border: 1px solid #333;
}
.colum-first{
    width: 130px;
}
.colum-second{
    width: 115px;
}
.colum-third{
    width: 160px;
}
.colum-fourth,
.colum-fifth {
    width: 130px;
}
.colum-six{
    width: 155px;
}
.colum-seven{
    width: 180px;
}
.colum-eight{
    width: 180px;
}
.last-colum{
    text-align: center;
    color: #169BD5;
    font-size: 14px;
    font-family: 'Arial Normal',
    'Arial';
    font-weight: 400;
}
.cz{
    font-size: 16px;
    color:#333
}
.bottom{
    margin: 30px 0;
    text-align: center;
}
.btn{
    cursor: pointer;
    margin-left: 5px;
    width: 88px;
    height: 30px;
    font-size: 13px;
    color: #fff;
    border-radius: 3px;
    box-shadow: none;
    outline: none;
    border: none;
    background: inherit;
    background-color: rgba(22, 155, 213, 1);
}
a{
    text-decoration: none;
    color: #169BD5;
    font-size: 14px;
}

JS

function addFun(isTop){
		// 得到当前点击操作所在的行，这里用的是原生js绑定点击事件，因此不能用$(this)来直接得到当前点击元素，这里点击的是单元格中的a标签，两次parent就到了tr元素，也就是行。
		let currColumn = $(this.document.activeElement).parent().parent().prevAll().length;
		// 得到当前点击按钮所在行的class所有值
		let classList = $(this.document.activeElement).parent().parent()[0].classList;
		// 三级指标顶部有添加按钮行的id
		let domId = "#" + classList[2]
		// 自定义属性 区分二级指标是否在最顶行
		let topSelect = ("tr[top='"+ classList[1] +"']")
		// 三级指标顶部有添加按钮行的行号
		let topRow = $(domId).prevAll().length;
		// 二级指标的顶部行
		let parentRow = $(topSelect).prevAll().length;
		// 定义要添加的行
		const tr1 = '<tr class="'+classList.value+'"><td></td><td></td><td></td><td></td><td class="last-colum"><a class="btn-rm-1" href="javascript:;" onClick="removeFun()">删除</a></td></tr>'
		// 在指定位置插入行
		$(tr1).insertAfter($(`#myTable tr:eq(${currColumn})`));
		// 获取table
		var columNum = document.getElementById('myTable')
		// 以为绩效指标这一项的行数是固定的  因此这里写死为11行
		columNum.rows[11].cells[0].rowSpan = columNum.rows[11].cells[0].rowSpan+1;
		// 二级指标的顶部行的第一列所占行数加1
		columNum.rows[parentRow].cells[0].rowSpan = columNum.rows[parentRow].cells[0].rowSpan+1;
		if(isTop){// 三级指标在第一个位置
			// 三级指标的顶部行的第二列所占行数加1
			columNum.rows[topRow].cells[1].rowSpan = columNum.rows[topRow].cells[1].rowSpan+1;
			// 三级指标的顶部行的第五列所占行数加1
			columNum.rows[topRow].cells[4].rowSpan = columNum.rows[topRow].cells[4].rowSpan+1;
		}else{
			columNum.rows[topRow].cells[0].rowSpan = columNum.rows[topRow].cells[0].rowSpan+1;
			columNum.rows[topRow].cells[3].rowSpan = columNum.rows[topRow].cells[3].rowSpan+1;
		}
		
}

// 删除就是和添加相反的流程就行了
function removeFun(){
	let currColumn = $(this.document.activeElement).parent().parent().prevAll().length;
	let classList = $(this.document.activeElement).parent().parent()[0].classList;
	let domId = "#" + classList[2]
	let topSelect = ("tr[top='"+ classList[1] +"']")
	let topRow = $(domId).prevAll().length;
	let parentRow = $(topSelect).prevAll().length;
	$(`#myTable tr:eq(${currColumn})`).remove();
	var columNum = document.getElementById('myTable')
	columNum.rows[11].cells[0].rowSpan = columNum.rows[11].cells[0].rowSpan-1;
	columNum.rows[parentRow].cells[0].rowSpan = columNum.rows[parentRow].cells[0].rowSpan-1;
	if(domId === '#quantitative' || domId === '#social-benefit' || domId === '#customer-satisfaction'){
		columNum.rows[topRow].cells[1].rowSpan = columNum.rows[topRow].cells[1].rowSpan-1;
		columNum.rows[topRow].cells[4].rowSpan = columNum.rows[topRow].cells[4].rowSpan-1;
	}else{
		columNum.rows[topRow].cells[0].rowSpan = columNum.rows[topRow].cells[0].rowSpan-1;
		columNum.rows[topRow].cells[3].rowSpan = columNum.rows[topRow].cells[3].rowSpan-1;
	}	
}

希望我的方法对你有帮助，如果你有更好的解决思路，欢迎一起分享！

TaoXXing

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML动态为复杂table添加、删除行

HTML动态为复杂table添加、删除行首先申明一下，我是一个做后台的java开发，但是由于公司工作的调整，我的工作中还是会涉及到前端页面的开发。就在最近的一个业务中，有这样一个需求；如下图：看到绩效指标一列后面的操作按钮了吗？没错，我们要做的就是希望用户能根据自己的需求自行添加和删除行，但是这个表格的结构也算是比较复杂的了，对于我一个只会一点点前端技术的人来说，确实还是有点困难的，我也找了公司的前端大佬帮忙，但是他们都嫌太复杂了不肯帮忙。没办法，自己的工作还是得靠自己才行。下面来看看我的解决
复制链接

扫一扫