使用jquery给表格添加或删除行

zhangwei12354 2014-03-24 10:17:50
想实现下面的功能
图我看一下怎么传吧!试了半天没成功
...全文
417 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
嘻哈大咖秀 2014-03-25
  • 打赏
  • 举报
 回复
引用 13 楼 zhangwei12354 的回复:
[quote=引用 12 楼 microlab2009 的回复:] [quote=引用 11 楼 zhangwei12354 的回复:] 不好意思, 我没想到和整体的有关系, 现在好像删除无法操作. 添加是可以了 我只是想问题小化了更好解决和理解
那你现在的结构是怎么样的？发来我看看[/quote] 有二处都要进行这种自动添加删除操作 简要的表图如下 有文字处是要自动添加的地方 可以看到图吗[/quote] 代码
zhangwei12354 2014-03-25
  • 打赏
  • 举报
 回复
引用 12 楼 microlab2009 的回复:
[quote=引用 11 楼 zhangwei12354 的回复:]
不好意思, 我没想到和整体的有关系, 现在好像删除无法操作. 添加是可以了 我只是想问题小化了更好解决和理解

那你现在的结构是怎么样的？发来我看看[/quote]

有二处都要进行这种自动添加删除操作
简要的表图如下 有文字处是要自动添加的地方

可以看到图吗
嘻哈大咖秀 2014-03-25
  • 打赏
  • 举报
 回复
引用 11 楼 zhangwei12354 的回复:
不好意思, 我没想到和整体的有关系, 现在好像删除无法操作. 添加是可以了 我只是想问题小化了更好解决和理解
那你现在的结构是怎么样的？发来我看看
zhangwei12354 2014-03-25
  • 打赏
  • 举报
 回复
引用 10 楼 microlab2009 的回复:
[quote=引用 9 楼 zhangwei12354 的回复:] 用这个无效, 因为我是一个算复杂的表 $(kh).prop('rowspan',--rowspan); $(dh).siblings(':not(".button"):last').remove(); 有二处都要进行这种自动添加删除操作 简要的表图如下 有文字处是要自动添加的地方
你这表达不敢恭维啊 由最简单的一张表给你实现了 结果你整了个这么大的一个坑 要说一开始就把你要实现的说清楚啊 不要由小即大 很费时间的[/quote] 不好意思, 我没想到和整体的有关系, 现在好像删除无法操作. 添加是可以了 我只是想问题小化了更好解决和理解
嘻哈大咖秀 2014-03-25
  • 打赏
  • 举报
 回复
引用 9 楼 zhangwei12354 的回复:
用这个无效, 因为我是一个算复杂的表 $(kh).prop('rowspan',--rowspan); $(dh).siblings(':not(".button"):last').remove(); 有二处都要进行这种自动添加删除操作 简要的表图如下 有文字处是要自动添加的地方
你这表达不敢恭维啊 由最简单的一张表给你实现了 结果你整了个这么大的一个坑 要说一开始就把你要实现的说清楚啊 不要由小即大 很费时间的
zhangwei12354 2014-03-25
  • 打赏
  • 举报
 回复
引用 8 楼 microlab2009 的回复:
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

</head>



<body>

<table border="1" id="table">

<tr>

  <td rowspan="2" class="kh">项目</td>

  <td>itme1</td>

 <td rowspan="2" class="kh">列表1</td>

<td rowspan="2" class="kh">列表2</td>

<td rowspan="2" class="kh">列表3</td>

<td rowspan="2" class="kh">列表4</td>

<td rowspan="2" class="kh">列表5</td>

</tr>

<tr class="dh">

  <td>item2</td>

</tr>

<tr class="button">

  

  <td colspan="7" >                              

<label style="width:auto;" >A)</label> <input type="radio" name="decision9" value="No" checked />无                           

<span class="buttonContent"><button disabled = "true" id="add1" >添加</button></span>

