<!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 ");
$(this).prepend(" oo");
//}
//alert(t);
});
});
</script>
分享到:
相关推荐
3. **单元格合并**:在网页开发中,如果需要将多个相邻的单元格合并成一个大单元格,可以使用`rowspan`和`colspan`属性。`colspan`与`rowspan`类似,但作用于列的跨度。合并单元格可以提高表格布局的复杂性和美感。 ...
`jQuery.table.rowspan.js`是一个专为解决表格中单元格自动合并问题的jQuery插件。这个插件允许开发者在前端轻松处理复杂的表格布局,提高用户体验,同时也减轻了服务器端的计算压力。 ### 插件原理 `rowspan`属性...
首先,`rowspan` 是 HTML 中的一个属性,它用于指定一个单元格(`<td>` 或 `<th>`)应跨行占据的行数。当在表格中设置相同的 `rowspan` 值时,相应的单元格将被合并。例如,如果你有两个单元格都有 `rowspan="2"`,...
例如,如果尝试对一个单元格执行`document.tableId.rows[i].cells[j].setAttribute("rowspan", n)`,这种做法并不会生效,因为`setAttribute`方法是为`element`对象定义的,而`element`对象没有`cells`属性。...
`rowspan`属性允许一个单元格跨越多行,从而达到合并行的效果。在实际应用中,我们通常需要编写逻辑代码来动态计算哪些行应该被合并,以及合并后的行数。 ### 代码解读与分析 #### 代码片段解析 给定的代码片段...
table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan 【table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan】
如果一个单元格的 `rowspan="3"`,则它会向下延伸并占据三行的位置。这在需要组合多行内容或创建垂直连续区域时非常有效。 下面是一个简单的例子来说明 `colspan` 和 `rowspan` 的使用: ```html <table border="1...
`cells`属性则返回一个`HTMLTableCellElement`对象的集合,代表一行中的每个单元格。 例如,代码中的`var rowCount = tabObj.rows.length`获取了表格的行数,`var cellCount = tabObj.rows[0].cells.length`获取了...
jquery.table.rowspan.js
在描述中提到的"bootstrap-table导出合并单元格"是该插件的一个高级特性,允许用户在导出表格时,将具有相同内容的单元格进行合并,以提高数据的可读性和美观性。 1. **Bootstrap Table简介** Bootstrap Table是一...
例如,一个`td`元素设置`colspan="2"`将合并两列,`rowspan="3"`则合并三行。 ```html <table> 合并两列 <td rowspan="2">合并两行 正常单元格 正常单元格 </table> ``` 2. **CSS中的伪元素和负...
在提供的压缩包文件"table2css-2.9.0-trial.exe"中,我们可以看到这是一个试用版本的table转div工具,版本号为2.9.0。安装并运行这个工具,用户可以直接导入包含table的HTML文件,然后导出转换后的HTML和CSS文件。在...
此过程会持续进行,直到遇到一个值与前一行不同的单元格为止。当这种情况发生时,当前的值会被保存到`lastValue`变量中,然后从新行开始重复这个合并过程。 在HTML文档的`<body>`标签中,我们通过`onload`事件...
在这个"HTML用table写的一个学校首页"示例中,我们可以学习到如何利用HTML的`<table>`标签来构建一个简单的网页布局,这对于初学者或者刚接触网页设计的人来说是非常有价值的。尽管现代网页设计倾向于使用更灵活的...
每当我们遇到一个新的`offsetLeft`值,这意味着遇到了新的列边界,此时我们可以更新当前列索引。 3. **计算行列位置** 对于每个单元格,我们可以比较其`offsetLeft`值与之前记录的最小`offsetLeft`值。如果`...
本文实例讲述了微信小程序实现的绘制table表格功能。分享给大家供大家参考,具体如下: 表格的绘制 js Page({ data:{ infeed:[', 1周, 2周, 3周, 总计], endwise1: 游泳, tb1:0, tb2:0, tb3:0, tb4:0, endwise2: ...
1. 遍历表格中的每一行(tr)和每一个单元格(td),并且获取每一个单元格的rowspan和colspan属性值。 2. 如果单元格具有rowspan属性,并且值大于1,就需要在该单元格所在行的下方,相应数量的行内,添加具有相同...
Bootstrap Table是一个功能强大的表格组件,它提供了许多有用的功能,包括多层表头的实现。在本文中,我们将分享基于Bootstrap Table组件实现多层表头的实例代码。 多层表头是指在表格中实现多个层次的表头,每个...
创建一个表格通常需要定义列(columns)和数据(data)。列定义了表格的结构,包括列头、宽度等;数据则提供了表格要展示的具体内容。 对于单元格合并,我们可以通过自定义列的渲染函数来实现。在`render`方法中,...