Javascript学习笔记part1(Table单元格相同数据自动合并)

最新推荐文章于 2024-08-13 23:10:15 发布
最新推荐文章于 2024-08-13 23:10:15 发布
阅读量3k 收藏
点赞数
分类专栏： Javascript 文章标签： javascript 合并 数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011859137/article/details/51501857
版权 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表格相同内容合并</title>

    <script type="text/javascript">
        window.onload =function  () {
            var tab=document.getElementById(table1);
            var  maxCol= 6,val, count, start;  //maxCol：合并单元格作用到多少列
            for(var col = maxCol-1; col >= 0 ; col--) {
                count = 1;
                val = "";
                for(var i=0; i<tab.rows.length; i++) {
                    if(val == tab.rows[i].cells[col].innerHTML) {
                        count++;
                    } else {
                        if (count > 1) {
                            //合并
                            start = i - count;
                            tab.rows[start].cells[col].rowSpan = count;
                            for(var j=start+1; j<i; j++) {
                                tab.rows[j].cells[col].style.display = "none";
                            }
                            count = 1;
                        }
                        val = tab.rows[i].cells[col].innerHTML;
                    }
                }

                if(count > 1 ) {
                    //合并，最后几行相同的情况下
                    start = i - count;
                    tab.rows[start].cells[col].rowSpan = count;
                    for(var j=start+1; j<i; j++) {
                        tab.rows[j].cells[col].style.display = "none";
                    }
                }
            }
        };
    </script>

</head>
<body>
合并前：
<table width="400" border="1">
    <tr>
        <td>a</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>a</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>6</td>
    </tr>
    <tr>
        <td>a</td>
        <td>2</td>
        <td>3</td>
        <td>3</td>
        <td>4</td>
        <td> </td>
    </tr>
    <tr>
        <td>b</td>
        <td>3</td>
        <td>4</td>
        <td>6</td>
        <td>7</td>
        <td> </td>
    </tr>
    <tr>
        <td>b</td>
        <td>3</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td> </td>
    </tr>
    <tr>
        <td>cc</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td> </td>
    </tr>
    <tr>
        <td>cc</td>
        <td>2</td>
        <td>3</td>
        <td>5</td>
        <td>5</td>
        <td> </td>
    </tr>
    <tr>
        <td>d</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td> </td>
    </tr>
    <tr>
        <td>e</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td> </td>
    </tr>
</table><br />
合并后：<br />
<table width="400" border="1" id="table1">
    <tr>
        <td>a</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>a</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>6</td>
    </tr>
    <tr>
        <td>a</td>
        <td>2</td>
        <td>3</td>
        <td>3</td>
        <td>4</td>
        <td> </td>
    </tr>
    <tr>
        <td>b</td>
        <td>3</td>
        <td>4</td>
        <td>6</td>
        <td>7</td>
        <td> </td>
    </tr>
    <tr>
        <td>b</td>
        <td>3</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td> </td>
    </tr>
    <tr>
        <td>cc</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td> </td>
    </tr>
    <tr>
        <td>cc</td>
        <td>2</td>
        <td>3</td>
        <td>5</td>
        <td>5</td>
        <td> </td>
    </tr>
    <tr>
        <td>d</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td> </td>
    </tr>
    <tr>
        <td>e</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td> </td>
    </tr>
