可以增加和删除行的table（可以编辑表格中内容）

最新推荐文章于 2024-07-04 19:32:13 发布

Fay_Q

最新推荐文章于 2024-07-04 19:32:13 发布

阅读量3.9k

点赞数 2

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/o_darling/article/details/31358055

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

页面文件

<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 οncοntextmenu="return false">
	

		
			<form id="i18nform">
				<div id="i18ntablediv" style="width: 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="width: 10%; float: right;">
					<a href="#" class="easyui-linkbutton" iconCls="icon-add" οnclick="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" οnclick="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',{width:clientWidth-div_left_width}); 
			$('#10100801').datagrid('resize',{width:clientWidth-div_left_width});
			
			$('#userrange').combobox({
				width :  $('#right').width() * 0.35
			});
		}catch(e){			
		}
	}
function initResize(){
 		//自动适应页面大小
		$(".layout-button-left").bind("click",function(){
			$('#userquery').panel('resize',{width:clientWidth-28});
			$('#10100801').datagrid('resize',{width:clientWidth-28});
			$(".layout-button-right").bind("click",function(){
				$('#userquery').panel('resize',{width:tempWidth}); 
				$('#10100801').datagrid('resize',{width: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' οnclick='tdclick(this)'>"+"</td><td height='20px' οnclick='tdclick(this)'>"+"</td><td height='20px' align='center' οnclick='deletetr(this)'><font size='2' color='red'>"+"删除"+"</font></td></tr>");
	table.append(tr);
}
function deletetr(tdobject){
	var td=$(tdobject);
	td.parents("tr").remove();
}