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

我有一个要求，如果我在的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>

最佳答案

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

关于javascript - 在html表的一列中合并<td>行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27109039/