jquery操作表格行（增加、删除）

最新推荐文章于 2023-02-21 15:53:37 发布

卡萨丁

最新推荐文章于 2023-02-21 15:53:37 发布

阅读量455

点赞数

分类专栏： jquery

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<span style="color:#ff0000;">js+css代码:</span>

	<style type="text/css">
		table td{border:1px solid #F00;height:30px;} 
	</style>
	
	<script type="text/javascript" src="function/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" charset="utf-8" >
		$(document).ready(function(){
			$("#tab tr").attr("align" , "center");
			
			//add a row
			$("#but").click(function(){
				var _len = $("#tab tr").length;
				$("#tab").append("<tr  id='"+_len+"' align='center'>"
								+"<td>"+_len+"</td>"
								+"<td>Dramtic"+_len+"</td>"
								+"<td><input type='text' id='desc"+_len+"' name='desc"+_len+"'/></td>"
								+"<td><a href=\'javascript:void(0)\' οnclick=\'deltr("+_len+")\'>删除</a></td>"
								+"</tr>");
			})
		})
		
		var deltr = function(index){
			alert("您确定要删除第"+index+"行数据么？");
			var _len = $("#tab tr").length;
			$("tr[id='"+index+"']").remove();aa
			
			for(var i=index+1 , j=_len ; i<j ; i++){
				var nextVal = $("#desc"+i).val();
				$("tr[id='"+i+"']").replaceWith("<tr id='"+(i-1)+"' align='center'>"
												+"<td>"+(i-1)+"</td>"
												+"<td>Dramtic"+(i-1)+"</td>"
												+"<td><input type='text' id='desc"+(i-1)+"' name='desc"+(i-1)+"' value='"+nextVal+"'/></td>"
												+"<td><a href=\'javascript:void(0)\' οnclick=\'deltr("+(i-1)+")\'>删除</a></td>"
												+"</tr>");
			}
		}
	</script>

<span style="color:#ff0000;">html代码：</span>

  <body>
  	<form action="">
		<table id="tab" style="border-collapse:collapse">
			<tr>
				<td width="105">序号</td> 
				<td width="181">标题</td> 
				<td width="112">说明</td> 
				<td width="112">操作</td> 
			</tr>
		</table>
		<br>
		<input type="button" id="but" value="add a row at the end"/>
	</form>
  </body>