<span class="buttonContent"><button disabled = "true"  id='remove1'>删除</span></div>                               

 </td>

</tr>

</table>

<button id="add">添加</button>

<button id='remove'>删除</button>



<script language="JavaScript">

    $(document).ready(function() {

      var kh = $("#table").find('.kh');//跨列

      var dh = $("#table").find('.dh');//多列

      var rowspan = $(kh).prop('rowspan');

      $("#add").click(function(){

        $(kh).prop('rowspan',++rowspan);

        $(dh).after('<tr><td>item1</td></tr>')

      })

      $("#remove").click(function(){

        

        if(rowspan > 2){

          $(kh).prop('rowspan',--rowspan);

          $(dh).siblings(':not(".button"):last').remove();

        }

        

      })

    });

  </script>

</body>

</html>
用这个无效, 因为我是一个算复杂的表
$(kh).prop('rowspan',--rowspan); $(dh).siblings(':not(".button"):last').remove();
有二处都要进行这种自动添加删除操作
简要的表图如下 有文字处是要自动添加的地方



zhangwei12354 2014-03-25
  • 打赏
  • 举报
 回复
引用 14 楼 microlab2009 的回复:
[quote=引用 13 楼 zhangwei12354 的回复:] [quote=引用 12 楼 microlab2009 的回复:] [quote=引用 11 楼 zhangwei12354 的回复:] 不好意思, 我没想到和整体的有关系, 现在好像删除无法操作. 添加是可以了 我只是想问题小化了更好解决和理解
那你现在的结构是怎么样的？发来我看看[/quote] 有二处都要进行这种自动添加删除操作 简要的表图如下 有文字处是要自动添加的地方 可以看到图吗[/quote] 代码[/quote] 在添加的时候加个类已经搞定 谢谢一直的关注和解答
happy002 2014-03-25
  • 打赏
  • 举报
 回复
2楼的头像是谁啊？
zhangwei12354 2014-03-25
  • 打赏
  • 举报
 回复
