Question

我有HTML表，如何使用j-query在特定列上执行行跨度。我想在特定列上排列，如小提琴演示中所示这是Demo

之后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>

我试试这个，但它不起作用

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]);
            }
        }
    }

Answer 1

<强> DEMO FIDDLE

我发现最简单的方法是创建一个2D数组然后反向遍历它。情况就是如此，因为rowspan通过向下推动自己起作用，如果从下面移除匹配元素，那么当超过2个时，您可能无法匹配上面的元素。

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

没有标题表行（可以通过更改初始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();

Answer 2

我已经更新了你的JSFiddle示例：

http://jsfiddle.net/bn9m1p6k/6/

我删除了list参数并将rowspan参数放在data-attribute中。直接应用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);
}

使用jquery的html表的Rowspan

2 个答案: