1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > js 实现表格合并单元格

js 实现表格合并单元格

时间:2019-09-19 04:13:40

相关推荐

js 实现表格合并单元格

需求 实现下面的表格效果

代码:

//利用去重原理function table(dom) {var arr = [];var f= document.getElementsByClassName(dom);for (let i = 0; i < f.length; i++) {if (arr.indexOf(f[i].innerHTML) == -1) {arr.push(f[i].innerHTML);var index = i; //index是第一个元素document.getElementsByClassName(dom)[i].style.borderBottom = 0 + "px";} else {document.getElementsByClassName(dom)[i].style.display = "none"; //隐藏重复的元素document.getElementsByClassName(dom)[index].rowSpan += 1; //删去重复的元素,就给第一个元素的rowspan+1}}}table('f1')table('f2')

想合并哪些单元格 直接给他添加对应类名即可

<table class="table table-striped table-sm table1"><thead><tr><th colspan="3">一级指标</th><th>二级指标</th><th>三级指标</th><th>指标说明</th></tr></thead><tbody><tr class="order"><td class="f1" colspan="3">111</td><td>222</td><td>333</td><td>444</td></tr><tr class="order"><td class="f1" colspan="3">111</td><td class="f2">222</td><td>555</td><td>666</td></tr><tr class="order"><td class="f1" colspan="3">111</td><td class="f2">222</td><td>777</td><td>888</td></tr></tbody></table>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。