html中JS动态合并列(支持中文)

最新推荐文章于 2023-12-04 17:00:51 发布

IT_badboys

最新推荐文章于 2023-12-04 17:00:51 发布

阅读量270

点赞数

分类专栏： JavaScript html react集合Antd开发文章标签： html html5 javascript react ant

本文链接：https://blog.csdn.net/admin_CMZ/article/details/120013175

版权

JavaScript 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

react集合Antd开发

1 篇文章 1 订阅

订阅专栏

这是一个HTML页面示例，展示了如何使用JavaScript实现表格中相同内容单元格的动态合并。通过`autoRowSpan`函数，可以检测表格指定列中的重复值，并合并相应行。例子中，当'国家'列有相同的值时，会合并它们所在的行。

摘要由CSDN通过智能技术生成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
function autoRowSpan(tb, row, col) {

let lastValue = '';

let value = '';

let pos = 1;

const listTable = document.getElementById(tb); // 根据table表格id获得要合并的表格

for (let i = row; i < listTable.rows.length; i++) {

value = listTable.rows[i].cells[col].innerText;

if (lastValue === value) {

listTable.rows[i].deleteCell(col);

listTable.rows[i - pos].cells[col].rowSpan = listTable.rows[i - pos].cells[col].rowSpan + 1;

pos++;

} else { lastValue = value; pos = 1; } } }

</SCRIPT>
<BODY οnlοad="autoRowSpan(tb,0,0)">
<TABLE id="tb" border="1">
<THEAD>
<TR >
<TD>国家</TD>
<TD>地区</TD>
</TR>
</THEAD>
<TR>
<TD>中国</TD>
<TD>河南</TD>
</TR>
<TR>
<TD>中国</TD>
<TD>四川</TD>
</TR>
<TR>
<TD>中国</TD>
<TD>北京</TD>
</TR>
<TR>
<TD>美国</TD>
<TD>纽约</TD>
</TR>
<TR>
<TD>美国</TD>
<TD>洛杉矶</TD>
</TR>
<TR>
<TD>英国</TD>
<TD>伦敦</TD>
</TR>
</TABLE>
</BODY>
</HTML>