</table>
</body>
</html>
FeverDestiny
关注
专栏目录
JS TABLE CELL 相同内容 单元格 合并
11-14
Table前端同一列里面内容相同的单元格合并，网上找的存在如下问题： 1、大部分只能合并某一列，不能多列； 2、有些能合并多列的，首列合并后，第二列合并单元格行数不能超过首列合并的单元格行数，虽然第二列值可能相同的行数更多。例如： 首列 第二列 a b c b c b 总之很不满意，花了一晚上时间写了一下，希望能解决大部分类似问题。
table-rowspan表格自动合并单元格插件
11-07
对table表格进行操作，两行根据点击添加 删除按钮 进行单元格的删除 添加 合并单元格。
JS自动合并表格
langzhiwang888的专栏
01-15 262
js合并单元格.html Html代码   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;   &lt;html xmlns="http://www.w3.org/19...
深入探索 ElementUI el-table 行列合并
最新发布
繁依Fanyi的博客
08-13 2058
在前端开发中，数据展示一直是一个重要的部分，而表格则是数据展示最常见的形式之一。ElementUI 是饿了么前端团队推出的一款基于 Vue 的 UI 组件库，其中的 el-table 组件是一个功能强大且灵活的表格组件。今天我们要详细探讨的是 el-table 的行列合并操作。
JS table 表格相同列合并
wpabbs的专栏
08-21 3792
    function   uniteTable(tb,colLength){     //   检查表格是否规整     if   (!checkTable(tb))   return;     var   i=0;     var   j=0;     var   rowCount=tb.rows.length; //   行数     var   colCount=tb.rows[0].c
Javascript合并表格中具有相同内容单元格示例
10-27
如果相同，则将前面单元格的`rowspan`属性值增加，以便将当前单元格与前面单元格合并。这个过程需要对表格中的每一行进行检查和处理，确保所有连续相同内容的单元格都被合并。 在编写JavaScript代码时，需要注意...
vue 中 elment-ui table合并上下两行相同数据单元格
10-15
本文将详细介绍如何在Vue中使用Element-UI的`el-table`组件来合并上下两行相同数据的单元格。 首先，我们需要在HTML模板中设置`el-table`组件。在以下示例中，我们定义了一个表格，包含四个列（项目名称、污染区段...
原生JS实现HTML－ TABLE 自动行合并插件
06-30
类功能描述：该插件生成一个具有行合并的列表数据，合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可，无需后端二次处理数据。 该类以纯原生JS编写，无需引入任何第三方库。 调用方法：...
layui table合并单元格.zip
01-06
"layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先，"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...
JS实现动态修改table及合并单元格的方法示例
10-20
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
jquery.table.rowspan.js 表格自动合并单元格插件
04-15
日常开发中，经常遇到表格里需要自动合并单元格，考虑到写服务器控件比较消耗性能，因些还是把这种工作交给客户端Javascript去做吧，基于习惯用jquery框架，所以封装了一个Jquery插件。
table自动合并相同值得单元格的例子
10-26
一个简单的自动合并相同值单元格的例子，简单易懂
element-UI el-table合并单元格
热门推荐
zhefudexiaojiahuo的博客
10-30 1万+
vue+element-ui 合并单元格，如果id列值一致，则合并。 &lt;el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"&gt;       &lt;el-table-column prop="id" label="ID&qu
js合并table表格中一列合并相同内容的单元格
weixin_43667830的博客
06-04 1677
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="./jquery-1.7.2.min.js" charset="UTF-8"></script> <style> t
js合并同列单元格相同内容
wilL-my的博客
03-12 551
function tableMergeCell(col) { //col可指定列 let tdContent = [] let numbers = 1 let indexs = 0 $('tbody tr').each(function (index, item) { //记入第一行数据 ...
js合并table
qq_42909839的博客
03-26 272
数据先排序 function resetTable(table, colflag){ var trs = $(table).find(“tbody tr”); for(var i = 0; i < trs.length; i++){ var tr = trs[i]; var td = $(tr).find(“td[name=” + colflag + “]”); for(var j = i+1; j < trs.length; j++){ var tdNext = (trs[j]).find(
Javascript合并表格相同内容单元格示例
apollokk的专栏
08-11 8352
效果图: HTML代码: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;...
js实现table同列的合并
prq9110的专栏
01-14 1034
后台传过来list，前端用table展示的时候，合并单元格
JavaScript实现表格相同单元格内容合并
"JavaScript实现表格相同内容单元格合并示例" 在网页开发中，有时我们需要对表格中的单元格进行合并，特别是在数据展示时，如果连续的单元格具有相同的内容，合并可以使得表格更加清晰，减少冗余信息。本示例将介绍...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值