js动态删除第一行时合并行的列怎么处理让其仍然显示

[学无止境啊~]

如图所示，有三列是在增加行时自动合并行。删除某行时，这三列也会跟着自动变化，但是删除第一行的时候，会将这三列也删除掉。如何操作，只要没有全部删除行，无论删除第几行，该合并的列还展示无误？？？？？
选择删除除第一行外的随便一行：

结果：

但要是删除第一行，后面三列都被删除了：


<script type="text/javascript">
//删除选中行
function delRow() {
$("input[name='IsValid']").each(function (index, row) {
if ($(this).prop("checked")) {
$(this).parents("tr[name=行名]").remove();
}
});
}
</script>
希望大佬们给予帮助，不胜感激~~~

[一支糖包仔]

你就是上次问怎么合并列的那个朋友吧。 删除第一行，后面的列也被删除了，原因就是你后面的列，看起来虽然占了三行，实际上他只是第一行的列拉长强行占了三行。 所以你删除的时候他就没有拉长的效果了。 在删除第一行的时候，把第二行做成第一行的样子。 例如： $('table tr:eq(0)').remove();//删除了第一行 var trCount=$('table tr').length;//获取table里面的行数 $('table tr:eq(0) td:eq(0)').after('<td rowspan="'+trCount+'">内容</td>'');//删除了第一行，第二行就变成了第一行，在第一行第一列后面添加列，列的占行数就是table的行数

[学无止境啊~]

引用 1 楼 一支糖包仔 的回复:

