<!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`获取了...
首先，我们需要一个包含数据的数组。每个元素代表一行数据，可以是对象形式，例如： ```javascript let data = [ { name: '张三', age: 25, city: '北京' }, { name: '李四', age: 30, city: '北京' }, { name: ...
layui 是一个轻量级的前端UI框架，它提供了丰富的组件，包括表格（table）在内，使得开发者可以快速构建美观且功能强大的Web界面。在layui的表格组件中，有时我们需要实现单元格的合并，比如跨行或跨列的合并，以...
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: ...
Bootstrap Table是一个功能强大的表格组件，它提供了许多有用的功能，包括多层表头的实现。在本文中，我们将分享基于Bootstrap Table组件实现多层表头的实例代码。 多层表头是指在表格中实现多个层次的表头，每个...