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();
    }
    
    
    
    



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

  • 相关阅读:
    CentOS 7.3报Centos7_Base库缺少GPG公钥
    nginx重写(隐藏)index.php目录
    工作经历简写
    Centos7.4安装htop
    nginx 超时时间配置说明
    c#中数据从数据库到客户端主要几种的导出方式(导出到excel,导出到word)
    C#操作word文档如何设置表格的行高
    Windows计划任务定时启动程序运行时发生错误的解决办法
    Asp.Net MVC中请求json文件时返回404 not found的解决办法
    Angularjs 如何自定义Img的ng-load 事件
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/4804997.html
Copyright © 2011-2022 走看看