引用 14 楼 microlab2009 的回复:
[quote=引用 13 楼 zhangwei12354 的回复:] [quote=引用 12 楼 microlab2009 的回复:] [quote=引用 11 楼 zhangwei12354 的回复:] 不好意思, 我没想到和整体的有关系, 现在好像删除无法操作. 添加是可以了 我只是想问题小化了更好解决和理解
那你现在的结构是怎么样的？发来我看看[/quote] 有二处都要进行这种自动添加删除操作 简要的表图如下 有文字处是要自动添加的地方 可以看到图吗[/quote] 代码[/quote] 以下面这个为准 <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <body> <table width="890" border="1" id="table" > <tr> <td colspan="7"><div align="center">测试表格</div></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td rowspan="2" class="kh">item</td> <td>item1 <input type="radio" name="decision9" value="No" checked />无 <span class="buttonContent"><button id="add" >添加</button></span> <span class="buttonContent"><button id='remove'>删除</button></span> </td> <td rowspan="2" class="kh"> </td> <td rowspan="2" class="kh"> </td> <td rowspan="2" class="kh"> </td> <td rowspan="2" class="kh"> </td> <td rowspan="2" class="kh"> </td> </tr> <tr class="dh"> <td >item2</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td rowspan="3" class="kh1" >list</td> <td>list1 <span class="buttonContent"><button id="add1" >添加</button></span> <span class="buttonContent"><button id='remove1'>删除</button></span> </td> <td rowspan="3" class="kh1"> </td> <td rowspan="3" class="kh1"> </td> <td rowspan="3" class="kh1"> </td> <td rowspan="3" class="kh1"> </td> <td rowspan="3" class="kh1"> </td> </tr> <tr class="dh1"> <td >list2</td> </tr> <tr> <td>list3</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <script language="JavaScript"> $(document).ready(function() { var kh = $("#table").find('.kh');//跨列 var dh = $("#table").find('.dh');//多列 var rowspan = $(kh).prop('rowspan'); $("#add").click(function(){ $(kh).prop('rowspan',++rowspan); $(dh).after('<tr><td>item1</td></tr>') }) $("#remove").click(function(){ if(rowspan > 2){ $(kh).prop('rowspan',--rowspan); $(dh).siblings(':not(".ah"):last').remove(); } }) var kh1 = $("#table").find('.kh1');//跨列 var dh1= $("#table").find('.dh1');//多列 var rowspan1 = $(kh1).prop('rowspan'); $("#add1").click(function(){ $(kh1).prop('rowspan',++rowspan1); $(dh1).after('<tr><td>list1</td></tr>') }) $("#remove1").click(function(){ if(rowspan1 > 2){ $(kh1).prop('rowspan',--rowspan); $(dh1).siblings(':not(".ah"):last').remove(); } }) }); </script> </body> </html> 添加没问题,删除就出错了
zhangwei12354 2014-03-25
  • 打赏
  • 举报
 回复
引用 14 楼 microlab2009 的回复:
[quote=引用 13 楼 zhangwei12354 的回复:] [quote=引用 12 楼 microlab2009 的回复:] [quote=引用 11 楼 zhangwei12354 的回复:] 不好意思, 我没想到和整体的有关系, 现在好像删除无法操作. 添加是可以了 我只是想问题小化了更好解决和理解
那你现在的结构是怎么样的？发来我看看[/quote] 有二处都要进行这种自动添加删除操作 简要的表图如下 有文字处是要自动添加的地方 可以看到图吗[/quote] 代码[/quote] 
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

<body>
<table width="890" border="1" id="table" >
  <tr>
    <td colspan="7"><div align="center">测试表格</div></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td rowspan="2" class="kh">item</td>
    <td>item1   
	<input type="radio" name="decision9" value="No" checked />无                           
    <span class="buttonContent"><button  id="add" >添加</button></span>
    <span class="buttonContent"><button   id='remove'>删除</button></span>
	</td>
    <td rowspan="2" class="kh"> </td>
    <td rowspan="2" class="kh"> </td>
    <td rowspan="2" class="kh"> </td>
    <td rowspan="2" class="kh"> </td>
    <td rowspan="2" class="kh"> </td>
  </tr>
  <tr>
    <td class="dh">item2</td>
  </tr>


  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td rowspan="3" class="kh1" >list</td>
    <td>list1
	                     
    <span class="buttonContent"><button  id="add1" >添加</button></span>
    <span class="buttonContent"><button   id='remove1'>删除</button></span>
	</td>
    <td rowspan="3" class="kh1"> </td>
    <td rowspan="3" class="kh1"> </td>
    <td rowspan="3" class="kh1"> </td>
    <td rowspan="3" class="kh1"> </td>
    <td rowspan="3" class="kh1"> </td>
  </tr>
  <tr>
    <td class="dh1">list2</td>
  </tr>
  <tr>
    <td>list3</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<script language="JavaScript">
    $(document).ready(function() {
      var kh = $("#table").find('.kh');//跨列
      var dh = $("#table").find('.dh');//多列
      var rowspan = $(kh).prop('rowspan');
      $("#add").click(function(){
        $(kh).prop('rowspan',++rowspan);
        $(dh).after('<tr><td>item1</td></tr>')
      })
      $("#remove").click(function(){
         
        if(rowspan > 2){
          $(kh).prop('rowspan',--rowspan);
          $(dh).siblings(':not(".ah"):last').remove();
        }
         
      })
	  
	    var kh1 = $("#table").find('.kh1');//跨列
      var dh1= $("#table").find('.dh1');//多列
      var rowspan1 = $(kh1).prop('rowspan');
      $("#add1").click(function(){
        $(kh1).prop('rowspan',++rowspan1);
        $(dh1).after('<tr><td>list1</td></tr>')
      })
      $("#remove1").click(function(){
         
        if(rowspan1 > 2){
          $(kh1).prop('rowspan',--rowspan);
          $(dh1).siblings(':not(".ah"):last').remove();
        }
         
      })
	  
	  
    });
  </script>
</body>
</html>
嘻哈大咖秀 2014-03-24
  • 打赏
  • 举报
 回复
把页面代码贴出来
zhangwei12354 2014-03-24
  • 打赏
  • 举报
 回复

回帖的图一下子就传上去了,真奇怪
效果如图所示, 实现自动添加删除行的效果 主要是有合并项
谢谢!
嘻哈大咖秀 2014-03-24
  • 打赏
  • 举报
 回复 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

<body>
<table border="1" id="table">
<tr>
  <td rowspan="2" class="kh">项目</td>
  <td>itme1</td>
 <td rowspan="2" class="kh">列表1</td>
<td rowspan="2" class="kh">列表2</td>
<td rowspan="2" class="kh">列表3</td>
<td rowspan="2" class="kh">列表4</td>
<td rowspan="2" class="kh">列表5</td>
</tr>
<tr class="dh">
  <td>item2</td>
</tr>
<tr class="button">
  
  <td colspan="7" >                              
<label style="width:auto;" >A)</label> <input type="radio" name="decision9" value="No" checked />无                           
<span class="buttonContent"><button disabled = "true" id="add1" >添加</button></span>
<span class="buttonContent"><button disabled = "true"  id='remove1'>删除</span></div>                               
 </td>
</tr>
</table>
<button id="add">添加</button>
<button id='remove'>删除</button>

<script language="JavaScript">
    $(document).ready(function() {
      var kh = $("#table").find('.kh');//跨列
      var dh = $("#table").find('.dh');//多列
      var rowspan = $(kh).prop('rowspan');
      $("#add").click(function(){
        $(kh).prop('rowspan',++rowspan);
        $(dh).after('<tr><td>item1</td></tr>')
      })
      $("#remove").click(function(){
        
        if(rowspan > 2){
          $(kh).prop('rowspan',--rowspan);
          $(dh).siblings(':not(".button"):last').remove();
        }
        
      })
    });
  </script>
</body>
</html>
zhangwei12354 2014-03-24
  • 打赏
  • 举报
 回复
引用 5 楼 microlab2009 的回复:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

<body>
<table border="1" id="table">
<tr>
  <td rowspan="2" class="kh">项目</th>
  <td>item1</td>
 <td rowspan="2" class="kh">列表</th>
  <td>item2</td>
</tr>
<tr class="dh">
  <td >list1</td>
  <td>list2</td>
</tr>
</table>
<button id="add">添加</button>
<button id='remove'>删除</button>

<script language="JavaScript">
    $(document).ready(function() {
      var kh = $("#table").find('.kh');//跨列
      var dh = $("#table").find('.dh');//多列
      var rowspan = $(kh).prop('rowspan');
      $("#add").click(function(){
        $(kh).prop('rowspan',++rowspan);
        $(dh).after('<tr><td>item1</td><td>item1</td></tr>')
      })
      $("#remove").click(function(){
        
        if(rowspan > 2){
          $(kh).prop('rowspan',--rowspan);
          $(dh).siblings(':last').remove();
        }
        
      })
    });
  </script>
</body>
</html>
首先感谢大虾你无私的帮助，我已经去测试过了，你的代码可以实现跨行的添加删除 然后我现在遇到二个小问题， 我的这个是一个后面带了五个跨行的，现在添加没问题，可以删除就结果不对 应该是 $(kh).prop('rowspan',--rowspan); $(dh).siblings(':last').remove(); 这二句要改一下，试了半天没成功 我的表 
<html>
<body>
<table border="1">
<tr>
  <td rowspan="2">项目</td>
  <td>itme1</td>
 <td rowspan="2">列表1</td>
<td rowspan="2">列表2</td>
<td rowspan="2">列表3</td>
<td rowspan="2">列表4</td>
<td rowspan="2">列表5</td>
</tr>
<tr>
  <td>item2</td>
</tr>
</table>
</body>
</html>
还有一个小问题就是我的这个表里为什么在一个<td></td>里面的不在一行显示 
<td colspan="6"  >                              
<label style="width:auto;" >A)</label> <input type="radio" name="decision9" value="No" checked />无							
<span class="buttonContent"><button disabled = "true" id="add1" >添加</button></span>
<span class="buttonContent"><button disabled = "true"  id='remove1'>删除</span></div>								
 </td>
