使用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>
    <table id="process" cellpadding="2" cellspacing="0" border="1">
        <thead>
            <tr >
                <td>col0</td>
                <td>col1</td>
                <td>col2</td>
                <td>col3</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>SuZhou</td>
                <td>11111</td>
                <td>22222</td>
                <td>SuZhouCity</td>
            </tr>
            <tr>
                <td>SuZhou</td>
                <td>33333</td>
                <td>44444</td>
                <td>SuZhouCity</td>
            </tr>
            <tr>
                <td>SuZhou</td>
                <td>55555</td>
                <td>66666</td>
                <td>SuZhouCity</td>
            </tr>
            <tr>
                <td>ShangHai</td>
                <td>77777</td>
                <td>88888</td>
                <td>ShangHaiCity</td>
            </tr>
            <tr>
                <td>ShangHai</td>
                <td>uuuuu</td>
                <td>hhhhh</td>
                <td>ShangHaiCity</td>
            </tr>
            <tr>
                <td>ShangHai</td>
                <td>ggggg</td>
                <td>ccccc</td>
                <td>ShangHaiCity</td>
            </tr>
            <tr>
                <td>GuangZhou</td>
                <td>ttttt</td>
                <td>eeeee</td>
                <td>GuangZhouCity</td>
            </tr>
            <tr>
                <td>GuangZhou</td>
                <td>ppppp</td>
                <td>qqqqq</td>
                <td>GuangZhouCity</td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">
//函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格
//参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data
//参数说明:_w_table_colnum 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。
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(" + _w_table_colnum + ")");
    _w_table_Obj.each(function(i){
        if(i==0){
            _w_table_firsttd = $(this);
            _w_table_SpanNum = 1;
        }else{
            _w_table_currenttd = $(this);
            if(_w_table_firsttd.text()==_w_table_currenttd.text()){
                _w_table_SpanNum++;
                _w_table_currenttd.hide(); //remove();
                _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
            }else{
                _w_table_firsttd = $(this);
                _w_table_SpanNum = 1;
            }
        }
    });
}
//函数说明:合并指定表格(表格id为_w_table_id)指定行(行数为_w_table_rownum)的相同文本的相邻单元格
//参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data
//参数说明:_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。
//          如果为数字,则从最左边第一行为1开始算起。
//          "even" 表示偶数行
//          "odd" 表示奇数行
//          "3n+1" 表示的行数为1、4、7、10.......
//参数说明:_w_table_maxcolnum 为指定行中单元格对应的最大列数,列数大于这个数值的单元格将不进行比较合并。
//          此参数可以为空,为空则指定行的所有单元格要进行比较合并。
function _w_table_colspan(_w_table_id,_w_table_rownum,_w_table_maxcolnum){
    if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=0;}
    _w_table_firsttd = "";
    _w_table_currenttd = "";
    _w_table_SpanNum = 0;
    $(_w_table_id + " tr:nth-child(" + _w_table_rownum + ")").each(function(i){
        _w_table_Obj = $(this).children();
        _w_table_Obj.each(function(i){
            if(i==0){
                _w_table_firsttd = $(this);
                _w_table_SpanNum = 1;
            }else if((_w_table_maxcolnum>0)&&(i>_w_table_maxcolnum)){
                return "";
            }else{
                _w_table_currenttd = $(this);
                if(_w_table_firsttd.text()==_w_table_currenttd.text()){
                    _w_table_SpanNum++;
                    _w_table_currenttd.hide(); //remove();
                    _w_table_firsttd.attr("colSpan",_w_table_SpanNum);
                }else{
                    _w_table_firsttd = $(this);
                    _w_table_SpanNum = 1;
                }
            }
        });
    });
}
$(document).ready(function(){
  // _w_table_rowspan("#process",4);
  // _w_table_rowspan("#process",3);
  // _w_table_rowspan("#process",2);
  _w_table_rowspan("#process",1);
 });
    </script>
</body>
</html>

测试使用了一下,很赞!

三、资源链接

文章测试用的代码原创来自:

用jQuery合并表格中相同文本的相邻单元格(一)

用jQuery合并表格中左侧表头同列相同文本的相邻单元格(二)

时间: 07-02

使用jquery合并表格中相同文本的相邻单元格的相关文章

VC/MFC 在ListCtl 控件中随鼠标移动提示单元格信息

[cpp] view plaincopy BEGIN_MESSAGE_MAP(CTipListCtrl, CListCtrl) //{{AFX_MSG_MAP(CTipListCtrl) ON_WM_MOUSEMOVE() ON_WM_DESTROY() //}}AFX_MSG_MAP END_MESSAGE_MAP() ///////////////////////////////////////////////////////////////////////////// // CTipLis

Jquery实现表格中的查看删除修改

首先我们在学习js的时候就有接触到表格中的一些操作,那么Jquery是一个兼容多浏览器的轻量级的javascript库,它的核心理念是写的更少,做的更多. 现在就用学到的Jquery来做一个表格中的查看删除修改感受一下Jquery的强大. 第一步:我们编写html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

jquery在表格中的全选、不选,下面全选,全选勾选中,下面一项没有选,全选勾未选中,并且带出请求值。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery.min.js" ></script> <style> body{ font-family: "微

jquery实现表格中各项的全选

通过表格上下的两个全选checkbox对表格子项的全选!注意使用prop(),而非attr()方法.prop()返回的是标准属性true和false.

jquery获取表格中动态单元格内单选框和多选框的值

1.通过table的Id获取到每行(tr)的元素, $("#table_xuan tr") 如果过滤第一行和最后一行 $("#table_xuan tr:not(:first):not(:last)") 2.通过 each()函数遍历 每一行 $("#table_xuan tr").each(function(i)){ // i 代表的是行数 $(this).children("td").each(function(j)){

jQuery实现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> <title></title> <sc

jQuery获取动态表格中checkbox被选中一行的属性数据

http://www.jianshu.com/p/0ec66caf4c40 jQuery获取表格中checkbox被选中一行的属性数据

在表格中,th scope=&quot;row&quot;和th scope=&quot;col&quot;中的scope属性的用法及意义

把表头和数据联系起来:scope,id,headers属性就我用到现在,很多表格要比上面提供的例子复杂的多.让例子复杂一点,我会移去"Company"表头,并且把第一列的数据移到表头单元格里: <table summary="The number of employees and the foundation year of some imaginary companies."> <caption>Table 1: Company data&

获取table表格指定列的所有单元格的内容

获取table表格指定列的所有单元格的内容:本章节介绍一下如何获取表格指定列的所有单元格的内容,这可能在一些应用或者说扩展应用中会需要.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <titl

javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

jsp页面表格布局Html代码 <body > <center> <input type="text" value="111" id="mytext"> <table border="1" width="60%" id="mytable"> <tr> <td id="td1">第一行第一列<