- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有一张 html 表格。该表利用通用的 tr 和 td ……并制作一个包含六列和可变行数的动态表。
如果给定的表看起来像这样:
|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 |
-------------------------------------------------------
当我运行以下 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;
}
});
}
制作了下表:
|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 |
-------------------------------------------------------
现在,javascript 的工作原理是我确实需要合并行,如上表所示。第一列合并得很好。列中的其他区域也是如此。我唯一的问题出现在第 2 列和第 5 列等区域。现在重申一下,这些表将始终是动态生成的,所以我不能以静态方式处理它。但是......第 2 列中的“蓝色”和第 5 列中的“牛”的合并超过了第 1 列中的关联值。相反,我想要一个这样的表:
|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 |
-------------------------------------------------------
在上表中,“blue”和“cow”的合并单元格是分开的,因为它前面的单元格在那里结束了它们的 rowspan。这无论如何都会发生。如果第二列中的一个单元格碰巧跨越多行,那么任何后续列都不能有 rowspans 延伸超过它。希望我所描述的足够清楚。我在问...我该如何修改我的 javascript 才能达到这种效果?
最佳答案
如果只有第一列应该是其余列的“分隔线”,那么您可以使用数组来存储第一列的行“分隔符”。
此外,您的功能无权工作。当元素在循环内被 remove
d 时,被移除元素上方的每个元素的索引立即下移以填充 DOM 索引间隙(因此在下一次迭代中跳过被移除元素之后的元素)。您可以使用“递减”循环或简单地隐藏 td
。
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>
关于javascript - jQuery 合并表行,但考虑以前的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28492279/
我有几个长度不等的 vector ,我想对其进行cbind。我将 vector 放入列表中,并尝试结合使用do.call(cbind, ...): nm <- list(1:8, 3:8, 1:5)
合并(合并)两个 JSONObjects 的最佳方式是什么? JSONObject o1 = { "one": "1", "two": "2", "three": "3" }
我在一个表中有许多空间实体,其中有一个名为 Boundaries 的 geometry 字段。我想生成一个具有简化形状/几何图形的 GeoJson 文件。 这是我的第一次尝试: var entitie
谁能说出为什么这个选择返回 3.0 而不是 3.5: SELECT coalesce(1.0*(7/2),0) as foo 这个返回 3: SELECT coalesce(7/2,0) as foo
首先抱歉,也许这个问题已经提出,但我找不到任何可以帮助我的东西,可能是因为我对 XSLT 缺乏了解。 我有以下 XML: 0 OK
有时用户会使用 Windows 资源管理器复制文件并在他们应该执行 svn 存储库级别的复制或合并时提交它们。因此,SVN 没有正确跟踪这些变化。一旦我发现这一点,损坏显然已经完成,并且可能已经对相关
我想组合/堆叠 2 个不同列的值并获得唯一值。 如果范围相邻,则可以正常工作。例如: =UNIQUE(FILTERXML(""&SUBSTITUTE(TEXTJOIN(",",TRUE,TRANSPO
使用iTextSharp,如何将多个PDF合并为一个PDF,而又不丢失每个PDF中的“表单字段”及其属性? (我希望有一个使用来自数据库的流的示例,但文件系统也可以) 我发现this code可以正常
是否有一个合并函数可以优先考虑公共(public)变量中的非缺失值? 考虑以下示例。 首先,我们生成两个 data.frames,它们具有相同的 ID,但在特定变量上有互补的缺失值: set.seed
我们正在尝试实现 ALM Rangers 在最新的 Visual Studio TFS Branching and Merging Guide 中描述的“基本双分支计划”。 .从指导: The bas
我在不同目录(3个不同名称)中有很多(3个只是一个例子)文本文件,如下所示: 目录:A,文件名:run.txt 格式:txt制表符分隔 ; file one 10 0.2 0.5 0.
我有一张包含学生等级关系的表: Student Grade StartDate EndDate 1 1 09/01/2009 NULL 2
我在学习 https://www.doctrine-project.org/projects/doctrine-orm/en/2.6/reference/working-with-associatio
我觉得我有世界上最简单的 SVN 用例: 我有一个文件,Test.java在 trunk SVN的。 我分行trunk至 dev-branch . 我搬家Test.java进入 com/mycompa
我有两个数据框,其中一些列名称相同,而另一些列名称不同。数据框看起来像这样: df1 ID hello world hockey soccer 1 1 NA NA
Elasticsearch 中是否缺少以扁平化形式(多个子/子aggs)返回结果的方法? 例如,当前我正在尝试获取所有产品类型及其状态(在线/离线)。 这就是我最终得到的: aggs [ { key:
如何合并如下所示的 map : Map1 = Map(1 -> Class1(1), 2 -> Class1(2)) Map2 = Map(2 -> Class2(1), 3 -> Class2(2)
我试图通过从netezza服务器导入数据来合并两个数据集。 以下是数据集,其数字为,ID为,字母为,名称为: 下表都是使用命令从netezza导入的: sqoop import --connect n
我有两个数组 $array1 = array('first', 'second', 'third', 'fourth'); $array2 = array('first', 'third', 'fou
我正在 SQL Server 中运行合并。在我的更新中,我只想在值发生更改时更新该行。有一个版本行在每次更新时都会递增。下面是一个例子: MERGE Employee as tgt USING (SE
我是一名优秀的程序员,十分优秀!