是我写法有问题还是，二个按钮在第二行
人生难得一只鸡 2014-03-24
  • 打赏
  • 举报
 回复
你可以采取表格套表格的形式来实现合并 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
table{margin:0;padding:0;border-collapse:collapse;}
td{border:solid 1px #ccc;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
	var i=0;
	$("#add").click(function(){
		$("#list1").append('<tr><td>item'+i+'</td></tr>');
		$("#list2").append('<tr><td>列表'+i+'</td></tr>');
		i++;
		
	});
	$("#del").click(function(){
		$("#list1 tr:last").remove();
		$("#list2 tr:last").remove();
		i++;
		
	});
})
</script>

</head>

<body>
<table id="mT">
	<tr>
    	<td>项目</td>
        <td>
        	<table id="list1">
            	<tr><td>item1</td></tr>
                <tr><td>item2</td></tr>
            </table>
        </td>
        <td>列表</td>
        <td>
        	<table id="list2">
            	<tr><td>item1</td></tr>
                <tr><td>item2</td></tr>
            </table>
        </td>
    </tr>
</table>
<input type="button" value="添加" id="add"/>
<input type="button" value="删除" id="del"/>
</body>
</html>
嘻哈大咖秀 2014-03-24
  • 打赏
  • 举报
 回复 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

