300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > js控制table单元格 行 列 相同内容合并

js控制table单元格 行 列 相同内容合并

时间:2020-07-21 04:28:38

相关推荐

js控制table单元格 行 列 相同内容合并

<!DOCTYPE><HTML><HEAD><style></style></HEAD><BODY><TABLE border="1"><thead id="tb" οnclick="findcell()"><TR><TD>国家</TD><TD>国家</TD><TD>国家1</TD></TR><TR><TD>国家555</TD><TD>河南</TD><TD>国家2</TD></TR><TR><TD>中国</TD><TD>四川</TD><TD>国家3</TD></TR><TR><TD>中国</TD><TD>四川</TD><TD>北京4</TD></TR><TR><TD>美国</TD><TD>纽约</TD><TD>国家4</TD></TR><TR><TD>美国</TD><TD>洛杉矶</TD><TD>国家4</TD></TR><TR><TD>英国</TD><TD>英国</TD><TD>国家4</TD></TR></thead><tbody><tr><td>不合并</td><td>不合并</td><TD>不合并</TD></tr></tbody></TABLE><button onclick="SpanGrid('tb')">合并</button></BODY><script>let rowBeginIndexlet colIndex(function () { //定义函数var tr = document.getElementsByTagName("tr");for (var i = 0; i < tr.length; i++) {var tds = tr[i].children;for (var j = 0; j < tds.length; j++) {tds[j].onclick = (function () {var row = i + 1, col = j + 1;return function () {rowBeginIndex = row - 1colIndex = col - 1console.log("第" + row + "行" + col + "列");}})();}}})();// tabObjId id// colIndex 第几列// rowBeginIndex 第几行function SpanGrid(tabObjId) {var tabObj = document.getElementById(tabObjId);if (tabObj != null) {var i, j, m, k, q, w, e, r;var intSpan;var strTemp;m = 0;//这个For循环是合并行console.log('tabObj.rows', tabObj.rows[0].cells)// colIndex 开始遍历列索引// for (colIndex; colIndex < tabObj.rows[0].cells.length; colIndex++) {// 遍历开始行for (i = rowBeginIndex; i < tabObj.rows.length; i++) {intSpan = 1;m++;// 遍历的 第几行第几列strTemp = tabObj.rows[i].cells[colIndex].innerText;for (j = i + 1; j < tabObj.rows.length; j++) {// 和下一行比较如果相同就合并,不同继续遍历if (strTemp == tabObj.rows[j].cells[colIndex].innerText) {intSpan++;tabObj.rows[i].cells[colIndex].rowSpan = intSpan;tabObj.rows[j].cells[colIndex].style.display = "none";}else {break;}}}// }//这个For循环是合并列(无需合并列可删除)for (q = rowBeginIndex; q < tabObj.rows.length; q++) {for (w = 0; w < tabObj.rows[0].cells.length; w++) {intSpan = 1;colspan = tabObj.rows[q].cells[w].rowSpan;strTemp = tabObj.rows[q].cells[w].innerText;if ("none" == tabObj.rows[q].cells[w].style.display) {continue;}for (e = w + 1; e < tabObj.rows[q].cells.length; e++) {if ("none" == tabObj.rows[q].cells[e].style.display) {continue;}colspan1 = tabObj.rows[q].cells[e].rowSpanif (strTemp == tabObj.rows[q].cells[e].innerText && (colspan ==colspan1)) {intSpan++;tabObj.rows[q].cells[w].colSpan = intSpan;tabObj.rows[q].cells[e].style.display = "none";}else {break;}}}break;}i = j - 1;}}</script></HTML>

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