Javascript合并表格中具有相同内容单元格示例

效果图:
 
HTML代码:


代码如下:

<!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=utf-8" />
<title>表格相同内容合并</title>
</head>
<body>
合并前：
<table width="400" border="1">
<tr>
<td>a</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>a</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td>3</td>
<td>4</td>
<td>6</td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td>3</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>cc</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td> </td>
</tr>
<tr>
<td>cc</td>
<td>2</td>
<td>3</td>
<td>5</td>
<td>5</td>
<td> </td>
</tr>
<tr>
<td>d</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
<tr>
<td>e</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
</table><br />
合并后：<br />
<table width="400" border="1" id="table1">
<tr>
<td>a</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>a</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td>3</td>
<td>4</td>
<td>6</td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td>3</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>cc</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td> </td>
</tr>
<tr>
<td>cc</td>
<td>2</td>
<td>3</td>
<td>5</td>
<td>5</td>
<td> </td>
</tr>
<tr>
<td>d</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
<tr>
<td>e</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
</table>
</body>
</html>

JS:


代码如下:

<script type="text/javascript">
function mc(tableId, startRow, endRow, col) {
var tb = document.getElementById(tableId);
if (col >= tb.rows[0].cells.length) {
return;
}
if (col == 0) { endRow = tb.rows.length-1; }
for (var i = startRow; i < endRow; i++) {
if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[0].innerHTML) {
tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[0]);
tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
if (i == endRow - 1 && startRow != endRow) {
mc(tableId, startRow, endRow, col + 1);
}
} else {
mc(tableId, startRow, i + 0, col + 1);
startRow = i + 1;
}
}
}
mc('table1',0,0,0);
</script>

赞 (0)

相关推荐

  • javascript合并表格单元格实例代码

    本文为大家介绍了一段来源于网络上的代码实例,能够合并单元格,下面和大家分享一下,希望能够给需要的朋友或多或少带来一定的帮助. 代码实例如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>表格单元格合并代码</title> <script type="text/javascript"> function au

  • JS获取表格内指定单元格html内容的方法

    本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组,然后定位指定的单元格,通过单元格的innerHTML属性获得单元格的html内容 <!DOCTYPE html> <html> <head> <script> function cell() { var x=document.getElementById('myTable').rows[0].cells;

  • JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格内容 <!DOCTYPE html> <html> <head> <script> function changeContent() { var x=document.getElementById('myTable').rows[0].cells; x[0].i

  • JavaScript动态操作表格实例(添加,删除行,列及单元格)

    复制代码 代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>js动态操作表格</title><script language="javascript">function init(){_table=document.getElementByI

  • js生成动态表格并为每个单元格添加单击事件的方法

    html: 复制代码 代码如下: <html> <head> <title>Demo</title> </head> <body> <label style="font-size:20px;width:600px;" >动态表格:</label><br/> <table border="1"> <tbody id="table&qu

  • JS实现向表格行添加新单元格的方法

    本文实例讲述了JS实现向表格行添加新单元格的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以想表格中指定id的行插入新的单元格 <!DOCTYPE html> <html> <head> <script> function insCell() { var x=document.getElementById('tr1').insertCell(0); x.innerHTML="The famous"; } </script&

  • Javascript合并表格中具有相同内容单元格示例

    Javascript合并表格中具有相同内容单元格示例

    效果图:  HTML代码: 复制代码 代码如下: <!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

  • 基于jQuery的合并表格中相同文本的相邻单元格的代码

    ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 00028 红花油               广东 深圳 00028 红花油               广东 深圳 00028 红花油               广东 广州 00027 白花油               广东 广州 00028 红花油               广东 深圳 00028 红花油               广东

  • jquery合并表格中相同文本的相邻单元格

    jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/> <style></style> <script src="js/jquery-2.1.4.min.js"></script> </head> <body>

  • Bootstrap实现的表格合并单元格示例

    Bootstrap实现的表格合并单元格示例

    本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景 利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l

  • JavaScript使用正则表达式获取全部分组内容的方法示例

    JavaScript使用正则表达式获取全部分组内容的方法示例

    本文实例讲述了JavaScript使用正则表达式获取全部分组内容的方法.分享给大家供大家参考,具体如下: 1. 需要使用正则表达式的exec 2. 需要循环 DEMO示例:(如下代码将输出 8 , 9,两个匹配到的分组内容) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS正则demo</title>

  • Python实现删除文件中含“指定内容”的行示例

    本文实例讲述了Python实现删除文件中含指定内容的行.分享给大家供大家参考,具体如下: #!/bin/env python import shutil, sys, os darray = [ "Entering directory", "In function ", "Leaving directory", "__NR_SYSCALL_BASE", "arm-hisiv100-linux-ar ", &q

  • JavaScript简单实现动态改变HTML内容的方法示例

    JavaScript简单实现动态改变HTML内容的方法示例

    本文实例讲述了JavaScript简单实现动态改变HTML内容的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript:改变 HTML 内容</title> <script> function myFunction() { x = document.getElementById(

  • jquery 合并内容相同的单元格(示例代码)

    如下所示: 复制代码 代码如下: function _w_table_rowspan(_w_table_id,_w_table_colnum){        _w_table_firsttd = "";        _w_table_currenttd = "";        _w_table_SpanNum = 0;        _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _

  • 在微信小程序中渲染HTML内容的方法示例

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 后来,小程序增加了「rich-text」组件用于展示富文本内容.然而,这个组件存在一个极

随机推荐