JQuery添加删除行

最新推荐文章于 2020-09-27 09:27:05 发布
最新推荐文章于 2020-09-27 09:27:05 发布
阅读量110 收藏
点赞数
分类专栏： Web前端 文章标签： jQuery HTML XHTML JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_13876/article/details/81886309
版权
(1)jQuery追加动态删除
按行实现添加，删除，并在删除后，动态从后补充上来。 

<!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" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title>demo about table</title>
<script>
	$(document).ready(function(){		
		$("#but").click(function(){
			var $table=$("#tab tr");
			var len=$table.length;
		//	alert("tr length :"+len);
		//	alert(" content :"+"<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>jQuery"+len+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr>");

			$("#tab").append("<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>jQuery"+len+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr>");			
		})	
	})

	function deltr(index)
	{
	alert(index);
	//	alert("tr[id=\'"+index+"\']");
		$table=$("#tab tr");
		if(index>$table.length)
			return;
		else
		{
			$("tr[id=\'"+index+"\']").remove();	
			//$("tr:gt('"+index+"')").each				
		//	for(var temp=index+1;temp<=$table.length;temp++)
		//	{
				//$("#tab").append("<tr id="+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td //align=\'center\'>jQuery"+(temp-2)+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(temp-1)+")\'>删除//</a></td></tr>");
		//		$("tr[id=\'"+temp+"\']").replaceWith("<tr id="+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td //align=\'center\'>jQuery"+(temp-2)+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(temp-1)+")\'>删除//</a></td></tr>");
		//	}	
		}	
	}


</script>
</head>

<body>
<br/>
<table id="tab" border="1" width="60%" align="center">
	<tr>
    	<td width="20%" align="center">序号</td>
      	<td align="center">标题</td>
        <td align="center">操作</td>
  </tr>
</table>
<br/>
<div style="border:2px; border-color:#00CC00; margin-left:20%">
<input type="button" id="but" value="add"/>
</div>
</body>
</html>



(2)jQuery末尾追加删除 
<!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" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title>demo about table</title>
<script>
//在id为test的table的最后增加一行    
function addtr(id){    
tr_id = $("#"+id+">tbody>tr:last").attr("id");  
alert(tr_id);  
tr_id++;    
//alert(tr_id);    
str = "<tr id = '"+tr_id+"'><td width='30%'>re1</td><td width='30%'>re2</td><td width='30%'>re3</td></tr>";    
$('#'+id).append(str);    
}    
//删除id为test的table的最后一行    
function deltr(id){    
tr_id = $("#"+id+">tbody>tr:last").attr("id");    
$('#'+tr_id).remove();    
}    

</script>
</head>

<body>
<br/>
<table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%">   
<tr id="1"><td width="30%">1</td><td width="30%">2</td><td width="30%">3</td></tr>   
<tr id="2"><td width="30%">11</td><td width="30%">22</td><td width="30%">33</td></tr>   
</table>     
<input type="button" name="button" value="add" onclick="addtr('test');">   
<input type="button" name="button" value="del" onclick="deltr('test');">   

</div>
</body>
</html>


(3)javascript动态追加删除 

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>

<script type="text/javascript">
function addMore()
{
	var td = document.getElementById("more");

	var br = document.createElement("br");
	var input = document.createElement("input");
	var button = document.createElement("input");

	input.type = "file";
	input.name = "file";

	button.type = "button";
	button.value = "Remove";

	button.onclick = function()
	{
		td.removeChild(br);
		td.removeChild(input);
		td.removeChild(button);
	}

	td.appendChild(br);
	td.appendChild(input);
	td.appendChild(button);

}
</script>
</head>
<body>
		<form action="upload" theme="simple" enctype="multipart/form-data">
			<table align="center" width="50%" border="1">
				<tr>
					<td>
						file
					</td>
					<td id="more">
						<input type = "file" name="file"/><input type="button" value="Add More.." onclick="addMore()">
					</td>
				</tr>
			</table>
		</form>
</body>
</html>

(4)jQuery三种动态添加删除方式 

<!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" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title>demo about table</title>
<script>
jQuery(function($){
   //添加行
    $("#add1").click(function(){
        $("#table2>tbody").append('<tr><td>新增1</td><td><button onclick="deltr(this)">删除</button></td></tr>')
   });
});
//删除行的函数，必须要放domready函数外面
function deltr(delbtn){
    $(delbtn).parents("tr").remove();
};
jQuery(function($){
   //定义删除按钮事件绑定
   //写里边，防止污染全局命名空间
   function deltr(){
        $(this).parents("tr").remove();
   };
   //已有删除按钮初始化绑定删除事件
    $("#table2 .del").click(deltr);
   //添加行
    $("#add2").click(function(){
        $('<tr><td>新增行2</td><td><button class="del">删除</button></td></tr>')
           //在这里给删除按钮再次绑定事件。
            .find(".del").click(deltr).end()
            .appendTo($("#table2>tbody"));
   });
});

jQuery(function($){
   //第四个表格的删除按钮事件绑定
    $("#table2").click(function(e) {
       if (e.target.className=="del"){
            $(e.target).parents("tr").remove();
       };
   });
   //第四个表格的添加按钮事件绑定
    $("#add3").click(function(){
        $("#table2>tbody").append('<tr><td>新增行3</td><td><button class="del">删除</button></td></tr>')
   });
});

</script>
</head>

<body>
<br/>
<table id="table2">
    <tbody>
        <tr>
            <td>这行原来就有</td>
            <td><buttonclass="del">删除</button></td>
        </tr>
        <tr>
            <td>这行原来就有</td>
            <td><buttonclass="del">删除</button></td>
        </tr>
    </tbody>
</table>
<input type="button" name="add1" id="add1" value="新增1"/>
<input type="button" name="add2" id="add2" value="新增2"/>
<input type="button" name="add3" id="add3" value="新增3"/>
</body>
</html>

iteye_13876
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery动态添加删除行 点击按钮动态添加行或动态删除行
08-07
jquery动态添加删除行 点击按钮动态添加行或动态删除行代码 删除后序号重新排列
jQuery添加和删除输入文本框标签代码
10-22
本文是基于jquery代码实现的添加和删除输入文本框标签代码，非常不错，具有参考借鉴，需要的朋友一起看下吧
js简单的表格添加行和删除行操作示例
10-26
主要介绍了js简单的表格添加行和删除行操作,需要的朋友可以参考下
jquery 动态增加table行，动态删除table行
caileigood的博客
08-14 6672
在html中我们大量的用到了局部刷新，局部刷新就是使用js来动态的修改html局部的数据。下面来介绍下使用jquery来动态的增加table的行，当然这种方式可以适用到任何的html组件中去。 &lt;table id="myTable" class="table"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;督导小组&lt;/th&gt
Jquery动态增加行和删除行的操作
书写人生
01-05 1万+
var row_count = 0;  function addNew()  {  row_count++;  var table1 = $('#table1');  var firstTr = table1.find('tbody>tr:first');  var row = $("");  var td = $(""+row_count+"");  td.append($(""
Jquery添加删除行
03-24
Jquery动态添加和删除行，配合ajax的使用 可以更完美的实现无刷新更新
jquery添加删除行
05-08
在实际应用中，可能需要根据服务器返回的数据动态添加或删除行。这可以通过Ajax请求实现，使用`.ajax()`或`.get()`、`.post()`等方法获取数据，然后根据数据执行相应的DOM操作。 **5. 验证和反馈** 在执行添加和...
jquery添加删除行 附加数据
07-28
本文将深入探讨如何使用jQuery来实现表格中的添加和删除行功能，并结合附加数据进行操作。 首先，我们需要理解HTML表格的基本结构。在HTML中，`<table>`元素用于创建表格，`<tr>`表示表格行，`<td>`表示单元格，而`...
jquery动态添加删除一行数据示例
10-25
对于删除行的操作，`.delOneRow` 是一个类选择器，它匹配所有class为`delOneRow`的元素（这里是删除按钮）。点击删除按钮时，会检查表格行的数量，如果只剩一行，则弹出警告提示；否则，通过`confirm()`函数询问用户...
jQuery实现表格行的动态增加与删除(改进版)
huangxiaoya1993的专栏
07-30 1万+
http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html
jquery实现table动态添加行、删除行以及行的上移和下移
lvshuocool的博客
10-08 2594
$(function($){     //元素交换       $(".up").live('click',function(){           $(this).parent().parent().prev("tr").before($(this).parent().parent());       });       $(".down").live('click',functi
关于用jquery 动态增加、删除表格的行，列操作。
whax
07-05 1万+
jquery 动态增加、删除表格的行，列操作。
jquery动态添加行、指定删除行
u010565037的博客
02-29 157
// 追加 $(".tip-img img").click(function(){ $(".codet-total").append("<div class='old-codet del-code'><input type='text' name=''><b οnclick='del(this)'></b></div>"); ...
jquery实现添加和删除行数据
qq_35349167的博客
09-27 539
首先创建html文件 将 jquery 文件引入 html中 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <style>
使用jQuery创建可删除添加行的动态表格，超级简单实用的方法
zzw_cracy_java的博客
03-15 3867
使用jQuery动态的添加和删除表格里面的行，不多说了直接上代码。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&a
jquery 中table动态添加行和删除列操作
Tiger的专栏
05-30 1万+
1.简单的table使用定义&lt;table class="table table-bordered table-hover" style="text-align: center;" id="Result"&gt; &lt;thead&gt; &lt;tr&gt; &lt;
Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
鄙人kunzhi96，感恩遇见！
05-15 2万+
最近做的项目中有一个需求就是要求在线填写表格内容时，不够的话可以动态添加一行，我这里用的jQuery来实现，下面是我项目截图展现： 当点击“添加输入框”按钮时，就会自动添加一行 下面我们来一下代码实现（把实际项目中的HTML代码简化了，其他功能可自己加） <!DOCTYPE html> <html> <head> <meta charset="utf-...
Jquery实现表格行的添加、删除
热门推荐
互联网的世界，我要看看！
08-16 4万+
最近做一个投票管理的模块，需要添加问题选项，为了方便，就简单地实现了表格行的添加、删除。 注：需引入jquery.js 先上效果图：(form中默认有4行) 表单代码： 所属问题 (单选) (复选)： ${question} 选项1：
Jquery 添加删除css
最新发布
05-30
要添加CSS样式，可以使用jQuery中的`css()`方法，如下所示： ```javascript // 获取需要添加样式的元素 var element = $("#myElement"); // 添加样式 element.css("color", "red"); element.css("background-color...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值