table 合并单元格

最新推荐文章于 2024-07-09 12:13:23 发布
最新推荐文章于 2024-07-09 12:13:23 发布
阅读量331 收藏
点赞数 1
分类专栏： bootstraptable 文章标签： html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43746297/article/details/120989296
版权

 

<!DOCTYPE html>
<!--<script type="text/javascript" src="../../js/common.js"></script>-->
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<!--<body onload="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>
  <tr>
    <td>美国</td>
    <td>纽约</td>
  </tr>
  <tr>
    <td>美国</td>
    <td>洛杉矶</td>
  </tr>
  <tr>
    <td>英国</td>
    <td>伦敦</td>
  </tr>
</table>
</body>
<script>
	function autoRowSpan(tb, row, col) {
		var lastValue = "";
		var value = "";
		var pos = 1;
		for (var i = row; i < tb.rows.length; i++) {
			value = tb.rows[i].cells[col].innerText;
			if (lastValue == value) {
				tb.rows[i].deleteCell(col);
				tb.rows[i - pos].cells[col].rowSpan = tb.rows[i - pos].cells[col].rowSpan + 1;
				pos++;
			} else {
				lastValue = value;
				pos = 1;
			}
		}
	}
</script>-->
<style type="text/css">
  table
  {
    border-collapse:collapse;

  }

  table, td, th
  {
    border:1px solid black;
    text-align:center;
  }

  input{
    border:0;
  }
</style>
<body>
<form>
  <table id="table1">
    <thead>
    <tr >
      <td rowspan=2 id="listId">number 1</td>
      <td rowspan=2>number 2 </td>
      <td rowspan=2>number 3</td>
      <td colspan=2>number 4</td>
      <td rowspan=2>number 5</td>
      <td colspan=2>number 6</td>
      <td rowspan=2>number 7</td>
    </tr>

<!--    <tr>
      <td>list 1</td>
      <td>list 2</td>
      <td>list 3</td>
      <td>list 4</td>
      <td>list 5</td>
    </tr>-->

    </thead>

    <tbody>
    <tr>
      <td><input type="text" value="12"/></td>
      <td><input type="text" value="item 1"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>

    <tr>
      <td><input type="text" value="12"/></td>
      <td><input type="text" value="item 1"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>
    <tr>
      <td><input type="text" value="12"/></td>
      <td><input type="text" value="item 1"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>

    <tr>
      <td><input type="text" value="12"/></td>
      <td><input type="text" value="item 1"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>
    <tr>
      <td><input type="text" value="12"/></td>
      <td><input type="text" value="item 1"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>

    <tr>
      <td><input type="text" value="12"/></td>
      <td><input type="text" value="item 2"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>
    <tr>
      <td><input type="text" value="12"/></td>
      <td><input type="text" value="item 1"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>

    <tr>
      <td><input type="text" value="12"/></td>
      <td><input type="text" value="item 1"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>

    <tbody>

  </table>


<!--  <input   type="button"     value="merge 1" onclick="merge('table1','0')"/>-->
<!--  <input   type="button"      value="merge 2" onclick="merge('table1','1')"/>-->

</form>
</body>
<script type="text/javascript">
	merge('table1','0')
	function merge(tableId,col){
		var tr = document.getElementById(tableId);
		for(var i=1; i<tr.rows.length; i++){				//表示数据内容的第二行
			if(tr.rows[i].cells[col].innerHTML == tr.rows[i - 1].cells[col].innerHTML){//col代表列
				t = i-1;
				while(tr.rows[i].cells[col].innerHTML == tr.rows[t].cells[col].innerHTML){
					tr.rows[i].cells[col].style.display="none";
					if(tr.rows[t].cells[col].rowSpan <= (i-t)){
						tr.rows[t].cells[col].rowSpan +=1;		//设置前一行的rowspan+1
					}
					i++;
				}
			}
		}
	}
</script>
</html>

