zoukankan      html  css  js  c++  java
  • jQuery实现增删改

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    	<title>Document</title>
    	<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
    	<style type="text/css">
    		tr{
    			text-align: center;
    			height: 40px;
    			 100px;		
    		}
    		input{
    			height: 40px;
    			border: none;
    			outline: none;
    			 100px;
    		}		
    	</style>
    </head>
    <body>	
    	<table id="tab" border="1" cellspacing="0" cellpadding="0" width="450" align="center">
    		<tr><td colspan="5" align="center"><button id="add" class="btn">添加</button></td></tr>
    		<tr><th>序号</th><th>姓名</th><th>爱好</th><th style=" 100px;">修改</th><th style=" 100px;">删除</th></tr>
    	</table>	
    </body>
    <script type="text/javascript">
    	var i=0,j=0,k=0,m=0;	
    	$("#add").click(function(){ 
    		i=$("tr").length-2;
    		i++;
    		$("#tab").append('<tr><td>'+i+'</td><td>'+'<input class="txt1" type="text"/>'+'</td><td>'+'<input class="txt2" type="text"/>'+'</td> <td><input id="xg" type="button"value="修改" /></td> <td><input id="del" type="button"value="删除" /></td></tr>')
    	})
    	$("#tab").on("click","#del",function(){
    		k=$(this).parent().parent().index(); 
    		var flag=confirm("确定要删除吗?");
    		if(flag){
    			$(this).parent().parent().remove();
    			m=$("tr").length;			
    			for (n=k;n<m;n++) {
    				console.log(n-1);
    				$("#tab tr").eq(n).children().eq(0).text(n-1);
    			}
    		}
    	});
    	
    	$("#tab").on("blur","input[type=text]",function(){
    		$(this).prop('disabled',true);
    		$(this).css({'color':'red'})
    	});
    	
    	$("#tab").on("blur",".txt2",function(){
    		var bb=confirm("姓名:"+$('.txt1').val() + "   爱好: "+$(this).val());
    		if(!bb){
    			$(".txt1").val("");
    			$(this).val("");
    		}
    	});
    	
    	$("#tab").on("click","#xg",function(){
    		$(this).parent().prevAll().children().prop('disabled',false);
    //		alert("可以修改了!")
    	});
    </script>
    </html>
    

      

  • 相关阅读:
    __file__ 作用以及模块导入方法
    random 模块
    time 模块
    module模块和包
    装饰器
    python闭包
    filter map reduce函数的使用
    python文件处理
    python内置函数使用
    函数
  • 原文地址:https://www.cnblogs.com/daifuchao/p/11761180.html
Copyright © 2011-2022 走看看