求助,如何使用js删除行,效果如下图所示

qizhuganji 2013-03-30 12:06:22
...全文
221 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
ftiger 2013-03-31
  • 打赏
  • 举报
回复
先拆分再合并的思路,可能复杂了点。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#div1 table input[type=button]").click(function(){
           var needRemove = $(this).parents("tr"),
			tab = $(this).parents("table"),
			trs = tab.find("tr"),
			cache={}
			;
			var index=0;
			
			//拆分
			trs.each(function(col){
				$(this).find("td").each(function(row){
					var iRowSpan = $(this).attr("rowspan") || 0;
					if(iRowSpan>1){
						cache[index]={rowspanIndex:index,html:$(this).html()};
						$(this).attr("coldata", index).removeAttr("rowspan");

						for(var i=1;i<iRowSpan;i++ ){
							var ttr= trs[col+ i],
							toAdd = $(ttr).find("td")[row-1];
							if(toAdd){
								$(toAdd).after($("<td>").attr("coldata", index));
							}
						}
						index++;
					}					
				});
			});
			//删除
			$(needRemove).remove();

			//重新合并
			trs = tab.find("tr");
			trs.each(function(col){
				$(this).find("td").each(function(row){
					var colIndex=$(this).attr("coldata"),  data= cache[colIndex];
					if(!data) return;
					if(!data.tag) {
						data.tag= this;
						$(this).html(data.html).removeAttr("coldata");
						return;
					}
					data.tag.rowSpan ++;
					$(this).remove();
				});
			});
        });
    })
</script>
<div id="div1"> 
<table border="1">
 
        <tr>
                <td>1</td>
                <td rowspan="5">2000+5000</td>
                <td rowspan="5">24000</td>
                <td>1000</td>
                <td>2000</td>
                <td>3000</td>
                <td><input type="button" value="删除行"/></td>
        </tr>
        <tr>
                <td>2</td>
                <td>1000</td>
                <td>2000</td>
                <td>3000</td>
                <td><input type="button" value="删除行"/></td>
 
        </tr>
        <tr>
                <td>3</td>
                <td>1000</td>
                <td>2000</td>
                <td>3000</td>
                <td><input type="button" value="删除行"/></td>
        </tr>
        <tr>
                <td>4</td>
                <td>1000</td>
                <td>2000</td>
                <td>3000</td>
                <td><input type="button" value="删除行"/></td>
        </tr>
        <tr>
                <td>5</td>
                <td>1000</td>
                <td>2000</td>
                <td>3000</td>
                <td><input type="button" value="删除行"/></td>
        </tr>

       <tr>
                <td>6</td>
                <td rowspan="5">2000+5000</td>
                <td rowspan="5">24000</td>
                <td>1000</td>
                <td>2000</td>
                <td>3000</td>
                <td><input type="button" value="删除行"/></td>
        </tr>
        <tr>
                <td>7</td>
                <td>1000</td>
                <td>2000</td>
                <td>3000</td>
                <td><input type="button" value="删除行"/></td>
 
        </tr>
        <tr>
                <td>8</td>
                <td>1000</td>
                <td>2000</td>
                <td>3000</td>
                <td><input type="button" value="删除行"/></td>
        </tr>
        <tr>
                <td>9</td>
                <td>1000</td>
                <td>2000</td>
                <td>3000</td>
                <td><input type="button" value="删除行"/></td>
        </tr>
        <tr>
                <td>10</td>
                <td>1000</td>
                <td>2000</td>
                <td>3000</td>
                <td><input type="button" value="删除行"/></td>
        </tr>
</table>
 
</div>
CavanWang 2013-03-30
  • 打赏
  • 举报
回复
你没用说清楚期望删除局部td后,希望得到什么样的结果,对应html展示来说,最好还是把期待的效果说清楚,否则都没法回答
KK3K2005 2013-03-30
  • 打赏
  • 举报
回复
了解mvc 就简单了 简单的说 m 是数据 v 是界面 c 是操作 通过m 可以生成 v v中的按钮 可以出发c 那么 你的这个需求 按钮 触发一个删除 这个删除是修改了 m 中的数据 剩余就是 重新 通过 m 生成 v 你说没有 m 那么 通过dom操作 也是一样的概念
NANU-NANA 2013-03-30
  • 打赏
  • 举报
