合并< td> html表的一列中的行 [英] merging <td> rows in one column of html table
问题描述
我有一个要求，如果我在column1的相同的数据，具有相同的id，那么我需要合并这些单元格，并显示其各自的值在column2。
ie，in fiddle http://jsfiddle.net/7t9qkLc0/12/ the 键列具有3行，数据1作为具有相同ID的行值，并且在值列（即AA，BB，CC）中具有对应的不同值。我要合并键列中的3行，并只显示数据1一次，并在值列中的单独行中显示其对应的值。
类似地，对于data4和data5，值是相同的，即FF和键不同，我想在Value列中合并最后2行，并且只显示一次并在键列中显示相应的键。我获得的所有数据将是动态数据。请建议。
请查找小提琴 http://jsfiddle.net/7t9qkLc0/12/ p>
范例HTML代码：
< table width =300pxheight =150pxborder =1>
< tr>< th>键< / th>< th>值< / 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 =3style =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）;
}
函数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
if（i == 0）{
$ row.append（$（< td>）。attr（'rowspan'，len）.html
$ row.append（$（< td>）。html（dict [prop] [i]））;
}
else {
$ row.append（$（< td>）。html（dict [prop] [i]））
}
$ table.append（$ row）;
}
}
$（'div'）。after（$ table）;
}
I have a requirement, if i have same data in column1 of 's with same id then i need to merge those cells and show their respective values in column2. i.e., in fiddle http://jsfiddle.net/7t9qkLc0/12/ the key column have 3rows with data 1 as row value with same id and has corresponding different values in Value column i.e., AA,BB,CC. I want to merge the 3 rows in key Column and display data 1 only once and show their corresponding values in separate rows in value column. Similarly for data4 and data5 the values are same i.e.,FF and keys are different, i want to merge last 2 rows in Value column and dispaly FF only one time and show corresponding keys in key column. All data i'm getting would be the dynamic data. Please suggest. Please find the fiddle http://jsfiddle.net/7t9qkLc0/12/
Sample html code:
<table width="300px" height="150px" border="1">
<tr><th>Key</th><th>Value</th></tr>
<tr>
<td id="1">data 1</td>
<td id="aa">AA</td>
</tr>
<tr>
<td id="1">data 1</td>
<td id="bb">BB</td>
</tr>
<tr>
<td id="1">data 1</td>
<td id="cc">CC</td>
</tr>
<tr>
<td id="2">data 2</td>
<td id="dd">DD</td>
</tr>
<tr>
<td id="2">data 2</td>
<td id="ee">EE</td>
</tr>
<tr>
<td id="3">data 3</td>
<td id="ff">FF</td>
</tr>
<tr>
<td id="4">data 4</td>
<td id="ff">FF</td>
</tr>
<tr>
<td id="5">data 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>
Building on tkounenis' answer using Rowspan:
One option to implement what you need would be to read all the values in your table after being populated, then use a JS object literal as a data structure to figure out what rows/columns are unique.
A JS object literal requires a unique key which you can map values to. After figuring out what rows/columns should be grouped, you can either edit the original table, or hide the original table and create a new table (I'm creating new tables in this example).
I've created an example for you to create a new table either grouped by key or grouped by value. Try to edit the examples provided to introduce both requirements.
Let me know if you need more help. Best of luck.
JSFiddle: http://jsfiddle.net/biz79/x417905v/
JS (uses 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);
}
这篇关于合并< td> html表的一列中的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
