合并 <td> html表的一列中的行

Question

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

使用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);
}

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代码段。 它应该适合您的外观。

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