Question

我有一个要求，如果我在同一个id的第1列中有相同的数据，那么我需要合并这些单元格并在第2列中显示它们各自的值。即，在小提琴http://jsfiddle.net/7t9qkLc0/12/中，键列有3个数据，其中数据1为具有相同ID的行值，并且在值列中具有相应的不同值，即AA，BB ，CC。我想合并键列中的3行并仅显示数据1一次，并在值列的不同行中显示其对应的值。类似地，对于data4和data5，值是相同的，即，FF和键是不同的，我想合并值列中的最后2行，而只显示FF一次，并在键列中显示相应的键。我得到的所有数据都是动态数据。请建议。请找小提琴http://jsfiddle.net/7t9qkLc0/12/

示例HTML代码：

<table width="300px" height="150px" border="1">
<tr><th>Key</th><th>Value</th></tr>                            
<tr>
<td id="1">data&nbsp;&nbsp;&nbsp;1</td>
<td id="aa">AA</td>
</tr>
<tr>
<td id="1">data&nbsp;&nbsp;&nbsp;1</td>
<td id="bb">BB</td>
</tr>
<tr>
<td id="1">data&nbsp;&nbsp;&nbsp;1</td>
<td id="cc">CC</td>
</tr>
<tr>
<td id="2">data&nbsp;&nbsp;&nbsp;2</td>
<td id="dd">DD</td>
</tr>
<tr>
<td id="2">data&nbsp;&nbsp;&nbsp;2</td>
<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>
</td>
</tr>
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">

</td>
</tr>
</table>

Answer 1

建立在tkounenis＆＃39;使用Rowspan回答：

实现所需内容的一个选项是在填充后读取表中的所有值，然后使用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);
}

Answer 2

使用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>

Answer 3

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

不能使用多次相同的ID。为此使用data-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();

Answer 4

使用下面的javascript片段。它应该适合你正在寻找的东西。

＆＃13;

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

＆＃13;

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

＆＃13;

合并html表的一列中的行

4 个答案: