将 <TD> 行合并到 HTML 表的一列中

使用 Rowspan 在 tkounenis 的答案基础上构建：

实现所需内容的一种选择是在填充表后读取表中的所有值，然后使用 JS 对象文本作为数据结构来确定哪些行/列是唯一的。

JS 对象文本需要一个唯一键，您可以将值映射到该键。 确定应该对哪些行/列进行分组后，您可以编辑原始表，也可以隐藏原始表并创建一个新表（在此示例中，我正在创建新表）。

我为您创建了一个示例，用于创建按键分组或按值分组的新表。 尝试编辑提供的示例以介绍这两个要求。

如果您需要更多帮助，请告诉我。 祝你好运。

JSFiddle： http://jsfiddle.net/biz79/x417905v/

JS（使用 jQuery）：

sortByCol(0);
sortByCol(1);
function sortByCol(keyCol) {
    // keyCol = 0 for first col, 1 for 2nd col
    var valCol = (keyCol === 0) ? 1 : 0;
    var $rows = $('#presort tr');
    var dict = {};
    var col1name = $('th').eq(keyCol).html();
    var col2name = $('th').eq(valCol).html();
    for (var i = 0; i < $rows.length; i++) {
        if ($rows.eq(i).children('td').length > 0) {
            var key = $rows.eq(i).children('td').eq(keyCol).html();
            var val = $rows.eq(i).children('td').eq(valCol).html();
            if (key in dict) {
                dict[key].push(val);
            } else {
                dict[key] = [val];
            }
        }
    }
    redrawTable(dict,col1name,col2name);
}

function redrawTable(dict,col1name,col2name) {
    var $table = $('<table>').attr("border",1);
    $table.css( {"width":"300px" } );
    $table.append($('<tr><th>' +col1name+ '</th><th>' +col2name+ '</th>'));
    for (var prop in dict) {
        for (var i = 0, len = dict[prop].length; i< len; i++) {
          var $row = $('<tr>');
          if ( i == 0) {
            $row.append( $("<td>").attr('rowspan',len).html( prop ) );
            $row.append( $("<td>").html( dict[prop][i] ) ); 
          }
          else {
            $row.append( $("<td>").html( dict[prop][i] ) ); 
          }
          $table.append($row);
        }
    }
    $('div').after($table);
}

使用 rowspan 属性，如下所示：

<table width="300px" height="150px" border="1">
    <tr>
        <th>Key</th>
        <th>Value</th>
    </tr>
    <tr>
        <td id="1" rowspan="3">data&nbsp;&nbsp;&nbsp;1</td>
        <td id="aa">AA</td>
    </tr>
    <tr>
        <td id="bb">BB</td>
    </tr>
    <tr>
        <td id="cc">CC</td>
    </tr>
    <tr>
        <td id="2" rowspan="2">data&nbsp;&nbsp;&nbsp;2</td>
        <td id="dd">DD</td>
    </tr>
    <tr>
        <td id="ee">EE</td>
    </tr>
    <tr>
        <td id="3">data&nbsp;&nbsp;&nbsp;3</td>
        <td id="ff">FF</td>
    </tr>
    <tr>
        <td id="4">data&nbsp;&nbsp;&nbsp;4</td>
        <td id="ff">FF</td>
    </tr>
    <tr>
        <td id="5">data&nbsp;&nbsp;&nbsp;5</td>
        <td id="ff">FF</td>
    </tr>
</table>

http://jsfiddle.net/37b793pz/4/

不能多次使用同一 id。为此，请使用数据 ID 属性

.HTML：

<table width="300px" height="150px" border="1">
    <tr>
        <th>Key</th>
        <th>Value</th>
    </tr>
    <tr>
        <td data-id="key1">data&nbsp;&nbsp;&nbsp;1</td>
        <td data-id="valaa">AA</td>
    </tr>
    <tr>
        <td data-id="key1">data&nbsp;&nbsp;&nbsp;1</td>
        <td data-id="valbb">BB</td>
    </tr>
    <tr>
        <td data-id="key1">data&nbsp;&nbsp;&nbsp;1</td>
        <td data-id="valcc">CC</td>
    </tr>
    <tr>
        <td data-id="key2">data&nbsp;&nbsp;&nbsp;2</td>
        <td data-id="valdd">DD</td>
    </tr>
    <tr>
        <td data-id="key2">data&nbsp;&nbsp;&nbsp;2</td>
        <td data-id="valee">EE</td>
    </tr>
    <tr>
        <td data-id="key3">data&nbsp;&nbsp;&nbsp;3</td>
        <td data-id="valff">FF</td>
    </tr>
    <tr>
        <td data-id="key4">data&nbsp;&nbsp;&nbsp;4</td>
        <td data-id="valff">FF</td>
    </tr>
    <tr>
        <td data-id="key5">data&nbsp;&nbsp;&nbsp;5</td>
        <td data-id="valff">FF</td>
    </tr>
</table>
</td>
</tr>
<tr>
    <td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px"></td>
</tr>
</table>

JQ：

//merge cells in key column
function mergerKey() {    
    // prevents the same attribute is used more than once Ip
    var idA = [];
    // finds all cells id column Key
    $('td[data-id^="key"]').each(function () {
        var id = $(this).attr('data-id');
        // prevents the same attribute is used more than once IIp
        if ($.inArray(id, idA) == -1) {
            idA.push(id);
            // finds all cells that have the same data-id attribute
            var $td = $('td[data-id="' + id + '"]');
            //counts the number of cells with the same data-id
            var count = $td.size();
            if (count > 1) {
                //If there is more than one
                //then merging                    
                $td.not(":eq(0)").remove();
                $td.attr('rowspan', count);
            }
        }
    })
}
//similar logic as for mergerKey()
function mergerVal() {
    var idA = [];
    $('td[data-id^="val"]').each(function () {
        var id = $(this).attr('data-id');
        if ($.inArray(id, idA) == -1) {
            idA.push(id);
            var $td = $('td[data-id="' + id + '"]');
            var count = $td.size();
            if (count > 1) {
                $td.not(":eq(0)").remove();
                $td.attr('rowspan', count);
            }
        }
    })
}
mergerKey();
mergerVal();

使用以下 JavaScript 片段。它应该适用于您正在寻找的内容。

<script type="text/javascript">
        function mergeCommonCells(table, columnIndexToMerge){
        	previous = null;
            cellToExtend = null;
            table.find("td:nth-child("+columnIndexToMerge+")").each(function(){
                jthis = $(this);
                content = jthis.text();
                if(previous == content){
                    jthis.remove();
                    if(cellToExtend.attr("rowspan") == undefined){
                        cellToExtend.attr("rowspan", 2);
                    }
                    else{
                        currentrowspan = parseInt(cellToExtend.attr("rowspan"));
                        cellToExtend.attr("rowspan", currentrowspan+1);
                    }
                }
                else{
                    previous = content;
                    cellToExtend = jthis;
                }
            });
        };
        mergeCommonCells($("#tableId"), 1);
    </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>