Javascript 使用jquery实现html表的行跨度

我有一个HTML表，如何使用j-query在特定列上实现行跨度。我想在特定的列上设置行跨度，如fiddle演示中所示 这是

HTML结果之后应该使用jquery

下面是HTML

<p>Before</p>
<table width="200" border="1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>1</td>
    <td>4</td>
    <td>1</td>
    <td>1</td>
    <td>5</td>
  </tr>
  <tr>
    <td>1</td>
    <td>5</td>
    <td>1</td>
    <td>1</td>
    <td>3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
    <td>1</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
  </tr>
  <tr>
    <td>13</td>
    <td>131</td>
    <td>4155</td>
    <td>464</td>
    <td>46</td>
  </tr>
</table>
<p>After Sholud be using jquery (dynamically)</p>

<table width="200" border="1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td rowspan="2">1</td>
    <td>4</td>
    <td rowspan="2">1</td>

    <td rowspan="2">1</td> <td>5</td>
  </tr>
  <tr>
    <td>5</td>
    <td>3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
    <td>1</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
  </tr>
  <tr>
    <td>13</td>
    <td>131</td>
    <td>4155</td>
    <td>464</td>
    <td>46</td>
  </tr>
</table> 

之前

1.
2.
3.
4.
5.
1.
4.
1.
1.
5.
1.
5.
1.
1.
3.
3.
3.
1.
6.
7.
12
13
14
15
16
13
131
4155
464
46
Sholud之后可以使用jquery（动态）

1.
2.
3.
4.
5.
1.
4.
1.
1 5
5.
3.
3.
3.
1.
6.
7.
12
13
14
15
16
13
131
4155
464
46

我试过这个，但不起作用

groupTable($('#gvSearchRecord tr:has(td)'), 2,2);
                    $('#gvSearchRecord .deleted').remove();

function groupTable($rows, startIndex, total) {
        if (total === 0) {
            return;
        }

        var i, currentIndex = startIndex, count = 1, lst = [];
        var tds = $rows.find('td:eq(' + currentIndex + ')');
        var ctrl = $(tds[0]);
        lst.push($rows[0]);
        for (i = 1; i <= tds.length; i++) {
            if (ctrl.text() == $(tds[i]).text()) {
                count++;
                $(tds[i]).addClass('deleted');
                lst.push($rows[i]);
            }
            else {
                if (count > 1) {
                    ctrl.attr('rowspan', count);
                    groupTable($(lst), startIndex + 1, total - 1)
                }
                count = 1;
                lst = [];
                ctrl = $(tds[i]);
                lst.push($rows[i]);
            }
        }
    }

groupTable（$（'gvsearchRecordtr:has（td）），2,2；
$（'#gvSearchRecord.deleted'）.remove（）；
函数groupTable（$rows，startIndex，total）{
如果（总计===0）{
回来
}
var i，currentIndex=startIndex，count=1，lst=[]；
var-tds=$rows.find（'td:eq（'+currentIndex+'））；
var ctrl=$（tds[0]）；
lst.push（$rows[0]）；
对于（i=1；i 1）{
ctrl.attr（'rowspan'，count）；
groupTable（$（lst），startIndex+1，总计-1）
}
计数=1；
lst=[]；
ctrl=$（tds[i]）；
第一次推送（$rows[i]）；
}
}
}

我发现的最简单的方法是创建一个二维数组，然后反向遍历它。这种情况是这样的，因为

rowspan

是通过向下推动自身来工作的，如果您从下面移除匹配的元素，那么当两个以上的元素相互重叠时，您将很难匹配到上面的元素

您的代码和我的代码都假设：

没有标题表行（可以通过更改初始

processArray

元素分配选择器来修复）

没有单元格具有

colspan

（如果不是这种情况，我将愉快地重新检查我的代码）

JS

var processArray = [];

// make things easier to traverse in reverse by first creating a 2D array of the table
$('#before tr').each(function(i){
    var processRow = [];
    $(this).find('td').each(function(){
        processRow.push($(this));
    });
    processArray.push(processRow);
});

function computeDuplicates(){
    // we are starting at the last row and working up to row 2
    // we dont need to look at the first row, as we're looking at it from the row below
    for(var x = processArray.length - 1; x > 0 ; x--){
        for(var y = 0; y < processArray[x].length; y++){
            if(processArray[x][y].text() == processArray[x-1][y].text()){ //if the cell above has the same text as the current cell
                var currentRowSpan = processArray[x][y].attr('rowspan'); // get the current cell rowspan
                if(typeof currentRowSpan == "undefined"){ // no rowspan found on current cell
                    currentRowSpan = 2; // set default of 2
                }else{
                    currentRowSpan = parseInt(currentRowSpan, 10) + 1; // increase by 1
                }
                // apply currentRowSpan to above cell and delete current cell
                processArray[x-1][y].attr('rowspan', currentRowSpan);
                processArray[x][y].remove();
            }
        }
    }
    processArray = []; // remove from memory
}

computeDuplicates();

var processArray=[]；
//通过首先创建表的2D数组，使反向遍历更容易
$（'#在tr'之前）。每个（函数（i）{
var processRow=[]；
$（this）.find（'td'）.each（function（）{
processRow.push（$（this））；
});
push（processRow）；
});
函数ComputedDuplicates（）{
//我们从最后一排开始，一直到第二排
//我们不需要看第一行，因为我们是从下一行看的
对于（var x=processArray.length-1；x>0；x--）{
对于（变量y=0；y

我已经更新了您的JSFIDLE示例：

我已经删除了list参数，并将rowspan参数放在了数据属性中。 直接应用rowspan时，表会更改，并且以下检查不正确。 在遍历所有单元格后，将同时应用delete和rowspan。 这是完整的代码：

groupTable($('#gvSearchRecord tr:has(td)'), 0,5);
$('#gvSearchRecord .deleted').remove();
$('#gvSearchRecord td[data-rowspan]').each(function(){
    $(this).attr('rowspan', $(this).attr('data-rowspan'));
});

function groupTable($rows, startIndex, total) {
    if (total === 0) {
        return;
    }

    var i, currentIndex = startIndex, count = 1, lst = [];
    var tds = $rows.find('td:eq(' + currentIndex + ')');
    var ctrl = $(tds[0]);
    for (i = 1; i < tds.length; i++) {
        if (ctrl.text() == $(tds[i]).text()) {
            count++;
            $(tds[i]).addClass('deleted');
        }
        else {
            if (count > 1) {
                ctrl.attr('data-rowspan', count);
            }
            count = 1;
            //lst = [];
            ctrl = $(tds[i]);
            //lst.push($rows[i]);
        }
    }
    groupTable($rows, startIndex + 1, total - 1);
}

groupTable（$（'gvsearchRecordtr:has（td）），0,5；
$（'#gvSearchRecord.deleted'）.remove（）；
$（“#gvSearchRecord td[data rowspan]”）。每个（函数（）{
$（this.attr（'rowspan'，$（this.attr（'data-rowspan'））；
});
函数groupTable（$rows，startIndex，total）{
如果（总计===0）{
回来
}
var i，currentIndex=startIndex，count=1，lst=[]；
var-tds=$rows.find（'td:eq（'+currentIndex+'））；
var ctrl=$（tds[0]）；
对于（i=1；i1）{
ctrl.attr（'data-rowspan'，count）；
}
计数=1；
//lst=[]；
ctrl=$（tds[i]）；
//第一次推送（$rows[i]）；
}
}
groupTable（$rows，startIndex+1，total-1）；
}

是否使用JQuery呈现此表？否，我希望使用JQuery获得行span，表已使用JQuery创建，但如果找到相同的记录，则应存在行span。这是我的要求，我尝试了此逻辑，但它不起作用。您确定哪些表单元格应被span'ed的标准是什么？如果在多行中找到相同的记录，则记录是sorted@dadyHawk，如果我理解你想做什么..这看起来像after的正确示例吗？@dadyHawk你能解释一下，如果它提供了正确的输出，这不是一个解决方案吗？我只想在行具有相同值的情况下使用行跨度..在这个示例中，只有行2和行3应该合并，合并应该基于列否1、3和4，如果这些列的行相同，则会出现合并，否则会出现错误not@dadyHawk查看原始表格..在第3列中，一行中有3个'1'。在结果中，只有'2'列高..在第2行中，您在所需的输出中按错误的顺序放置了'rowspan'，但只有第二行和第三行应为row span，因为第四行数据在第1列中更改，所以您只需要有限数量的ro