zoukankan      html  css  js  c++  java
  • 添加和删除行的能力table(能够编辑的表的内容)

    页面文件

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript" src="jquery-1.6.min.js"></script>
    <script type="text/javascript" src="queryi18n.js"></script>
    <script type="text/javascript">
    	
    </script>
    </head>
    <body oncontextmenu="return false">
    	
    
    		
    			<form id="i18nform">
    				<div id="i18ntablediv" style=" 90%;">
    					<table id="i18ntable" border="1px" width="90%">
    						<tr>
    							<th width='45%' height='20px'>key</th>
    							<th width='45%' height='20px'>value</th>
    							<th width='5%' height='20px'>value</th>
    						</tr>
    					</table>
    				</div>
    				<div id="addtrdiv" style=" 10%; float: right;">
    					<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addtr()"><span key="ss" class="paltform-i18n">加入行</span></a>
    				</div>
    				<div class="button_area_absolute">
    					<table width="90%">
    						<tr>
    							<td align=center><a href="#" class="easyui-linkbutton"	iconCls="icon-ok" onclick="savei18ninfo()"><span key="save" class="paltform-i18n">保存</span></a></td>
    						</tr>
    					</table>
    				</div>
    			</form>
    		
    		
    	
    </body>
    </html>
    js文件

    //保存国际化文件
    function savei18ninfo(){
    	
    	var i18ninfo = geti18ninfo();
    	alert(i18ninfo);
    	
    	
    }
    //获取i18n值
    function geti18ninfo(){
    	var key = "";  
    	var value = "";  
    	var i18ndata = "";
    	var table = $("#i18ntable");
    	var tbody = table.children();  
    	var trs = tbody.children();  
    	for(var i=1;i<trs.length;i++){ 
    		var tds = trs.eq(i).children();  
    		for(var j=0;j<tds.length;j++){ 
    			if(j==0){
    				if(tds.eq(j).text()==null||tds.eq(j).text()==""){
    					return null;
    				}
    				key = "key":""+tds.eq(j).text();
    			}
    			if(j==1){
    				if(tds.eq(j).text()==null||tds.eq(j).text()==""){
    					return null;
    				}
    				value = "value":""+tds.eq(j).text();
    			}
    		} 
    		if(i==trs.length-1){
    			i18ndata += "{""+key+"",""+value+""}";
    		}else{
    			i18ndata += "{""+key+"",""+value+""},";
    		}
    	}  
    	i18ndata = "["+i18ndata+"]";
    	return i18ndata;
    }
    	var clientWidth = document.documentElement.clientWidth;
    	var clientHeight = document.documentElement.clientHeight;
    	var div_left_width = 200;
    	var tempWidth = 0;
     	/**
     	 * 描写叙述:页面自适应
     	 */	
    $(window).bind("resize",function(){
    		resizeLayout();
    	});
    function resizeLayout(){
    		try{
    			clientWidth = document.documentElement.clientWidth;
    			var div_left_width = $("#left").width()+11;
    			$("#cc").layout("resize");
    			$('#userquery').panel('resize',{clientWidth-div_left_width}); 
    			$('#10100801').datagrid('resize',{clientWidth-div_left_width});
    			
    			$('#userrange').combobox({
    				width :  $('#right').width() * 0.35
    			});
    		}catch(e){			
    		}
    	}
    function initResize(){
     		//自己主动适应页面大小
    		$(".layout-button-left").bind("click",function(){
    			$('#userquery').panel('resize',{clientWidth-28});
    			$('#10100801').datagrid('resize',{clientWidth-28});
    			$(".layout-button-right").bind("click",function(){
    				$('#userquery').panel('resize',{tempWidth}); 
    				$('#10100801').datagrid('resize',{tempWidth});
    			});
    		});
     	}  
    function tdclick(tdobject){  
    			 var td=$(tdobject);  
    			 td.attr("onclick", "");
    			 //1,取出当前td中的文本内容保存起来  
    			var text=td.text(); 
    			//2,清空td里面的内容  
    			td.html(""); //也能够用td.empty();  
    			//3,建立一个文本框,也就是input的元素节点  
    			var input=$("<input>");  
    			//4。设置文本框的值是保存起来的文本内容  
    			input.attr("value",text);  
    			input.bind("blur",function(){
    				var inputnode=$(this);  
    				var inputtext=inputnode.val();  
    				var tdNode=inputnode.parent();  
    				tdNode.html(inputtext);  
    				tdNode.click(tdclick);  
    				td.attr("onclick", "tdclick(this)");
    			});
    			input.keyup(function(event){  
    				 var myEvent =event||window.event;  
    				 var kcode=myEvent.keyCode;  
    				if(kcode==13){  
    					var inputnode=$(this);  
    					var inputtext=inputnode.val();  
    					var tdNode=inputnode.parent();  
    					tdNode.html(inputtext);  
    					tdNode.click(tdclick);  
    				}  
    			});  
    			
    			//5。将文本框增加到td中  
    			td.append(input); 
    			var t =input.val();
    			input.val("").focus().val(t);
    //				input.focus();
    			
    		   //6,清除点击事件  
    			td.unbind("click");  
    	}  
    function addtr(){
    	var table = $("#i18ntable");
    	var tr= $("<tr><td height='20px' onclick='tdclick(this)'>"+"</td><td height='20px' onclick='tdclick(this)'>"+"</td><td height='20px' align='center' onclick='deletetr(this)'><font size='2' color='red'>"+"删除"+"</font></td></tr>");
    	table.append(tr);
    }
    function deletetr(tdobject){
    	var td=$(tdobject);
    	td.parents("tr").remove();
    }
    
    
    
    



    版权声明:本文博主原创文章。博客,未经同意不得转载。

  • 相关阅读:
    Redis源码分析(二十一)--- anet网络通信的封装
    leetcode 总结part1
    leetcode String to Integer (atoi)
    leetcode 165. Compare Version Numbers
    leetcode 189. Rotate Array
    leetcode 168. Excel Sheet Column Title
    leetcode 155. Min Stack
    leetcode 228. Summary Ranges
    leetcode 204. Count Primes
    leetcode 6. ZigZag Conversion
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/4804997.html
Copyright © 2011-2022 走看看