页面文件

<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="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" 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',{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' 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();
}

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

添加和删除行的能力table(能够编辑的表的内容)的更多相关文章

  1. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  2. js如何实现动态的在表格中添加和删除行?(两种方法)

    js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...

  3. ivew实现table的编辑保存追加删除

    ivew实现table的编辑 例子1 例子2

  4. mysql学习之-show table status(获取表的信息)参数说明

    --获取表的信息mysql> show table status like 'columns_priv'\G;*************************** 1. row ******* ...

  5. MySQL的数据类型,MySQL增删改--添加主外键、添加属性、删除主外键、改表名、获取系统当前时间等

    ls /etc/rc.d/init.d/mysql56service mysql56 start ps aux |grep "mysql"|grep "socket=&q ...

  6. 聊下图片滤镜,手机上的,lookup table(颜色查找表

    今天这里要介绍的是lookup table(颜色查找表),简而言之就是通过将每一个原始的颜色进行转换之后成为一个新的颜色. 打一个比方,比如原始颜色是红色(r:255,g:0,b:0),进行转换后变为 ...

  7. element-ui的table表格控件表头与内容列不对齐问题

    原文链接:点我 element-ui的table表格控件表头与内容列不对齐问题 解决方法:将以下样式代码添加到index.html.或app.vue中(必须是入口文件,起全局作用!)body .el- ...

  8. 问题-delphi无法编辑oracle表

    问题现象:在一次开发过程中,遇到了delphi无法编辑oracle表. 问题原因:原来是自己误操作控件的属性了. 问题处理: OraQuery1.ReadOnly:=False; OraQuery1. ...

  9. table头部、尾部固定;中间内容定高自适应滚动

    table头部.尾部固定;中间内容定高自适应滚动 很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现 工作过程中遇到了,作为一个小笔记,备忘! 如下图所示 --------- ...

随机推荐

  1. Java EE (2) -- Java EE 6 Enterprise JavaBeans Developer Certified Expert(1z0-895)

    Introduction to Java EE Gain an understanding of the Java Platform, Enterprise Edition (Java EE) Exa ...

  2. DateTime.Compare(t1,t2)比較两个日期大小

    DateTime.Compare(t1,t2)比較两个日期大小,排前面的小,排在后面的大,比方:2011-2-1就小于2012-3-2返回值小于零:  t1 小于 t2. 返回值等于零 : t1 等于 ...

  3. python 凸包(经纬度) + 面积[近似]

    def cross(A,B): return A[0] * B[1] - A[1] * B[0] def vectorMinus( a , b): return ( (a[0] - b[0] )*10 ...

  4. Memcached FAQ

    这篇FAQ包含了大家普遍关心的问题.非常值得一看. 原文:http://blog.csdn.net/jarfield/archive/2009/07/05/4322953.aspx 最后更新时间 20 ...

  5. C3P0在多线程下的maxPoolSize配置

    ETL工具完毕的差点儿相同了.今天遇到一个问题.就是给C3P0配置了maxPoolSize为10.目的是想让整个应用同一时候获得的最大的Connection个数为10,可是在測试应用的这一部分之后,发 ...

  6. OpenCV在MFC图像控件内显示图像

    1.依照文章<OpenCV+MFC显示图像>,完毕配置. 2.创建对应的图像控件,button控件. 3.进行类型转换. 在当前OpenCV2版本号内,图像格式为cv::Mat ,而该格式 ...

  7. BootstrapQ 包Bootstrap tree,dialog等待

    官方网站:http://uikoo9.com/bootstrapQ why 事实上bootstrap已经非常好了,唯一的软肋就是js方面有些薄弱,对照easyui就知道了. 能够非常明显的知道boot ...

  8. Android MVC MVP

    从.NET的宠物商店到Android MVC MVP   1 一些闲话 记得刚进公司的时候,我们除了做常规的Training Project外,每天还要上课,接受各种技术培训和公司业务介绍.当时第一次 ...

  9. Linux curl使用简单介绍 (转)

    Curl是Linux下一个很强大的http命令行工具,其功能十分强大. 1) 二话不说,先从这里开始吧! $ curl http://www.linuxidc.com 回车之后,www.linuxid ...

  10. android使用XmlPullParser来解析XML文件

    解析下面的一个XML: <?xml version="1.0" encoding="utf-8" ?> <rss><sid> ...