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

Question

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