Javascript 将行合并到html表的一列中
我有一个要求，如果在的第1列中有相同id的相同数据，那么我需要合并这些单元格，并在第2列中显示它们各自的值。 i、 例如，在fiddle中，键列有3行，其中数据1作为具有相同id的行值，并且在值列中有相应的不同值，即AA、BB、CC。我想合并键列中的3行，只显示数据1一次，并在值列中的单独行中显示它们对应的值。 类似地，对于data4和data5，值是相同的，即FF和键是不同的，我想合并Value列中的最后2行，并只显示FF一次，并在key列中显示相应的键。我得到的所有数据都是动态数据。请建议。 请找到小提琴 示例html代码：Javascript 将行合并到html表的一列中,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个要求，如果在的第1列中有相同id的相同数据，那么我需要合并这些单元格，并在第2列中显示它们各自的值。 i、 例如，在fiddle中，键列有3行，其中数据1作为具有相同id的行值，并且在值列中有相应的不同值，即AA、BB、CC。我想合并键列中的3行，只显示数据1一次，并在值列中的单独行中显示它们对应的值。 类似地，对于data4和data5，值是相同的，即FF和键是不同的，我想合并Value列中的最后2行，并只显示FF一次，并在key列中显示相应的键。我得到的所有数据都是动态数据。请建议。
<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>
基于Tkouneis的回答，使用Rowspan： 实现所需功能的一个选项是在填充表后读取表中的所有值，然后使用JS对象文本作为数据结构来确定哪些行/列是唯一的 JS对象文本需要一个可以将值映射到的唯一键。在弄清楚应该对哪些行/列进行分组后，您可以编辑原始表，或者隐藏原始表并创建新表。在本例中，我正在创建新表 我为您创建了一个示例，用于创建按键分组或按值分组的新表。尝试编辑提供的示例以介绍这两种需求 如果你需要更多的帮助，请告诉我。祝你好运 JSFiddle： 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);
}
基于Tkouneis的回答，使用Rowspan： 实现所需功能的一个选项是在填充表后读取表中的所有值，然后使用JS对象文本作为数据结构来确定哪些行/列是唯一的 JS对象文本需要一个可以将值映射到的唯一键。在弄清楚应该对哪些行/列进行分组后，您可以编辑原始表，或者隐藏原始表并创建新表。在本例中，我正在创建新表 我为您创建了一个示例，用于创建按键分组或按值分组的新表。尝试编辑提供的示例以介绍这两种需求 如果你需要更多的帮助，请告诉我。祝你好运 JSFiddle： 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代码片段。它应该适合你所看到的 函数mergeCommonCellstable，ColumnIndexItem{ previous=null； cellToExtend=null； table.findtd:n个子项+ColumnIndexItemge+.eachfunction{ jthis=$this； content=jthis.text； ifprevious==内容{ jthis.remove； ifcellToExtend.attrowspan==未定义{ cellToExtend.attrowspan，2； } 否则{ currentrowspan=parseIntcellToExtend.attrrowspan； cellToExtend.attrrowspan，currentrowspan+1； } } 否则{ 先前=内容； cellToExtend=jthis； } }; }; mergeCommonCells$tableId，1；
使用下面的javascript代码片段。它应该适合你所看到的 函数mergeCommonCellstable，ColumnIndexItem{ previous=null； cellToExtend=null； table.findtd:n个子项+ColumnIndexItemge+.eachfunction{ jthis=$this； content=jthis.text； ifprevious==内容{ jthis.remove； ifcellToExtend.attrowspan==未定义{ cellToExtend.attrowspan，2； } 否则{ currentrowspan=parseIntcellToExtend.attrrowspan； cellToExtend.attrrowspan，currentrowspan+1； } } 埃尔 硒{ 先前=内容； cellToExtend=jthis； } }; }; mergeCommonCells$tableId，1；
不能有多个具有相同值的ID。这两个数字都不是有效的id。正如@PeeHaa所说，您不应该在文档中多次使用相同的id。而是使用类或数据属性。。哪个是数据id而不是id。@user4199704，如果您是从数据库获取数据，那么您是否能够首先修改数据是否作为标记呈现/写入？如果是，解决方案可能会截然不同，为了将数据写入JSON对象并从该数据创建表，最好通过修改表来修改DOM。不能有多个ID具有相同的值。这两个数字都不是有效的id。正如@PeeHaa所说，您不应该在文档中多次使用相同的id。而是使用类或数据属性。。哪个是数据id而不是id。@user4199704，如果您是从数据库获取数据，那么您是否能够首先修改数据是否作为标记呈现/写入？如果是，解决方案可能会截然不同，为了将数据写入JSON对象并从该数据创建表，最好通过修改表来修改DOM，因为我的数据是从数据库获取的，id值也是从数据库获取的，在显示时，我不知道有多少元素具有相同的id。@tkouneis。谢谢。我重新措辞了这个问题。除了数据的动态特性外，他的第二个条件是第二列或值列上的groupby。。因此，第二列上的行范围或多或少需要在您的答案中显示。我正在寻找javascript，它可以动态添加行范围，因为我的数据来自数据库，id值也来自数据库，在显示时，我不知道有多少元素具有相同的id。@tkounenis。谢谢。我重新措辞了这个问题。除了数据的动态特性外，他的第二个条件是第二列或值列上的groupby。。因此，第二列上的行范围或多或少需要在您的答案中显示。我需要类似的输出。但这里的问题是，在jquery函数中，您已经手动检查了条件“td”[data id^=key，但对于我来说，我不知道我得到的键值是什么，因为它们是动态的，并且是从数据库中检索的，我的代码看起来像：data1。请建议，谢谢。@dm4webkey word表示单元格属于列键。在您的情况下，通过添加单词key+object.key来定义数据id。请查看我的表结构中。不知何故，对齐方式不正确。我使用了与建议相同的jquery。div标记是否导致问题，请建议，谢谢。@DM4WEB问题是具有相同数据id的单元格没有分组。您有一个数据id=key13 data id=key12 data id=key11 data id=key13 data id=key12。要合并rkey，应该像例如：data id=key13 data id=key13 data id=key11 data id=key12 data id=key12。有两种解决方案：1.更改打印表行的顺序。2.要使用Jquery对行进行排序，然后调用mergerkei，我希望得到类似的输出。但这里的问题是，在Jquery函数中，您已经手动检查了条件“td”[data id^=key，但对于我来说，我不知道我得到的键值是什么，因为它们是动态的，并且是从数据库中检索的，我的代码看起来像：data1。请建议，谢谢。@dm4webkey word表示单元格属于列键。在您的情况下，通过添加单词key+object.key来定义数据id。请查看我的表结构中。不知何故，对齐方式不正确。我使用了与建议相同的jquery。div标记是否导致问题，请建议，谢谢。@DM4WEB问题是具有相同数据id的单元格没有分组。您有一个数据id=key13 data id=key12 data id=key11 data id=key13 data id=key12。要合并rkey，应该像例如：data id=key13 data id=key13 data id=key11 data id=key12 data id=key12。有两种解决方案：1.更改打印表行的顺序。2.使用Jquery对行进行排序，然后调用mergerkey
//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();