我有这样的表:
当单元格的内容相同时,我希望在“模型”列中有一个 rowspan。
Table 有一个过滤功能,这使得“固定”colspan 不是解决方案。
我发现了同样的问题:
https://codereview.stackexchange.com/questions/6363/spanning-table-cells-automatically-between-same-value-cells
但遗憾的是对我不起作用。
这里也有很好的例子:
https://stackoverflow.com/a/1294964/1861097但仅适用于 colspan。
为了排序和过滤,我使用 http://datatables.net
表格可以在这里找到:http://ipt.czechbattlefield.info (切换到附件)
最佳答案
我写了一个示例,说明如何使用 jquery 对任何表进行行跨越。
请注意,代码仅在 1 个假设下有效:您希望 rowspan 的列已排序
You can play with it on Codepen (尝试编辑 indexOfColumnToRowSpan)
JS:
$(function(){
//assumption: the column that you wish to rowspan is sorted.
//this is where you put in your settings
var indexOfColumnToRowSpan = 0;
var $table = $('#myTable');
//this is the code to do spanning, should work for any table
var rowSpanMap = {};
$table.find('tr').each(function(){
var valueOfTheSpannableCell = $($(this).children('td')[indexOfColumnToRowSpan]).text();
$($(this).children('td')[indexOfColumnToRowSpan]).attr('data-original-value', valueOfTheSpannableCell);
rowSpanMap[valueOfTheSpannableCell] = true;
});
for(var rowGroup in rowSpanMap){
var $cellsToSpan = $('td[data-original-value="'+rowGroup+'"]');
var numberOfRowsToSpan = $cellsToSpan.length;
$cellsToSpan.each(function(index){
if(index==0){
$(this).attr('rowspan', numberOfRowsToSpan);
}else{
$(this).hide();
}
});
}
})();
html:
<table id="myTable">
<tbody>
<tr>
<th align="left">A</th>
<th align="left">B</th>
<th align="left">C</th>
<th align="left">D</th>
</tr>
<tr>
<td>Apple</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Apple</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Apple</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Apple</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Apple</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Pear</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Pear</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Pear</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Orange</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Orange</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Orange</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Orange</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Orange</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
<tr>
<td>Orange</td>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</tbody>
</table>
关于javascript - 当单元格相同时制作行跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14046146/