js合并表格

最新推荐文章于 2023-03-09 18:37:36 发布
最新推荐文章于 2023-03-09 18:37:36 发布
阅读量912 收藏
点赞数
分类专栏： js相关类 文章标签： border xhtml table html function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwnxwn/article/details/6107374
版权

<!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>JS合并表格</title> 
<style> 
* {  
    font-size:12px  
}  
 
table{ margin-top:5px;}  
 
.table1 {  
    border-collapse:collapse;  
    width:600px;  
    border:1px solid #7A90A8;  
    border-top:3px;  
}  
td {  
padding-left:3px;  
text-align:left;  
}  
 
caption{  
background:#9DACBF;  
font-weight:600;  
padding:4px;  
color:#FFF; }  
</style> 
</head> 
 
<body> 
 
<table id="ii"  border="1" align="center"> 
<caption>
医院分布情况
</caption> 
  <tr> 
    <td>所在区</td> 
    <td>二级医院数量</td> 
    <td>三级医院数量</td> 
    <td>三甲级医院数量</td> 
    <td>四级医院数量</td> 
  </tr> 
  <tr> 
    <td>海淀区</td> 
    <td>15</td> 
    <td>54</td> 
    <td>14</td> 
    <td>8</td> 
  </tr> 
  <tr> 
    <td>海淀区</td> 
    <td>15</td> 
    <td>64</td> 
    <td>36</td> 
    <td>76</td> 
  </tr> 
  <tr> 
    <td>朝阳区</td> 
    <td>5</td> 
    <td>64</td> 
    <td>69</td> 
    <td>76</td> 
  </tr> 
  <tr> 
    <td>朝阳区</td> 
    <td>17</td> 
    <td>54</td> 
    <td>43</td> 
    <td>18</td> 
  </tr> 
  <tr> 
    <td>朝阳区</td> 
    <td>73</td> 
    <td>35</td> 
    <td>43</td> 
    <td>72</td> 
  </tr> 
</table> 
 
 
 
<script type="text/javascript"> 
function tableSpan(tb1)  
{  
 
    for(var i=tb1.rows[0].childNodes.length-1;i>=0;i--)  
    {  
        //行  
        for(var j=tb1.rows.length-1;j>0;j--)  
        {  
            //当前单元格与上一单元格比较  
            if(tb1.rows[j].childNodes[i].innerHTML==tb1.rows[j-1].childNodes[i].innerHTML)  
            {  
                tb1.rows[j-1].childNodes[i].rowSpan += tb1.rows[j].childNodes[i].rowSpan;  
                tb1.rows[j].removeChild(tb1.rows[j].childNodes[i]);  
            }  
        }  
    }  
      
    //合并列  
    //行  
    for(var i=tb1.rows.length-1;i>=0;i--)  
    {   break;//不合并列  
        //列  
        for(var j=tb1.rows[i].childNodes.length-1;j>0;j--)  
        {  
            //当前单元格与左一单元格比较  
            if(tb1.rows[i].childNodes[j].innerHTML==tb1.rows[i].childNodes[j-1].innerHTML)  
            {  
                tb1.rows[i].childNodes[j-1].colSpan += tb1.rows[i].childNodes[j].colSpan;  
                tb1.rows[i].removeChild(tb1.rows[i].childNodes[j]);  
            }  
        }  
    }

}  
tableSpan(ii);  
</script> 
</body> 
</html> 

海蓝树
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java js合并_JS合并单元格
weixin_32791013的博客
02-19 417
在Web中经常需要合并单元格，例如对于下面一个表格:table,table tr th,table tr td {border: 1px solid #0094ff;}表头1表头2表头3表头4列1列2列3列4列1列2列3列4列1列2列3列4表格原来样式:合并的JS方法:(可以作为一个工具方法)1、纵向合并，也就是对同一列的相邻行单元格相同的进行合并/*** 合并单元格(如果结束行传0代表合并所有行...
JS合并表格
08-16
JS合并表格，绝对实用，代码都是自己在项目中运用过的。
js 表格合并
weixin_30580943的博客
08-14 97
1.合并 function autoRowSpan(tbid, row, col) { var tb = document.getElementById(tbid); var lastValue = ""; var value = ""; var pos = 1; for (var i...
【js】表格合并
weixin_37624436的博客
12-08 224
function tableMerge(name, v) { let tr = $(name).find('tr').length; for (let item in v) { let mark = 0; let index = 0; if (tr > 1) { for (let i = 0; i < tr; i.
JS 合并表格（方法一）
静渊
05-01 1418
欢迎讨论 /** * table单元格合并 * 合并规则：要合并的多个td name属性相同，且呈方形连续分布 * @param {string} tableId */ function combineTable(tableId) { var oTbl = document.getElementById(tableId); var allTds = oTbl.get...
JS自动合并表格
langzhiwang888的专栏
01-15 253
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...
js实现表格相同数据合并
07-10
相邻表格相同数据看起来不好看，而且显得冗余，如果将相邻表格的相同数据进行合并处理，不仅看起来美观很多，而且显得更加的专业。
js实现表格动态合并
weixin_52776724的博客
03-09 1773
【代码】js实现表格动态合并。
JS 合并表格
qq_41834408的博客
12-12 1662
【代码】JS 合并表格。
表格行列合并JS
01-09
//函数说明：合并指定表格（表格id为_w_table_id）指定列（列数为_w_table_colnum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data //参数说明：_w_table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。 //函数说明：合并指定表格（表格id为_w_table_id）指定行（行数为_w_table_rownum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ，此参数应为 #data //参数说明：_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。 // 如果为数字，则从最左边第一行为1开始算起。 // "even" 表示偶数行 // "odd" 表示奇数行 // "3n+1" 表示的行数为1、4、7、10....... //参数说明：_w_table_maxcolnum 为指定行中单元格对应的最大列数，列数大于这个数值的单元格将不进行比较合并。 // 此参数可以为空，为空则指定行的所有单元格要进行比较合并。
表格单元格合并js
08-24
前台页面table合并单元格，可以指定合并但愿格的列数。 _w_table_lefttitle_rowspan("#evalAspectTable",1,1); 函数说明：合并指定表格（表格id为_w_table_id）指定列 （行数大于_w_table_mincolnum 小于_w_table_maxcolnum）相同列中的相同文本的相邻单元格 多于一列时，后一列的单元格合并范围不能超过前一列的合并范围。避免出现交错。 参数说明：_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ，此参数应为 #data 参数说明：_w_table_mincolnum 为需要进行比较合并的起始列数。为数字，则从最左边第一行为1开始算起。 此参数可以为空，为空则第一列为起始列。需要注意，如果第一列为序号列，则需要排除此列。 参数说明：_w_table_maxcolnum 为需要进行比较合并的最大列数，列数大于这个数值的单元格将不进行比较合并。 为数字，从最左边第一列为1开始算起。此参数可以为空，为空则同_w_table_mincolnum
js 实现 动态生成包含合并单元格的表格
03-31
js 实现 动态生成包含合并单元格的表格! 值得下载看看!资源免费,大家分享!!
JS：jquery插件表格单元格合并.
weixin_30740581的博客
07-19 98
公司需要用到单元格合并,于是动手封装了一个简单的jquery插件,封装的函数是直接写好转的,请多多提意见看代码是否有优化的地方..... 截图： 代码： /* * mergeTable 0.1 * Copyright (c) 2013 eastday http://eastday.cnblogs.com/ * Date: 2013-07-19 * 使用mergetT...
JS生成表格，合并单元格
weixin_33809981的博客
01-29 245
在网上找了这么多都没有JS生成表格然后JS操作合并单元格的，或者是别人写的太负责了，又不想去理解，所以就自己动手写了个简单点的。 其实代码也不多，思路清晰就基本上可以了。一开始的时候是被colspan蒙了，因为要注意大小写才可以的。看下代码， <html><head><scripttype="text/javascript"&...
【js】动态合并表格
hateson的专栏
10-14 1045
//动态合并表格 //传入参数：tableObj(表格ID); //childNodeIndexs:需要合并的列索引可传多列索引用逗号分割如：（‘0，1，2’表示合并表格的一二三列数据，注意传入索引时必须按照 从前往后的顺序） function setRowSpan(table
JS 合并表格列
空明ZZT
11-28 1093
 /**//** * 合并表格的列 * @param {String} tableId要合并的表格的id * @param {int} fCol开始的列 * @param {int} eCol结束的列 * @return void */function mergCol(tableId, fCol, eCol)...{    var oTable = document.getElementB
js 合并 table 行
raisezhang 的专栏
08-11 3891
Js 合并 table 行 的实现方法 需求如下:   某公司的员工档案，如下,  经理看员工的信息不是很清晰:   姓名 所在学校 毕业时间 张三 小学 2000 张三
js 实现表格合并单元格
qq_35469137的博客
04-15 2887
需求 实现下面的表格效果 代码： //利用去重原理 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.
JavaScript合并表格中两列内容
最新发布
05-20
可以使用JavaScript来合并表格中的两列内容，具体步骤如下： 1. 获取需要合并的表格元素和行数 ```javascript var table = document.getElementById("myTable"); var rows = table.getElementsByTagName("tr")....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值