你就是上次问怎么合并列的那个朋友吧。
删除第一行，后面的列也被删除了，原因就是你后面的列，看起来虽然占了三行，实际上他只是第一行的列拉长强行占了三行。
所以你删除的时候他就没有拉长的效果了。
在删除第一行的时候，把第二行做成第一行的样子。
例如：
$('table tr:eq(0)').remove();//删除了第一行
var trCount=$('table tr').length;//获取table里面的行数
$('table tr:eq(0) td:eq(0)').after('<td rowspan="'+trCount+'">内容</td>'');//删除了第一行，第二行就变成了第一行，在第一行第一列后面添加列，列的占行数就是table的行数

嗯嗯，是的，感谢帮助~~
我展示后台查到的三行数据，删除第一行后，按照提供的方法将原先的第二行变成第一行后，再点击新增一行，为什么没有自动合并行？是什么问题？但是将页面获取的几行数据全部删除后（js页面的所有删除操作没有触发数据库，刷新还会再出现的）再重新新增，合并行时没有问题的。或者我一次选择多行删除，选择第一行和第二行删除，理论上讲第三行应该变成第一行，但是也没有合并行？
如图所示：删除有数据的第一行后再新增行

[一支糖包仔]

引用 2 楼 学无止境啊~ 的回复:

[quote=引用 1 楼 一支糖包仔 的回复:] 你就是上次问怎么合并列的那个朋友吧。 删除第一行，后面的列也被删除了，原因就是你后面的列，看起来虽然占了三行，实际上他只是第一行的列拉长强行占了三行。 所以你删除的时候他就没有拉长的效果了。 在删除第一行的时候，把第二行做成第一行的样子。 例如： $('table tr:eq(0)').remove();//删除了第一行 var trCount=$('table tr').length;//获取table里面的行数 $('table tr:eq(0) td:eq(0)').after('<td rowspan="'+trCount+'">内容</td>'');//删除了第一行，第二行就变成了第一行，在第一行第一列后面添加列，列的占行数就是table的行数

嗯嗯，是的，感谢帮助~~ 我展示后台查到的三行数据，删除第一行后，按照提供的方法将原先的第二行变成第一行后，再点击新增一行，为什么没有自动合并行？是什么问题？但是将页面获取的几行数据全部删除后（js页面的所有删除操作没有触发数据库，刷新还会再出现的）再重新新增，合并行时没有问题的。或者我一次选择多行删除，选择第一行和第二行删除，理论上讲第三行应该变成第一行，但是也没有合并行？ 如图所示：删除有数据的第一行后再新增行 [/quote] 把你相关代码贴出来一下，我本地模拟看看。

[一支糖包仔]

再点击新增一行，为什么没有自动合并行？是什么问题？ 因为你新增的时候没有更改第一行的rowspan，rowspan的数量要跟你所有的行的数量保持对应，不然你下面的行就不会有这个合并列的存在。 新增一行的时候用：$('table tr:re(0) td:eq(1)').attr('rowspan',$('table tr').length); 这样可以更改第一行的rowspan的数值。

[一支糖包仔]

引用 4 楼 一支糖包仔 的回复:

再点击新增一行，为什么没有自动合并行？是什么问题？ 因为你新增的时候没有更改第一行的rowspan，rowspan的数量要跟你所有的行的数量保持对应，不然你下面的行就不会有这个合并列的存在。 新增一行的时候用：$('table tr:re(0) td:eq(1)').attr('rowspan',$('table tr').length); 这样可以更改第一行的rowspan的数值。

$('table tr:eq(0) td:eq(1)').attr('rowspan',$('table tr').length); 打错了。 tr:eq(0) 这个eq(0)说明你要操作的是第一行，0是下标，如果你要操作第二行就是 tr:eq(1)。列也是这个意思。

[学无止境啊~]

引用 5 楼 一支糖包仔 的回复:

[quote=引用 4 楼 一支糖包仔 的回复:]
再点击新增一行，为什么没有自动合并行？是什么问题？
因为你新增的时候没有更改第一行的rowspan，rowspan的数量要跟你所有的行的数量保持对应，不然你下面的行就不会有这个合并列的存在。
新增一行的时候用：$('table tr:re(0) td:eq(1)').attr('rowspan',$('table tr').length);
这样可以更改第一行的rowspan的数值。

$('table tr:eq(0) td:eq(1)').attr('rowspan',$('table tr').length);
打错了。
tr:eq(0) 这个eq(0)说明你要操作的是第一行，0是下标，如果你要操作第二行就是 tr:eq(1)。列也是这个意思。[/quote]
能私信么？

[囧]

function deleteRow(index){
	var tbody = $("#ItemsTable tbody:last"),
		tr = $("tr", tbody);
	if(tr.length == 1 || index > 0){
		tr.eq(index).remove();
	}
	if(tr.length > 1 && index == 0){
		var next = tr.eq(1), cur = tr.eq(0);
		$("td", cur).each(function(index, td){
			if($(td).attr("rowspan")){
				next.append(td);
			}
		});
		cur.remove();
	}
}
//删除选中行
function delRow() {
	$("input[name='IsValid']").each(function (index, row) {
		if ($(this).prop("checked")) {
			//$(this).parents("tr[name=行名]").remove();
			deleteRow(index);
		}
	});
}

[学无止境啊~]

引用 7 楼 囧 的回复:

function deleteRow(index){
	var tbody = $("#ItemsTable tbody:last"),
		tr = $("tr", tbody);
	if(tr.length == 1 || index > 0){
		tr.eq(index).remove();
	}
	if(tr.length > 1 && index == 0){
		var next = tr.eq(1), cur = tr.eq(0);
		$("td", cur).each(function(index, td){
			if($(td).attr("rowspan")){
				next.append(td);
			}
		});
		cur.remove();
	}
}
//删除选中行
function delRow() {
	$("input[name='IsValid']").each(function (index, row) {
		if ($(this).prop("checked")) {
			//$(this).parents("tr[name=行名]").remove();
			deleteRow(index);
		}
	});
}

删除第一行后列展示顺序错误，最后一列跑到需要合并行的第一列前面了

[囧]

后面还有列就用insert

function deleteRow(index){
	var tbody = $("#ItemsTable tbody:last"),
		tr = $("tr", tbody);
	if(tr.length == 1 || index > 0){
		tr.eq(index).remove();
	}
	if(tr.length > 1 && index == 0){
		var next = tr.eq(1), cur = tr.eq(0);
		$("td", cur).each(function(index, td){
			if($(td).attr("rowspan")){
				$(td).insertAfter($("td", next).eq(index - 1));
			}
		});
		cur.remove();
	}
}

[学无止境啊~]

引用 9 楼 囧 的回复:

后面还有列就用insert

function deleteRow(index){
	var tbody = $("#ItemsTable tbody:last"),
		tr = $("tr", tbody);
	if(tr.length == 1 || index > 0){
		tr.eq(index).remove();
	}
	if(tr.length > 1 && index == 0){
		var next = tr.eq(1), cur = tr.eq(0);
		$("td", cur).each(function(index, td){
			if($(td).attr("rowspan")){
				$(td).insertAfter($("td", next).eq(index - 1));
			}
		});
		cur.remove();
	}
}

删除带有第一行的多行时，比如说同时选中第一行和第二行删除，删除第一行后整个index变了，但check循环里第二行的index值没变，此时默认现有的第二行但其实是原来的第三行就会删除；或者同时选中第一行和第三行删除，循环第二个被选择时在整个页面中已经找不到要删除的行。就会出现只删除了原有的第一行情况

[囧]

delRow里面的each 改成for, 从大到小删除index

[学无止境啊~]

引用 11 楼 囧 的回复:

delRow里面的each 改成for, 从大到小删除index

非常感谢耐心回复~~
再追问个问题
html = html.replace('_tdCell_', '');
$(".td-row-span" , $("#ItemsTable tbody:last")).attr("rowspan", index + 1);//这句代表在tbody最后列合并的行数。
比如现在有一组应该是五行合并，一组一行，一组两行合并。循环执行结束后会以最后的合并行数为准（最后循环的是两行的那组数据），五行的也变成两行，一行的也会增加一行，导致界面混乱。这个怎么控制？
第一组五行：后三行没有合并（被最后一组合并行数覆盖）

第二组一行：多出一行（被最后一组合并行数覆盖）

最后一组两行