回复
试一下js里的grid,和renderer方法
  • 打赏
  • 举报
回复
你删除第一个节点肯定会有问题,因为只有它有rowspan样式,删除之后肯定样式也跟着没了。 你说的第二个问题是因为你没弄懂rowspan规则,参见下面代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#div1 table input[type=button]").click(function(){
			$(this).parents("tr").remove();
		});
	})
</script>
<div id="div1"> 
<table border="1">
        <tr>
                <td>1</td>
                <td rowspan=5>2000+5000</td>
                <td rowspan=5>24000</td>
				<td>1000</td>
				<td>2000</td>
				<td>3000</td>
				<td><input type="button" value="删除行"/></td>
        </tr>
        <tr>
                <td>2</td>
				<td>1000</td>
				<td>2000</td>
				<td>3000</td>
				<td><input type="button" value="删除行"/></td>

        </tr>
        <tr>
                <td>3</td>
				<td>1000</td>
				<td>2000</td>
				<td>3000</td>
				<td><input type="button" value="删除行"/></td>
        </tr>
		<tr>
                <td>4</td>
				<td>1000</td>
				<td>2000</td>
				<td>3000</td>
				<td><input type="button" value="删除行"/></td>
        </tr>
		<tr>
                <td>5</td>
				<td>1000</td>
				<td>2000</td>
				<td>3000</td>
				<td><input type="button" value="删除行"/></td>
        </tr>
				<tr>
                <td>6</td>
				<td rowspan=2>2000+6000</td>
                <td rowspan=2>14000</td>
				<td>1000</td>
				<td>2000</td>
				<td>3000</td>
				<td><input type="button" value="删除行"/></td>
        </tr>
		<tr>
                <td>7</td>
				<td>1000</td>
				<td>2000</td>
				<td>3000</td>
				<td><input type="button" value="删除行"/></td>
        </tr>
</table>
</div>
qizhuganji 2013-03-30
  • 打赏
  • 举报
回复
不行的,会有两个问题,1.直接删除第一行会出错。2把table中的内容多复制一份,删除上面的数据就会出错,如图所示:
  • 打赏
  • 举报
回复

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#div1 table input[type=button]").click(function(){
			$(this).parents("tr").remove();
		});
	})
</script>
<div id="div1"> 
<table border="1">

        <tr>
                <td>1</td>
                <td rowspan="5">2000+5000</td>
                <td rowspan="5">24000</td>
				<td>1000</td>
				<td>2000</td>
				<td>3000</td>
				<td><input type="button" value="删除行"/></td>
        </tr>
        <tr>
                <td>2</td>
				<td>1000</td>
				<td>2000</td>
				<td>3000</td>
				<td><input type="button" value="删除行"/></td>

        </tr>
        <tr>
                <td>3</td>
				<td>1000</td>
				<td>2000</td>
				<td>3000</td>
				<td><input type="button" value="删除行"/></td>
        </tr>
		<tr>
                <td>4</td>
				<td>1000</td>
				<td>2000</td>
				<td>3000</td>
				<td><input type="button" value="删除行"/></td>
        </tr>
		<tr>
                <td>5</td>
				<td>1000</td>
				<td>2000</td>
				<td>3000</td>
				<td><input type="button" value="删除行"/></td>
        </tr>
</table>

</div>
qizhuganji 2013-03-30
  • 打赏
  • 举报
回复
感谢你的回答,不多这个显然不行,行中单元格存在rowspan属性
  • 打赏
  • 举报
回复

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){	
		var str="<table border='1' cellspacing='0' cellpadding='0'>";
		str+="<tr><td>"+"adawdwad"+"</td><td>"+"bdwawdwad"+"</td><td>"+"cdwdadadawd"+"</td><td>"+"dwewewae"+"</td></tr>";
		var k="";
		var cnt=10;
		for(var i=0;i<cnt;i++){
			k+="<tr><td>"+i+"</td><td>"+"K"+"</td><td>"+"F"+"</td><td>"+"<input type='button' value='删除行'/>"+"</td></tr>";
		}
		str+=k+"</table>";
		$("#div1").append(str);
		$("table tr td input[type=button]").live("click",function(){
			$(this).parents("tr").remove();
		});
	})
</script>
<div id="div1"> 
</div>

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