weixin_43746297
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
table合并单元格
qq_43033748的博客
08-10 476
【代码】【无标题】
uniapp uni-table表格组件 合并单元格
qq_17627195的博客
04-18 8391
就可以，虽然文档上并没有写这些参数，但是我实际使用后以后，发现这些参数是可以直接用的（我猜测其他的一些参数都是可以用的，但是还没有验证）。这里就放了部分表头的代码。
ElementUI el-table 动态合并单元格
最新发布
hrcsdn13的博客
07-09 510
三、批次与表格数据是双向的，通过批次操作栏操作批次会引起表格数据变化，添加、删除、在表格中修改批次数量也会引起批次操作栏的变化。二、下方是对批次的校验；
动态合并table单元格（行列）
温壁
11-07 6216
//动态合并单元格 function uniteTable(tableId,colLength) {//表格ID，表格列数 var tb=document.getElementById(tableId); tb.style.display=''; var i = 0; var j = 0; var rowCount =...
微信小程序实现的绘制table表格功能示例
01-19
本文实例讲述了微信小程序实现的绘制table表格功能。分享给大家供大家参考，具体如下： 表格的绘制 js Page({ data:{ infeed:[', 1周, 2周, 3周, 总计], endwise1: 游泳, tb1:0, tb2:0, tb3:0, tb4:0, endwise2: 跑步, tc1:0, tc2:0, tc3:0, tc4:0, endwise3: 健身, td1:0, td2:0, td3:0, td4:0, } }) wxml <view class=tle> <view
layui table合并单元格.zip
01-06
"layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先，"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...
vue-easytable合并单元格
05-18
在这个“vue-easytable合并单元格”的主题下，我们将深入探讨如何利用Vue Easytable实现表格中的单元格合并。 在传统的HTML表格中，合并单元格通常使用`<td>`的`colspan`和`rowspan`属性来完成，但在Vue Easytable...
table合并单元格的多种方法
11-20
在表格（Table）设计中，有时我们需要合并单元格来达到特定的展示效果，例如创建标题行或列，或者为了美观和布局对齐。在HTML、CSS以及JavaScript中，都有多种方式可以实现单元格的合并。这里我们将详细探讨六种合并...
table合并单元格与img图片铺满整个td的html
09-28
主要介绍了table合并单元格与img图片铺满整个td的html,需要的朋友可以参考下
table数据相同合并单元格
12-30
table数据相同时合并单元格，原理：逐行进行比较，相同时隐藏第二行，对第一行添加rowspan 【table数据相同时合并单元格，原理：逐行进行比较，相同时隐藏第二行，对第一行添加rowspan】
Html Table 合并单元格
sheinenggaosuwo的专栏
01-10 1万+
版权声明：作者：jiankunking 欢迎转载，未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。 https://blog.csdn.net/xunzaosiyecao/article/details/46953073 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta cha...
微信小程序----简易table表格
热门推荐
人间如梦，倚笑乘风凉。
01-23 6万+
由于需要开发小程序，前端又是自己弄，类似table的标签也没有，后来看到小程序文档中推荐使用flex布局，就把css中的flex布局学了一遍，效果还行，大家将就看一下 table.wxml<view class="table"> <view class="tr bg-w"> <view class="th">head1</view> <view class="th">head2
微信小程序实现一个可以编辑单元格的表格
努力努力再努力
08-08 2万+
最近开发的小程序中，提到了一个需要一张可编辑的表格，固定列可增加行，并且需要可改变任意单元格的内容。 页面布局表格主体采用flex布局来模拟实现。分别用tr和td代表行和每个单元格,由于需要展示的内容较多，所以使用scroll-view来让表格可以 水平滑动。<scroll-view scroll-x style="width: 100%" class="table"> <block wx
CSS合并单元格四种方式：table/display/flex/grid
weixin_43932309的博客
07-12 1万+
CSS合并单元格四种方式：table/display/flex/grid。
表格table及单元格合并
weixin_58280614的博客
04-22 750
表格table 表格常用标签： table:表格 th:表头 tr:表格行 td:单元格数据 注意：boder:1; 给表格加边框。 表格常用CSS样式： boder-collpase:collpase;清除表格间隙 单元格合并 行合并：colspan 列合并：rowspan 合并方法：1看起点 2使用合并 3删除被合并的单元格 例： 表格 1 2 3 4
bootstrapTable通过rowspan/colspan合并单元格
Mart1nn的博客
08-20 1万+
行列数量、名称已经确定 入门版本 <!--数据展现部分--> <table id="table"> </table> <script> $("#table").bootstrapTable({ columns: [ [ {'title': '', 'colspan':2}, {'title': '综合', 'c...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值