<body>
<table border="1" id="table">
<tr>
  <td rowspan="2" class="kh">项目</th>
  <td>item1</td>
 <td rowspan="2" class="kh">列表</th>
  <td>item2</td>
</tr>
<tr class="dh">
  <td >list1</td>
  <td>list2</td>
</tr>
</table>
<button id="add">添加</button>
<button id='remove'>删除</button>

<script language="JavaScript">
    $(document).ready(function() {
      var kh = $("#table").find('.kh');//跨列
      var dh = $("#table").find('.dh');//多列
      var rowspan = $(kh).prop('rowspan');
      $("#add").click(function(){
        $(kh).prop('rowspan',++rowspan);
        $(dh).after('<tr><td>item1</td><td>item1</td></tr>')
      })
      $("#remove").click(function(){
        
        if(rowspan > 2){
          $(kh).prop('rowspan',--rowspan);
          $(dh).siblings(':last').remove();
        }
        
      })
    });
  </script>
</body>
</html>
zhangwei12354 2014-03-24
  • 打赏
  • 举报
 回复
引用 2 楼 microlab2009 的回复:
把页面代码贴出来
没啥代码 就是一个跨行的表格实现动态添加行 如下 
<html>

<body>
<table border="1">
<tr>
  <td rowspan="2">项目</th>
  <td>item1</td>
 <td rowspan="2">列表</th>
  <td>item2</td>
</tr>
<tr>
  <td>list1</td>
  <td>list2</td>
</tr>
</table>
<button />添加</button>
<button />删除</button>

</body>
</html>
需要的效果在上面 网上没找到跨行的,我也不太懂,来请教一下
74、jquery表格动态添加删除行代码
74、jquery表格动态添加删除行代码
jQuery 动态添加或删除表格行
jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
jquery案例，为表格动态添加行
使用jquery为表格动态添加行数据,以及删除某一行数据
jQuery 动态添加、删除表格行特效
内容索引:脚本资源,jQuery,动态删除　　jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
原生JS和JQuery动态添加、删除表格行的方法
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
JavaScript

87,909

社区成员

224,616

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章