用javascript把同一行中内容相同的单元格合并。— — — —即GridView中没有数据时，显示“抱歉，没有数据。”

最新推荐文章于 2023-09-01 00:46:01 发布
最新推荐文章于 2023-09-01 00:46:01 发布
阅读量639 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljxqsqmoliwei/article/details/8595383
版权
    <script type="text/javascript">
        window.onload = function () {
            //获取table表格的id
            var tb = document.getElementById("tab");
            if (!checkTable(tb)) {
                return;
            }
            //为每个单元格命名
            var cells = null;
            for (var i = 0; i < tb.rows.length; i++) {
                for (var j = 0; j < tb.rows[0].cells.length; j++) {
                    tb.rows[i].cells[j].id = i.toString() + "," + j.toString();
                    cells = tb.rows[0].cells.length;
                }
            }
            //初步检查合并
            for (i = 1; i < tb.rows.length; i++) {
                var hang = null;
                for (var j = 1; j < cells; j++) {
                    hang = document.getElementById(i + "," + 0);
                    var s = i + "," + 0;
                    var yuan = document.getElementById(i + "," + j.toString());
                    if (hang.innerText == yuan.innerText) {
                        yuan.parentNode.removeChild(yuan);
                        hang.colSpan++;
                    }
                }
            }
            //功能：检查表格是否规整
            //参数：tb－－需要检查的表格ID
            function checkTable(tb) {
                if (tb.rows.length == 0) return false;
                if (tb.rows[0].cells.length == 0) return false;
                for (var i = 0; i < tb.rows.length; i++) {
                    if (tb.rows[0].cells.length != tb.rows[i].cells.length) return false;
                }
                return true;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table border="1" id="tab">
            <tr>
                <td>
                    编号
                </td>
                <td>
                    姓名
                </td>
                <td>
                    性别
                </td>
                <td>
                    年龄
                </td>
                <td>
                    科目
                </td>
                <td>
                    分数
                </td>
            </tr>
            <tr>
                <!--注意：汉字“高”所在的位置要么所有的“高”前面都加上&nbsp;要么都不加，否则会出现错误。例如：如果在黄色的高前加&nbsp;，则这个单元格不能删除。 -->
                <td style="color: #FF0000; text-align: center;">
                    高
                </td>
                <td style="color: #FFA500;">
                    高
                </td>
                <td style="color: #FFFF00;">
                    高
                </td>
                <td style="color: #008000;">
                    高
                </td>
                <td style="color: #0000FF;">
                    高
                </td>
                <td style="color: #800080;">
                    高
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
莫里薇
关注
专栏目录
Javascript合并表格中具有相同内容单元格示例
10-27
表格相同内容单元格的合并在以前也有过类似的教程，本文为大家讲解的是使用Javascript合并，具体示例及效果图如下，感兴趣的朋友可以参考下
js合并相同内容表格行
bei_fang_du_lang的专栏
07-28 2166
function _w_table_rowspan(_w_table_id,_w_table_colnum){   _w_table_firsttd = "";   _w_table_currenttd = "";   _w_table_SpanNum = 0;   _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_
js合并具有相同内容的单元格，跨行合并!
初生的萌芽
08-19 3067
//放在html   结尾   function autoRowSpan(tab, row, col) {  //保存最后一个值  var lastvalue="";  //与最后一个值做比较  var value="";  //临时变量   var index=1;  //循环获取tab所有的行数  for(var i=row;i //
JS合并相同单元格
最新发布
轻风细雨_林木木
09-01 794
参考：https://blog.csdn.net/Jioho_chen/article/details/84593753。
gridview合并单元格
05-21 678
#region 合并单元格 合并某一行的所有列 public static void GroupRow(GridView gridView) {     for (int rowIndex = gridView.Rows.Count - 2; rowIndex >= 0; rowIndex--)     {        GridViewRow row = gridView.R
ExtJS 4.2 Grid组件单元格合并的方法
10-21
接着，通过一个循环，遍历每一行数据，对指定的列进行比较，如果发现连续两行中的某列相同，则对第一行的对应单元格设置rowspan属性，并隐藏第二行的单元格。 要实现单元格合并的功能，还需要更多的逻辑来处理具体...
javascript 读取XML数据，在页面中展现、编辑、保存的实现
12-11
首先考虑用什么方法做，考虑到三个方式：1、C#拼HTML构造table，修改和保存通过Ajax实现。... 1、实现选择框（通过Ajax读取数据库，绑定数据）的绑定时出现错误，最终发现是在读取XML时使用了异步方式
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
12-09
虽然示例没有直接使用JavaScript，但在某些情况下，可能需要通过JS来实现动态效果，例如在动态加载或异步更新表格内容时。在这种情况下，可以使用JavaScript的事件监听器来绑定`mouseover`和`mouseout`事件，改变行...
asp.net GridView 中增加记录的方法
10-30
1. **创建EmptyDataView**: 当GridView没有数据时，可以通过设置EmptyDataText属性或使用EmptyDataTemplate来显示一个空表格，即tbHeader。这个表格用于显示表头，提供新增功能的字段描述。 2. **定义HTML表格...
jqgrid合并单元格.rar
04-07
1. **合并行**：在jqGrid中，如果某一行的某些单元格具有相同的值，我们可以通过比较这些值并应用特定的CSS类来实现行合并。这通常需要在rowattr函数中进行操作，检查当前行的数据并与前一行对比。当发现连续几行的...
GridView合并单元格
11-13
GridView合并单元格,引合并单元格,实际上是合并数据结构.然后把处理后的数据绑定到GridView控件中.
两个DIV同一行显示
08-28
两个DIV同一行显示。也可以调整样式使其纵向排列。
js动态合并table指定表格列、行
didounie3799的博客
02-22 1069
1.合并指定表格列 /** * @ function：合并指定表格列（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格 * @ param：table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data * @ param：table_colnum 为需要合并单元格的所在列。...
html中两个按钮排成一行,js里两个元素如何排在同一行
weixin_34457338的博客
06-22 2217
js里两个元素怎么排在同一行js里加载了一个谷歌地图，占了左半边屏幕，想在右边加一些按钮链接，但是位置总是要在地图右上或者右下，不能在正右方本来是想左半边显示地图，右边有一竖列几个按钮跳转，求问怎么做------解决方案--------------------------解决方案--------------------htmlPUBLIC"-//W3C//DTDXHTML1.0Trans...
CSS让2个DIV在同一行显示的解决方法
热门推荐
aty
01-16 7万+
在CSS中，div属于块级元素，每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。所以默认情况下，2个div是无法显示在同一行的，必须通过样式属性去修改。   解决方方法1：display:inline，将其变成行级元素，这样2个div就会排在同一行。   解决方法
Echarts.js 主标题与副标题在同一行，主标题前后加图片，icon,标题的文字样式不一样，大小，颜色不一样
qq_45062700的博客
01-20 1982
Echarts.js 主标题与副标题在同一行，主标题前后加图片，icon,标题的文字样式不一样，大小，颜色不一样
如何实现4个<div>在同一行上
若先设计
09-09 6512
这是需要达到的要求，为了达到这个要求，方法如下： 1）创建一个父类控件，可以是，或者是其他控件，这个控件的作用就是规定一个范围，在这个范围中均分4个； 2）创建好父类控件后，此时可以创建4个，比如我创建的父类div是宽和高都是占据100%的空间，此时每个div的宽度就是20%，再给每个加上margin-left=”5%”后，此时我们想要的均分或者是不均分的4个div效果就会出现。
js得到 table中同一行，不同列的控件
weixin_30549657的博客
08-31 249
今天做到一个操作table中的一个控件的时候，要同时触发同一行，不同列的另外一个控件，想着用js应该比较好一点 ： 代码如下： <HTML> <HEAD> <TITLE> New Document </TITLE> <style> tr td { background-color:white; } &l...
关于JS格式化问题(JS都在一行显示)
weixin_44336299的博客
08-11 2863
简单暴力，无需设置 进入 http://tool.chinaz.com/Tools/JsFormat.aspx 将一行js文件格式化为多行。
GridView技巧大全：从分页到数据操作
15. **自动求和、求平均值和小计**：在GridView的最后一行显示数据的总计、平均值等统计信息。 16. **数据导入导出**：将GridView数据导出到Excel，或者从Excel文件读取数据到GridView，提供数据交换的便利。 通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值