jquery实现的可增加,删除行,可多行上下移动表格

var rowId=1;
//添加行
function addRow()
{
	//因为表格每行都有一些效果,不得不处理下id,和其他没有关系
	rowId++;
	var replaceString=$("#lb tr:first-child").html().replace("value=tr1","value=tr"+rowId).replace("rowId=\"1\"","rowId=\""+rowId+"\"").replace("id=jstj_sdjs1","id=jstj_sdjs"+rowId).replace("id=jstj_zdjs1","id=jstj_zdjs"+rowId).replace("id=jsgs_sdjs1","id=jsgs_sdjs"+rowId).replace("id=jsgs_zdjs1","id=jsgs_zdjs"+rowId);
	var rowTemplet="<tr onMouseOver='changeto()' onMouseOut='changeback()' id='tr"+rowId+"'>"+replaceString+"</tr>";
	$("#lb tr:last-child").after(rowTemplet);
}

//删除行
function delRow()
{
	if($("#lb tr").length<=1 || $("input[type='checkbox'][checked]").length==$("#lb tr").length)
	{
		alert('至少保留一行');	
		return;
	}
	
	$("input[type='checkbox'][checked]").each(
		function(){
		$("#"+$(this).val()).remove();   //此处可以修改成 $(this).parent().parent().remove(); 使得 和id没有任何关系
		});
}


//上移行
function upOrDownTr(isUp)
{
		if(isUp){
		$("input[type='checkbox'][checked]").each(
		 function(){
		 var checkedTR=$(this).parent().parent();
		var upTR=checkedTR.prev();
		if(upTR.html()==null)
		{
			alert("已是第一行");
				return;	
		}
			checkedTR.insertBefore(upTR);
		$(this).attr("checked",true);
		});					
		}
		else
		{	
			var reverseChecked= jQuery.makeArray($("input[type='checkbox'][checked]")).reverse();	
			$.each(reverseChecked,function(i,v){
				 var checkedTR=$(this).parent().parent();
					var upTR=checkedTR.next();
					
					if(upTR.html()==null)
					{
						alert("已是最后一行");
						return;	
					}
				 checkedTR.insertAfter(upTR);
				 	$(this).attr("checked",true);
				 	
				 	
				});
				
			}					
		
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery是一个JavaScript库,可以用它来方便地操作HTML元素。以下是一个简单的示例,演示如何使用JQuery实现网页表格动态增加删除内容。 首先,我们需要在HTML文件中引入JQuery库: ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ``` 然后,我们可以在HTML文件中创建一个空的表格,并为其添加一个按钮,用于动态增加表格: ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> </tbody> </table> <button id="addRowBtn">Add Row</button> ``` 接下来,我们可以使用以下JQuery代码来实现动态增加表格的功能: ```javascript $(document).ready(function() { // 给按钮添加点击事件 $('#addRowBtn').click(function() { // 创建一个新的表格 var newRow = $('<tr>'); // 创建三个新的表格单元格,并为其添加数据 var nameCell = $('<td>').text('New Name'); var ageCell = $('<td>').text('New Age'); var genderCell = $('<td>').text('New Gender'); // 将这些单元格添加到新的表格中 newRow.append(nameCell); newRow.append(ageCell); newRow.append(genderCell); // 将新的表格添加到表格的tbody中 $('#myTable tbody').append(newRow); }); }); ``` 以上代码中,我们首先使用`$(document).ready()`来确保页面加载完毕后再执代码。然后,我们给按钮添加了一个点击事件,当用户点击按钮时,我们会创建一个新的表格,并向其中添加三个单元格,然后将新的表格添加到表格的tbody中。 接下来,我们可以使用以下JQuery代码来实现动态删除表格的功能: ```javascript $(document).ready(function() { // 给表格添加点击事件 $('#myTable tbody').on('click', 'tr', function() { // 移除被点击的表格 $(this).remove(); }); }); ``` 以上代码中,我们使用了JQuery的`on()`方法来为表格的tbody中的所有表格添加一个点击事件。当用户点击任何一个表格时,我们会将该表格从DOM中移除。 综上所述,以上代码演示了如何使用JQuery实现网页表格动态增加删除内容的功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值