jQuery合并表格行，但考虑到以前的列 [英] jQuery merge table rows, but take previous columns into account
问题描述
我在html中有一个表格。该表使用通用的tr和td's ...并且生成一个包含六列和可变数量行的动态表。
如果给定的表看起来像这样：
|第1列|第2列|第3列|第4列|第5列|第6列|
---------------------------------------------- ---------
|约翰|绿色|苹果|二月|牛| 23 |
---------------------------------------------- ---------
|约翰|红色|桔子|二月|狮子| 18 |
---------------------------------------------- ---------
|约翰|蓝|苹果|二月|牛| 45 |
---------------------------------------------- ---------
| Mary |蓝色|橙色|四月|牛| 23 |
---------------------------------------------- ---------
| Mary |蓝色|苹果|五月|狗| 49 |
---------------------------------------------- ---------
| Mary |绿色|苹果|六月|猫| 67 |
---------------------------------------------- ---------
| Mary |红色|苹果|六月|鼠标| 32 |
---------------------------------------------- ---------
当我运行以下javascript时：
函数MergeCommonRows（table，columnIndexToMerge）{
previous = null;
cellToExtend = null;
table.find（td：nth-child（+ columnIndexToMerge +））。each（function（）{
jthis = $（this）;
content = jthis.text （）
if（previous == content&& content！==）{
jthis.remove（）;
if（cellToExtend.attr（rowspan）==未定义）{
cellToExtend.attr（ 行跨度，2）;
}
，否则{
currentrowspan = parseInt函数（cellToExtend.attr（ 行跨度））;
cellToExtend.attr（rowspan，currentrowspan + 1）;
}
}
else {
previous = content;
cellToExtend = jthis;
}
}）;
}
下表为：
|第1列|第2列|第3列|第4列|第5列|第6列|
---------------------------------------------- ---------
| |绿色|苹果| |牛| 23 |
------------------ -------------------
|约翰|红色|桔子|二月|狮子| 18 |
------------------ -------------------
| | |苹果| | | 45 |
--------- ------------------ ----------
| |蓝色|橙色|四月|牛| 23 |
------------------ ----------
| Mary | | |五月| | 49 |
-------- ----------------------------
| |绿色|苹果|六月|猫| 67 |
-------- ----------------------------
| |红色| |七月|鼠标| 32 |
---------------------------------------------- ---------
现在，javascript的工作原理是我需要如上表所示合并行。第一列很好地融合在一起。列中的其他区域也是如此。我唯一的问题出现在第2列和第5列。现在要重申一下，这些表总是会动态生成的，所以我不能以静态的方式来处理这些表。但是......第2列中的蓝色和第5列中的牛的合并超过了第1列中的相关值。相反，我想要一个像这样的表：
|第1列|第2列|第3列|第4列|第5列|第6列|
---------------------------------------------- ---------
| |绿色|苹果| |牛| 23 |
------------------ -------------------
|约翰|红色|桔子|二月|狮子| 18 |
------------------ -------------------
| |蓝色|苹果| |牛| 45 |
---------------------------------------------- ---------
| |蓝色|橙色|四月|牛| 23 |
------------------ ----------
| Mary | | |五月| | 49 |
-------- ----------------------------
| |绿色|苹果|六月|猫| 67 |
-------- ----------------------------
| |红色| |七月|鼠标| 32 |
---------------------------------------------- ---------
在上表中，blue和牛分开，因为它之前的单元在那里结束它们的行。这在任何情况下都会发生。如果第二列中的某个单元格碰巧跨越多行，则后续任何列都不能有跨过它的行数。希望我所描述的很清楚。我在问...如何修改我的javascript来实现这种效果？
解决方案如果只有第一列应该是成为其余列的divider，那么你可以使用一个数组来存储第一列的行break。
另外，你的函数没有工作的权利。当元素内部是 remove d时，删除元素上方的每个元素的索引立即向下移动以填充DOM索引间隙（因此删除元素之后的元素是在下一次迭代中跳过）。你可以使用递减循环或者简单地隐藏 td 的数据。
$ b
function MergeCommonRows （table）{var firstColumnBrakes = []; //遍历列而不是传递每列作为函数参数：for（var i = 1; i <= table.find（'th'）.length; i ++）{var previous = null，cellToExtend = null，rowspan = 1; table.find（td：nth-child（+ i +））。each（function（index，e）{var jthis = $（this），content = jthis.text（）; //检查当前如果没有，则扩展rowspan：if（previous == content&& content！==&& $ amp; $ .inArray（index，firstColumnBrakes）=== -1） {//隐藏行而不是remove（），所以DOM索引不会在循环内移动。jthis.addClass（'hidden'）; cellToExtend.attr（rowspan，（rowspan = rowspan + 1）） ;} else {//仅对第一列存储行中断：if（i === 1）firstColumnBrakes.push（index）; rowspan = 1; previous = content; cellToExtend = jthis;}}）; } //现在删除隐藏的td（或者如果你愿意，隐藏它们）：$（'td.hidden'）。remove（）;} $（'。button'）。click（function（）{MergeCommonRows（$（' ＃$ {code> table {border}};}};
< -collapse：collapse;} th，td {border：1px solid black;填充：5像素; text-align：center;}。hidden {display：none;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< table id = tbl> < THEAD> < TR>第1列第1列第1列第二列第二列第二列第3列第3列第3列第4列第4列第5列第5行第5列第6列第j列< / TR> < / THEAD> < TBODY> < TR> < TD>约翰< / TD> < TD>绿色< / TD> < TD>苹果< / TD> < TD>二月和LT; / TD> < TD>牛< / TD> < TD> 23℃; / TD> < / TR> < TR> < TD>约翰< / TD> < TD>红色< / TD> < TD>桔子< / TD> < TD>二月和LT; / TD> < TD>狮< / TD> < TD>第18版; / TD> < / TR> < TR> < TD>约翰< / TD> < TD>蓝色< / TD> < TD>苹果< / TD> < TD>二月和LT; / TD> < TD>牛< / TD> < TD> 45℃; / TD> < / TR> < TR> < TD>玛丽< / TD> < TD>蓝色< / TD> < TD>桔子< / TD> < TD> 4月< / TD> < TD>牛< / TD> < TD> 23℃; / TD> < / TR> < TR> < TD>玛丽< / TD> < TD>蓝色< / TD> < TD>苹果< / TD> < TD>五月< / TD> < TD>牛< / TD> < TD> 49< / TD> < / TR> < TR> < TD>玛丽< / TD> < TD>绿色< / TD> < TD>苹果< / TD> < TD> 6月< / TD> < TD>猫< / TD> < TD> 67< / TD> < / TR> < TR> < TD>玛丽< / TD> < TD>红色< / TD> < TD>苹果< / TD> < TD> 6月< / TD> < TD>小鼠< / TD> < TD> 32< / TD> < / TR> < / tbody的>< /表>< p为H.;<按钮类=按钮>合并行< /按钮>< / p为H.
I have a table in html. The table utilizes generic tr's and td's... and makes a dynamic table with six columns and a variable number of rows.
If a given table looks something like this:
|column 1|column 2|column 3|column 4|column 5|column 6|
-------------------------------------------------------
| John | Green |apples |February| cow | 23 |
-------------------------------------------------------
| John | Red |Oranges |February| lion | 18 |
-------------------------------------------------------
| John | Blue |apples |February| cow | 45 |
-------------------------------------------------------
| Mary | Blue |oranges | April | cow | 23 |
-------------------------------------------------------
| Mary | Blue |apples | May | dog | 49 |
-------------------------------------------------------
| Mary | green |apples | June | cat | 67 |
-------------------------------------------------------
| Mary | red |apples | June | mouse | 32 |
-------------------------------------------------------
When I run the following javascript:
function MergeCommonRows(table, columnIndexToMerge) {
previous = null;
cellToExtend = null;
table.find("td:nth-child(" + columnIndexToMerge + ")").each(function() {
jthis = $(this);
content = jthis.text()
if (previous == content && 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;
}
});
}
The following table is made:
|column 1|column 2|column 3|column 4|column 5|column 6|
-------------------------------------------------------
| | Green |apples | | cow | 23 |
------------------ -------------------
| John | Red |Oranges |February| lion | 18 |
------------------ -------------------
| | |apples | | | 45 |
--------- ------------------ ----------
| | Blue |oranges | April | cow | 23 |
------------------ ----------
| Mary | | | May | | 49 |
-------- ----------------------------
| | green | apples | June | cat | 67 |
-------- ----------------------------
| | red | | July | mouse | 32 |
-------------------------------------------------------
Now, the javascript works in the sense that I do need the rows to merge as seen in the above table. The first column merges nicely. And other areas in the columns do so as well. My only issues arises in areas like columns 2 and five. Now to reiterate, these tables will always be dynamically generated so I can't approach this in a static fashion. But... the merging for "blue" in column 2 and "cow" in column 5 goes past the associated values in column 1. Instead, I would want a table like this:
|column 1|column 2|column 3|column 4|column 5|column 6|
-------------------------------------------------------
| | Green |apples | | cow | 23 |
------------------ -------------------
| John | Red |Oranges |February| lion | 18 |
------------------ -------------------
| | Blue |apples | | cow | 45 |
-------------------------------------------------------
| | Blue |oranges | April | cow | 23 |
------------------ ----------
| Mary | | | May | | 49 |
-------- ----------------------------
| | green | apples | June | cat | 67 |
-------- ----------------------------
| | red | | July | mouse | 32 |
-------------------------------------------------------
In the above table, the merged cells for "blue" and "cow" separate because the cells preceding it end their rowspan there. This would occur in any case. If a cell in the second column happened to span multiple rows, then any subsequent columns could not have rowspans extending past it. Hopefully what I have described is clear enough. I am asking... how do I revise my javascript to achieve this effect?
If only the first column is supposed to be a "divider" for the rest of the columns, then you could use an array to store first column rows "breaks".
Also, your function doesn't have the right to work. When element is removed inside loop, The index of each element above the removed one is shifted down immediately to fill the DOM index gap (so the element right after the removed one is skipped in next iteration). You could use "decremental" loop or simply hide td's.
function MergeCommonRows(table) {
var firstColumnBrakes = [];
// iterate through the columns instead of passing each column as function parameter:
for(var i=1; i<=table.find('th').length; i++){
var previous = null, cellToExtend = null, rowspan = 1;
table.find("td:nth-child(" + i + ")").each(function(index, e){
var jthis = $(this), content = jthis.text();
// check if current row "break" exist in the array. If not, then extend rowspan:
if (previous == content && content !== "" && $.inArray(index, firstColumnBrakes) === -1) {
// hide the row instead of remove(), so the DOM index won't "move" inside loop.
jthis.addClass('hidden');
cellToExtend.attr("rowspan", (rowspan = rowspan+1));
}else{
// store row breaks only for the first column:
if(i === 1) firstColumnBrakes.push(index);
rowspan = 1;
previous = content;
cellToExtend = jthis;
}
});
}
// now remove hidden td's (or leave them hidden if you wish):
$('td.hidden').remove();
}
$('.button').click(function(){
MergeCommonRows($('#tbl'));
});
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding:5px;
text-align: center;
}
.hidden{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id=tbl>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
<th>column 5</th>
<th>column 6</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Green</td>
<td>apples</td>
<td>February</td>
<td>cow</td>
<td>23</td>
</tr>
<tr>
<td>John</td>
<td>Red</td>
<td>Oranges</td>
<td>February</td>
<td>lion</td>
<td>18</td>
</tr>
<tr>
<td>John</td>
<td>Blue</td>
<td>apples</td>
<td>February</td>
<td>cow</td>
<td>45</td>
</tr>
<tr>
<td>Mary</td>
<td>Blue</td>
<td>Oranges</td>
<td>April</td>
<td>cow</td>
<td>23</td>
</tr>
<tr>
<td>Mary</td>
<td>Blue</td>
<td>apples</td>
<td>May</td>
<td>cow</td>
<td>49</td>
</tr>
<tr>
<td>Mary</td>
<td>green</td>
<td>apples</td>
<td>June</td>
<td>cat</td>
<td>67</td>
</tr>
<tr>
<td>Mary</td>
<td>red</td>
<td>apples</td>
<td>June</td>
<td>mouse</td>
<td>32</td>
</tr>
</tbody>
</table>
<p><button class=button>Merge Rows</button></p>
这篇关于jQuery合并表格行，但考虑到以前的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
