精华内容
下载资源
问答
  • 注 : 使用的是静态HTML,只是为了偷个懒,和页面模板渲染效果一样。本文章会不定期更新,如果有什么疑问,可以在下面提出来。如果本篇对你有所帮助,希望可以给个赞。 1. 准备工作 有序的数据 比如下面这些数据...

    注 : 使用的是静态HTML,只是为了偷个懒,和页面模板渲染效果一样。本文章会不定期更新,如果有什么疑问,可以在下面提出来。如果本篇对你有所帮助,希望可以给个赞。

    1. 准备工作

     有序的数据

      比如下面这些数据:

    2. 页面展示

    上面的数据会展示成如下效果:

    3. 页面代码

    原理:

    1. 首先先确定要比较什么,比如我们第一次比较的是地区列,这里肯定是用的for循环和冒泡算法来比较,

    但是下一次,要比较的是行业那一列,所以需要递归去替换要比较的列,用一个参数来保存当前比较的那一列。

    2. 需要一个数组用于保存接下来要比较的列,比较的时候弹出来,比较完之后将该列加入已经比较完成的数组中。

    3. 在每次比较当前列的同时,比较已经完成的列是否一致,一致就将跨行计数+1,否则不做操作。

    说明在下面

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
    		integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" 
    		integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    	</head>
    	<body style="padding-top: 50px;">
    		<div class="container">
    		<table class="table table-bordered">
    			<thead>
    				<th>地区</th>
    				<th>行业</th>
    				<th>行业人数</th>
    				<th>行业男生人数比例</th>
    				<th>行业女生人数比例</th>
    			</thead>
    			<tbody>
    				<tr>
    					<td class="rowSpan_in">上海</td>
    					<td class="rowSpan_merge1">餐饮</td>
    					<td class="rowSpan_merge2">111</td>
    					<td class="rowSpan_merge3">80%</td>
    					<td class="rowSpan_merge4">20%</td>
    				</tr>
    				<tr>
    					<td class="rowSpan_in">上海</td>
    					<td class="rowSpan_merge1">餐饮</td>
    					<td class="rowSpan_merge2">111</td>
    					<td class="rowSpan_merge3">80%</td>
    					<td class="rowSpan_merge4">16%</td>
    					
    				</tr>
    				<tr>
    					<td class="rowSpan_in">上海</td>
    					<td class="rowSpan_merge1">物流</td>
    					<td class="rowSpan_merge2">111</td>
    					<td class="rowSpan_merge3">90%</td>
    					<td class="rowSpan_merge4">10%</td>
    				</tr>
    				<tr>
    					<td class="rowSpan_in">北京</td>
    					<td class="rowSpan_merge1">物流</td>
    					<td class="rowSpan_merge2">222</td>
    					<td class="rowSpan_merge3">90%</td>
    					<td class="rowSpan_merge4">10%</td>
    				</tr>
    				<tr>
    					<td class="rowSpan_in">北京</td>
    					<td class="rowSpan_merge1">IT</td>
    					<td class="rowSpan_merge2">111</td>
    					<td class="rowSpan_merge3">90%</td>
    					<td class="rowSpan_merge4">10%</td>
    				</tr>
    				
    			</tbody>
    			
    			
    		</table>
    		
    		</div>
    	</body>
    	<script>
        /*
            这是一个递归函数
            rowSpanInClass 代表当前要合并的class 列,有多个dom节点,
                            比如第一次递归的值是地区那一列,第二次递归是行业那一列
            rowSpan_merge 代表后续要合并的class,rowSpanInClass变,它就会减少
            beforeClass 代表比较数组,随着递归次数增加,里面的元素个数也会增加,每次个数+1
        */
    	function superRowspan(rowSpanInClass,rowSpan_merge,beforeClass) {
    	    var rowSpanInList = $(rowSpanInClass);
            //遍历需要合并的dom元素,用到冒泡算法
    	    for(var i=0;i<rowSpanInList.length;i++){
    	        var num = 1;
                //遍历需要的合并的dom列
    	        for (var j=i+1;j< rowSpanInList.length;j++){
    	            var rowi = rowSpanInList.eq(i);
    	            var rowj = rowSpanInList.eq(j);
                    //判断当前要合并的class的dom元素的内容是否一致,
    	            if (rowi.text() == rowj.text()) {
    	                var flag = true;
                        //如果一致,就判断前面的比较数组中内容是否一致
    	                for (var m = 0; m < beforeClass.length; m++) {
    	                    var beforei = $(beforeClass[m]).eq(i);
    	                    var beforej = $(beforeClass[m]).eq(j);
                            //如果不一致,就设置标志位,跳出比较数组中的比较
    	                    if (beforei.text() != beforej.text()) {
    	                        flag = false;
    	                        break;
    	                    }
    	                }
                        //如果比较数组都一致,那么就将跨行计数++
    	                if (flag) {
    	                    num++;
                            //因为html中的rowspan是放在第一个元素的属性里面的
                            //j比i大,所以删除j元素,将i元素置为更新跨行
    	                    rowj.addClass("delete_span");
    	                    rowi.addClass("update_span");
    	                    rowi.attr("r", num);
    	                }
    	            }else{
    	                //如果i中途与某个比较不一样,就终止i的比较,并且将i的值置位不一样的值
    	                i = j-1;
    	                break;
    	            }
    	        }
    	    }
            //如果是第一次递归,那么beforeClass的长度一定为1,执行下面操作
    	    if(beforeClass.length == 1){
    	        while(1){
                    //弹出下一个需要合并的class
    	            var shift = rowSpan_merge.shift();
    	            if(shift != undefined) {
                        //如果有,就把它放到比较数组中,进行再次的遍历
    	                beforeClass.push(shift);
    	                superRowspan(shift,rowSpan_merge,beforeClass);
    	            }else{
    	                break;
    	            }
    	        }
    	    }
    	}
    	$(function() {
    		var rowSpan_in = ".rowSpan_in";
    		var rowSpan_merge = [
    			".rowSpan_merge1"
    			,".rowSpan_merge2"
    			,".rowSpan_merge3"
    			,".rowSpan_merge4"
    			,".rowSpan_merge5"
    			,".rowSpan_merge6"
    			,".rowSpan_merge7"
    		];
    
    		superRowspan(rowSpan_in,rowSpan_merge,[rowSpan_in]);
            //当遍历完要合并的元素,就可以把该删除的dom节点删除,
    		$(".delete_span").remove();
            //更新dom元素跨行属性
    		$(".update_span").each(function () {
    			$(this).attr("rowspan",$(this).attr("r"));
    		});
    	});
    
    </script>
    </html>
    

    4. 页面代码说明

     JS代码说明

     HTML 使用说明

     5. 结尾

    PS : 后续更新如何给导出的EXCEL合并单元格,和页面效果一样。

     6.感谢

    感谢大家的提醒!@浮生若梦、为何几欢 @sdh_xlt @qq_88421081

    展开全文
  • HTML设置跨行跨列

    2020-09-13 09:58:58
    rowspan=“2” 属性设置跨行 colspan=“2” 属性设置跨列 (数字根据你需要合并的格数选择) 跨行跨列后需将多出来的单元格删除(Ctrl+x) 下面展示一些 跨行跨列代码片。 <!DOCTYPE html> <html lang="zh_...

    rowspan=“2” 属性设置跨行
    colspan=“2” 属性设置跨列

    (数字根据你需要合并的格数选择)

    跨行跨列后需将多出来的单元格删除(Ctrl+x)

    下面展示一些 跨行跨列代码片

    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
    </head>
    <body>
    <!--     需求1:新建一个五行五列的表格。
        第一行,第一列的单元格要跨两列,
        第二行、第一列的单元格要跨两行,
        第四行第四列的单元格要跨两行两列
    
        colspan  属性设置跨列
        rowspan  属性设置跨列
        -->
    <table width="500" height="500" cellspacing="0" border="1">
        <tr>
            <td colspan="2">1.1</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
        </tr>
        <tr>
            <td rowspan="2">2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
            <td colspan="2" rowspan="2">4.4</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
        </tr>
    </table>
    </body>
    </html>
    

    在这里插入图片描述
    i

    展开全文
  • HTML-表格跨行跨列

    千次阅读 2020-12-07 21:18:25
    HTML-表格跨行跨列 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta ...

    HTML-表格跨行跨列


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>7.表格的跨行跨列</title>
    	</head>
    	<body>
    <!--	需求1:
    			新建一个五行,五列的表格,
    			第一行,第一列的单元格要跨两列,
    			第二行第一列的单元格跨两行,
    			第四行第四列的单元格跨两行两列。
    
    			colspan 属性设置跨列
    			rowspan 属性设置跨行
    			-->
    
    		<table width="500" height="500" cellspacing="0" border="1">
    			<tr>
    				<td colspan="2">1.1</td>
    				<td>1.3</td>
    				<td>1.4</td>
    				<td>1.5</td>
    			</tr>
    			<tr>
    				<td rowspan="2">2.1</td>
    				<td>2.2</td>
    				<td>2.3</td>
    				<td>2.4</td>
    				<td>2.5</td>
    			</tr>
    			<tr>
    				<td>3.2</td>
    				<td>3.3</td>
    				<td>3.4</td>
    				<td>3.5</td>
    			</tr>
    			<tr>
    				<td>4.1</td>
    				<td>4.2</td>
    				<td>4.3</td>
    				<td colspan="2" rowspan="2">4.4</td>
    			</tr>
    			<tr>
    				<td>5.1</td>
    				<td>5.2</td>
    				<td>5.3</td>
    			</tr>
    		</table>
    	</body>
    </html>

     

    展开全文
  • HTML 基础之 跨行跨列

    千次阅读 2018-07-29 21:48:48
    主要是: &lt;!-- rowspan 属性规定单元格可横跨的行数--&gt; &lt;...DOCTYPE html&...html&... 描述:HTML基本的操作之 跨行跨列 --&gt; &lt;head&gt; &lt;...

    主要是: <!-- rowspan 属性规定单元格可横跨的行数-->

    <!DOCTYPE html>
    <html>
    	<!--
    	        作者:三一
    	        时间:2018-07-29
    	        描述:HTML基本的操作之         跨行跨列       
        -->
    
    	<head>
    		<meta charset="utf-8" />
    		<title>跨行与跨列练习</title>
    	</head>
    
    	<!--
    		 cellpadding定义单元格边框与其内容之间的空白;
                     cellspacing定义单元格之间的空白;
                     下面一行可把border和cellpadding删掉。		        
    	-->
    
    	<body>
    		<table align="center" bgcolor="darkgrey" cellspacing="1" border="1" cellpadding="5">
    			<caption>
    				<h2>学习成绩</h2></caption>
    			<tr bgcolor="#FFF">
    				<th>学期</th>
    				<th>姓名</th>
    				<th>java</th>
    				<th>html</th>
    			</tr>
    
    			<!-- rowspan 属性规定单元格可横跨的行数-->
    			<tr bgcolor="aquamarine">
    				<td rowspan="3">大一</td>
    				<!--跨行-->
    				<td>张三</td>
    				<td>91</td>
    				<td>86</td>
    			</tr>
    			<tr bgcolor="blanchedalmond">
    				<td>李四</td>
    				<td colspan="2" align="center">77</td>
    				<!--跨列-->
    			</tr>
    		</table>
    	</body>
    
    </html>

    上图:

    展开全文
  • html中实现table跨行跨列

    千次阅读 2016-07-12 21:16:33
     今天在公司做个打印需求时,被table难住了,网上给的跨行跨列没有能解决我的问题的,于是乎想给基础较差的同行说道说道。  普通的跨行跨列在这里我就不说了,网上一大片!!! 这里要给大家举个相对来讲复杂的...
  • html中的table跨行跨列用法

    千次阅读 2019-04-08 13:12:22
    html中的table跨行跨列用法
  • html表格跨行和跨列

    千次阅读 2019-05-10 16:10:36
    单元格两格:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <...
  • 先确认是跨行合并还是跨列合并 根据单元格先上后下,先左后右来进行合并 如果要合并的单元格有内容则需要先将内容消除 在表格合并前需要明确我们的合并是跨行合并还是跨列合并 一、跨行合并rowspan 在 HTML 中,...
  • 在复杂的表格结构中,有的单元格在水平方向上是跨多个单元格的,这就需要使用跨行属性ROWSPAN。 基本语法 语法解释 VALUE代表单元格跨的行数。 文件范例:10-32.htm 通过ROWSPAN属性实现跨行的单元格。01 <!– ...
  • html的table跨行跨列合并

    千次阅读 2017-03-04 21:37:49
    跨行合并:rowspan 如:rowspan = " 2 " 跨列合并:colspan 如:colspan = " 3
  • HTML表格跨行、跨列操作(rowspan、colspan)

    万次阅读 多人点赞 2018-02-28 16:08:23
    元素的rowspan属性来实现单元格的跨行操作。colspan属性规定单元格可横跨的列数,所有浏览器都支持colspan属性。其取值为number,如下图所示:例如:&lt;table border="1"&gt; &lt;tr&gt...
  • html 代码示范跨行跨列

    千次阅读 2018-07-17 12:57:14
    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table style="withd:600px"...
  • html实现表格的跨行、跨列

    千次阅读 2019-09-24 00:09:40
    <table style="width:240px" border="1"> <tr> <td rowspan="2">... //跨行 <td> 普通单元格</td> </tr> <tr> <td>普通单元格</td> ...
  • 如何跨行学习前端?一个小白的跨行之路~

    万次阅读 多人点赞 2019-04-13 14:55:17
    如何跨行学习前端?一个小白的跨行之路~此篇文章讲述了一个小白跨行学习前端过程遇到的问题,以及是如何解决的。希望此篇文章能够帮助到更多的人。前端小白该如何入门?(先给大家分享**干货**最后在讲故事)*干货分享...
  • HTML 表格跨行与跨列

    万次阅读 2014-05-24 08:54:27
    <table border="1px" width="300px" cellspacing="0" cellpadding="0" bgcolor="red" ><!...--rowspan="3"3 --> 星期一 星期二 星期三 张3 里司 望物 张2 里司2 望物3
  • HTML Table的跨行标签

    千次阅读 2018-06-02 16:46:37
    ; border-bottom-width: 0"bordercolor="#111111" width="90"><tr align="center"><tdstyle="border-bottom-style: none; border-bottom-width: medium"height="25"> 隐藏下边</td></tr>  ...单元格占多少  
  • rowspan是单元格跨行,colspan是单元格跨列。 原则: 1. 第一个tr单元格的colspan总数(如果没有colspan属性就按照colspan=1计数)表示整个table的列的个数(比如第一个tr的colspan总数为3,那么第二个tr里面可以...
  • html表格标签模板 实现跨行和跨列

    千次阅读 2018-05-17 13:02:24
    跨行:rowspan 跨列:colspan 举个栗子: <!DOCTYPE html> < html > < head > head > < body > < table border = "1" > < thead > < tr colspan = "2" > < th colspan = "2...
  • dataGrid 其实就是一个html table,本文将介绍dataGrid 多维表头,表头跨行跨列设计方法需要了解的朋友可以参考下
  • table跨行跨列,字体大小

    千次阅读 2016-05-10 10:31:31
    table跨行跨列,字体大小
  • 本例来自一个小作业,如图所示 重点透析: ...3.跨行操作:colspan=“几行”rowspan="几列"。 4.要保持表格中的每个文字都居中,显然对每个td用align="center"是很费劲的。可以用·css里的<style...
  • 由于要解析html代码,所以我还用了一个第三方的插件jsoup,可以自己百度一下,或者点击这里下载API,免费的。。 html表格的代码是没有格式的,我就不贴了,下面直接给代码1.效果图2.源码 1.TestTable .java ...
  • SED 跨行替换

    千次阅读 2012-05-03 17:02:39
    sed是*nix下方便的行编辑工具,经常用来替换文件的内容,sed一般都是处理单行的,但通过它的一些内建功能,也能实现跨行替换(即要替换的内容有多行内容)。 解决方法主要来自网上搜到的一篇文章,但文中的大侠并...
  • h5表格的跨行跨列

    2017-04-19 16:37:48
    2的单元格 普通单元格 普通单元格
  • Markdown表格(跨行跨列)合并单元格

    千次阅读 2020-09-20 13:14:58
    Markdown不提供单元格合并语法。...跨行合并:rowspan 跨列合并:colspan 合并单元格思想: 将多个内容合并的时候,就会有多余的东西,把它删除。 合并的顺序 先上先左 跨行合并示例: <table> &l
  • 在数据表格中,对于按某个分类展示数据其分类下又有多个细分的嵌套细分项,如省市区昵称,省下面有多个市,市下面有多个区,区下面有昵称,需要实现跨行合并,且操作按钮以分类为单位(即操作按钮需按照分类合并)。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 172,816
精华内容 69,126
关键字:

html跨行