`
西门吹牛
  • 浏览: 227170 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

[备忘]工作中遇到的一个含rowspan情况table画虚线问题

 
阅读更多
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<style>
table{
 	border-style: solid;
	border-width:medium;
	border-color:black;
	


	
}
td{
 	border-bottom-style:dotted;
	border-bottom-width:medium;
	border-bottom-color:black;
	
	border-right-style:dotted;
	border-right-width:medium;
	border-right-color:black;

	
}
</style>

</head>

<body>
<table  width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#0033CC">
  <tr>
    <td>111</td>
    <td><lable></label></td>
    <td rowspan="4"></td>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td rowspan="3">a</td>
    <td></td>
    <td rowspan="2"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
</body>
</html>
<script >

$(document).ready(function(){
   var trCount=$("table tr").size();

   var i=0;
   $("table tr").each(function(){
  		
  		$(this).find("td").each(function(){
	
			
			var rowspan=$(this).attr("rowspan");

			if((rowspan>1 && (rowspan+i)==trCount)||((i+1)==trCount)){
  				//$(this).css("background","red");
				$(this).css("borderBottom","0");
				//$(this).css({ "margin-left": "10px", "background-color": "blue" });
			}
		});
		i++;

   });
   $("table tr").find("td:last").each(function(){
  		$(this).css("borderRight","0");


   });
   
   $("table td").each(function(){
  		var t=$(this).html();
		//if(t.length==0){
			$(this).append("xx&nbsp;");
			$(this).prepend("&nbsp;oo");
		//}
		
		//alert(t);

   });
   
   
});



</script>


  • 1.rar (75.2 KB)
  • 下载次数: 2
分享到:
评论

相关推荐

    table-rowspan表格自动合并单元格插件

    3. **单元格合并**:在网页开发中,如果需要将多个相邻的单元格合并成一个大单元格,可以使用`rowspan`和`colspan`属性。`colspan`与`rowspan`类似,但作用于列的跨度。合并单元格可以提高表格布局的复杂性和美感。 ...

    jquery.table.rowspan.js 表格自动合并单元格插件

    `jQuery.table.rowspan.js`是一个专为解决表格中单元格自动合并问题的jQuery插件。这个插件允许开发者在前端轻松处理复杂的表格布局,提高用户体验,同时也减轻了服务器端的计算压力。 ### 插件原理 `rowspan`属性...

    jquery table rowspan 表格单元格合并Demo.zip

    首先,`rowspan` 是 HTML 中的一个属性,它用于指定一个单元格(`&lt;td&gt;` 或 `&lt;th&gt;`)应跨行占据的行数。当在表格中设置相同的 `rowspan` 值时,相应的单元格将被合并。例如,如果你有两个单元格都有 `rowspan="2"`,...

    javascript 动态table添加colspan\rowspan 参数的方法

    例如,如果尝试对一个单元格执行`document.tableId.rows[i].cells[j].setAttribute("rowspan", n)`,这种做法并不会生效,因为`setAttribute`方法是为`element`对象定义的,而`element`对象没有`cells`属性。...

    合并table的行

    `rowspan`属性允许一个单元格跨越多行,从而达到合并行的效果。在实际应用中,我们通常需要编写逻辑代码来动态计算哪些行应该被合并,以及合并后的行数。 ### 代码解读与分析 #### 代码片段解析 给定的代码片段...

    table数据相同合并单元格

    table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan 【table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan】

    colspan和rowspan

    如果一个单元格的 `rowspan="3"`,则它会向下延伸并占据三行的位置。这在需要组合多行内容或创建垂直连续区域时非常有效。 下面是一个简单的例子来说明 `colspan` 和 `rowspan` 的使用: ```html &lt;table border="1...

    JS实现动态修改table及合并单元格的方法示例

    `cells`属性则返回一个`HTMLTableCellElement`对象的集合,代表一行中的每个单元格。 例如,代码中的`var rowCount = tabObj.rows.length`获取了表格的行数,`var cellCount = tabObj.rows[0].cells.length`获取了...

    jquery.table.rowspan.js

    jquery.table.rowspan.js

    bootstrap-table导出合并单元格

    在描述中提到的"bootstrap-table导出合并单元格"是该插件的一个高级特性,允许用户在导出表格时,将具有相同内容的单元格进行合并,以提高数据的可读性和美观性。 1. **Bootstrap Table简介** Bootstrap Table是一...

    table合并单元格的多种方法

    例如,一个`td`元素设置`colspan="2"`将合并两列,`rowspan="3"`则合并三行。 ```html &lt;table&gt; 合并两列 &lt;td rowspan="2"&gt;合并两行 正常单元格 正常单元格 &lt;/table&gt; ``` 2. **CSS中的伪元素和负...

    table转div工具

    在提供的压缩包文件"table2css-2.9.0-trial.exe"中,我们可以看到这是一个试用版本的table转div工具,版本号为2.9.0。安装并运行这个工具,用户可以直接导入包含table的HTML文件,然后导出转换后的HTML和CSS文件。在...

    JS 实现Table相同行的单元格自动合并示例代码

    此过程会持续进行,直到遇到一个值与前一行不同的单元格为止。当这种情况发生时,当前的值会被保存到`lastValue`变量中,然后从新行开始重复这个合并过程。 在HTML文档的`&lt;body&gt;`标签中,我们通过`onload`事件...

    HTML用table写的一个网页,纯table源码

    在这个"HTML用table写的一个学校首页"示例中,我们可以学习到如何利用HTML的`&lt;table&gt;`标签来构建一个简单的网页布局,这对于初学者或者刚接触网页设计的人来说是非常有价值的。尽管现代网页设计倾向于使用更灵活的...

    js统计Table单元格实际行列 不用rowSpan colSpan,而用offsetLeft

    每当我们遇到一个新的`offsetLeft`值,这意味着遇到了新的列边界,此时我们可以更新当前列索引。 3. **计算行列位置** 对于每个单元格,我们可以比较其`offsetLeft`值与之前记录的最小`offsetLeft`值。如果`...

    微信小程序实现的绘制table表格功能示例

    本文实例讲述了微信小程序实现的绘制table表格功能。分享给大家供大家参考,具体如下: 表格的绘制 js Page({ data:{ infeed:[', 1周, 2周, 3周, 总计], endwise1: 游泳, tb1:0, tb2:0, tb3:0, tb4:0, endwise2: ...

    通过jquery还原含有rowspan、colspan的table的实现方法

    1. 遍历表格中的每一行(tr)和每一个单元格(td),并且获取每一个单元格的rowspan和colspan属性值。 2. 如果单元格具有rowspan属性,并且值大于1,就需要在该单元格所在行的下方,相应数量的行内,添加具有相同...

    基于Bootstrap table组件实现多层表头的实例代码

    Bootstrap Table是一个功能强大的表格组件,它提供了许多有用的功能,包括多层表头的实现。在本文中,我们将分享基于Bootstrap Table组件实现多层表头的实例代码。 多层表头是指在表格中实现多个层次的表头,每个...

    vue-easytable合并单元格

    创建一个表格通常需要定义列(columns)和数据(data)。列定义了表格的结构,包括列头、宽度等;数据则提供了表格要展示的具体内容。 对于单元格合并,我们可以通过自定义列的渲染函数来实现。在`render`方法中,...

Global site tag (gtag.js) - Google Analytics