使用jQuery合并相等的表格单元格 [英] Merge equal table cells with jQuery
问题描述
具有NxM值的简单html表。
目的是将列中的等同单元格与jQuery进行合并。
请注意，在一行中没有重复。
我有如何隐藏相等的单元格，但是有没有办法将单元格与数据组合一个空单元格在一个？
html：
table border =1id =testTable>
< tr>
< td>首先< / td>
< td> A< / td>
< td> A< / td>
< / tr>
< tr>
< td>首先< / td>
< td> A< / td>
< td> B< / td>
< / tr>
< tr>
< td> Second< / td>
< td> V< / td>
< td> S< / td>
< / tr>
< tr>
< td>第三< / td>
< td> D< / td>
< td> H< / td>
< / tr>
< tr>
< td>第三< / td>
< td> E< / td>
< td> E< / td>
< / tr>
< / table>
js：
code> var seenArray = {};
$（'＃testTable td'）。each（function（）
{
var index = $（this）.index（）;
var txt = $ .text（）;
if（seenArray [index] === txt）
{
$（this）.text（''）; //我认为这里应该是margin
}
else
{
seenArray [index] = txt;
}
}）;
PS c $ c> .parseJSON（）首先将数据放在表中，使用：
for（var i = 0; i
tr = $（'< tr />'）;
tr.append（< td>+ obj [i] ['columnA'] +< / td>）;
tr.append（< td>+ obj [i] ['columnB'] +< / td>）;
tr.append（< td>+ obj [i] ['columnC'] +< / td>）;
$（'＃testTable'）。append（tr）;
}
UPD
alFReD NSH 为2个单元格做了一个很好的解决方案。 这里是他的解决方案。
但是，如果将有超过2个相等的单元格。
如果我在这里得到你的意思，我编辑过的版本： http://jsfiddle.net/djhU7/4/
所以，而不是 $（this）.text（''）我这样做：
（pre>
$（$ this.parent（）。prev（）。children（）[index]）。attr（'rowspan'，2）;
$ this.hide（）;
我做了什么，是我设置了 rowspan 的第一个单元格。2.此属性将指示单元格延伸多少行。这将使上述单元格更大一倍，并且我隐藏了重复信息的单元格，以便额外的单元格将消失。请注意，删除单元格将破坏下一个单元格的索引检查。这是一个简单而肮脏的解决方案，但 c $ c> rowspan 属性必须在某处实现。
另一个版本，在将单元格插入表格时设置rowspan，除了它与3个重复单元格一起使用的事实之外，它也更快，因为它避免了表的重新呈现（尽管可以优化更多，但是我不认为在这一刻你想关心它，过早的优化是所有邪恶的根源！）： http://jsfiddle.net/g7uY9/1/
for（var i = 0; i< ; obj.length; i ++）{
tr = $（'< tr />'）;
addColumn（tr，'columnA'，i）;
addColumn（tr，'columnB'，i）;
addColumn（tr，'columnC'，i）;
$（'＃testTable'）。append（tr）;
}
function addColumn（tr，column，i）{
var row = obj [i]，
prevRow = obj [i - 1 ]，
td = $（'< td>'+ row [column] +'< / td>'）;
if（prevRow&& row [column] === prevRow [column]）{
td.hide（）;
} else {
var rowspan = 1;对于（var j = i; j< obj.length - 1; j ++）{
if（obj [j] [column] === obj [j + 1] [column]）的
rowspan ++;
} else {
break;
}
}
td.attr（'rowspan'，rowspan）;
}
tr.append（td）;
}
Simple html table with NxM values. The aim is to merge equal cells in column with jQuery. Note, that in one row there are no duplicates.
I got how to hide the equal cells, but is there any way to combine a cell with data with an empty cell in one?
html:
<table border="1" id="testTable">
<tr>
<td>First</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>First</td>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>Second</td>
<td>V</td>
<td>S</td>
</tr>
<tr>
<td>Third</td>
<td>D</td>
<td>H</td>
</tr>
<tr>
<td>Third</td>
<td>E</td>
<td>E</td>
</tr>
</table>
js:
var seenArray = {};
$('#testTable td').each(function()
{
var index = $(this).index();
var txt = $(this).text();
if (seenArray[index] === txt)
{
$(this).text(''); //I think here should be "marging"
}
else
{
seenArray[index] = txt;
}
});
P.S. One more thing, the data originally is retrieved in json array, then I do .parseJSON() first and put data in table using:
for (var i = 0; i < obj.length; i++)
{
tr = $('<tr/>');
tr.append("<td>" + obj[i]['columnA'] + "</td>");
tr.append("<td>" + obj[i]['columnB'] + "</td>");
tr.append("<td>" + obj[i]['columnC'] + "</td>");
$('#testTable').append(tr);
}
UPD
alFReD NSH made a good solution for 2 cells. Here is his solution. But, if there will be more than 2 equal cells.
If I get what you mean here, this my edited version: http://jsfiddle.net/djhU7/4/
So instead of $(this).text('') I did this:
$($this.parent().prev().children()[index]).attr('rowspan', 2);
$this.hide();
What I did, was the I set the rowspan of first cell to 2. This attribute "will indicates for how many rows the cell extends." which will make the above cell twice bigger, and I hid the cell with the duplicate information so the extra cell will go away. Note that removing the cell will ruin the index check for the next cell. This was a just a quick and dirty solution but rowspan attribute has to be used somewhere to achieve it.
Here's another version, that sets rowspan on the time when inserting the cells into the table, beside the fact that it works with 3 duplicate cells and more, it's also faster, because it avoids re-rendering of the table(though it can be optimized more, but I don't think at this moment you wanna care about it, premature optimization is the root of all evil!): http://jsfiddle.net/g7uY9/1/
for (var i = 0; i < obj.length; i++) {
tr = $('<tr/>');
addColumn(tr, 'columnA', i);
addColumn(tr, 'columnB', i);
addColumn(tr, 'columnC', i);
$('#testTable').append(tr);
}
function addColumn(tr, column, i) {
var row = obj[i],
prevRow = obj[i - 1],
td = $('<td>' + row[column] + '</td>');
if (prevRow && row[column] === prevRow[column]) {
td.hide();
} else {
var rowspan = 1;
for (var j = i; j < obj.length - 1; j++) {
if (obj[j][column] === obj[j + 1][column]) {
rowspan++;
} else {
break;
}
}
td.attr('rowspan', rowspan);
}
tr.append(td);
}
这篇关于使用jQuery合并相等的表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
