合并在一张html表中的行

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

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

来源

2014-11-24 user4199704

不能有相同的值多个ID。这两个数字都不是有效的ID。 – PeeHaa 2014-11-24 16:11:16

正如@PeeHaa所说，你不应该在一个文档中使用相同的'ID'多重时间。而是使用class或**数据属性** ..它是'data-id'而不是'id'。 – 2014-11-24 17:00:05

@ user4199704，如果您从数据库获取数据，是否可以修改数据是否作为标记进行渲染/写入？ – 2014-11-24 17:16:30

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

来源

2014-11-24 16:08:48 tkounenis

我在找动态地添加rowspan的javascript，因为我的数据从数据库和id值获得，我也从数据库中获取，并在显示时我不知道有多少元素具有相同的ID @ tkounenis。谢谢。 – user4199704 2014-11-24 16:37:04

我改写了这个问题。除了数据的动态特性之外，他的第二个条件是第二列或值列上的groupby ..所以第二列中的行跨越或多或少需要显示在您的答案中。 – 2014-11-24 16:58:03

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

来源

2014-11-24 20:37:45 Will

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：以下JavaScript代码

//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();

来源

2014-11-24 20:56:39 dm4web

我想要类似的output.But问题在这里是在jQuery的功能，你已经手动检查条件为'td [data-id^=“key”，但对我来说，我不知道什么是关键值我'因为它们是动态的，并从数据库中检索，我的代码会看起来像这样： data1。请建议，谢谢。 @ dm4web – user4199704 2014-11-25 14:14:49

关键词表示属于列键的单元格。在你的情况下，通过添加单词key + object.key – dm4web 2014-11-25 14:25:36

来定义你的数据id。请参阅我的表结构http://jsfiddle.net/37b793pz/5/。不知何故，对齐不正确。我使用了与所建议的相同的jQuery。是div标签导致我的问题，请建议，谢谢。 @ dm4web – user4199704 2014-11-25 15:37:26

使用。它应该适合你正在寻找的东西。

<script type="text/javascript"> 
 
     function mergeCommonCells(table, columnIndexToMerge){ 
 
     \t 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>

来源

2015-05-20 12:02:57

合并​​在一张html表中的行

回答

相关问题

合并在一张html表中的行