页面文件

<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. Maven和Gradle

    Maven和Gradle对比 Java世界中主要有三大构建工具:Ant.Maven和Gradle.经过几年的发展,Ant几乎销声匿迹.Maven也日薄西山,而Gradle的发展则如日中天.笔者有幸见证 ...

  2. git tag使用

    #git tag command git tag [-a | -s | -u <key-id>] [-f] [-m <msg> | -F <file>]       ...

  3. Hdu-1565 电网接入(1) (国家压缩dp获得冠军

    正方形格通路(1) Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  4. HDU 4915 Parenthese sequence _(:зゝ∠)_ 哈哈

    哦,我没做 #include <cstdio> #include <cstring> #include <algorithm> const int N = 1000 ...

  5. MAC随机修改批处理

    原文:MAC随机修改批处理 @echo off mode con cols=70 lines=20 title MAC随机修改工具 color 3F setlocal enabledelayedexp ...

  6. hdu4858 项目管理 bestcoder round1 B

    唔..弱弱的暴力水果 0操作时,将v加到u上,能够直接把v加到u相连的点上,这样输出时直接输出要求点的值. 布这种话反正我是超时了.. #include<cstdio> #include& ...

  7. USB OTG简要

    1 介绍 随着USB2.0发布版本号,USB更受欢迎.它已成为一种标准接口.现在,USB它支持三种速度:低速(1.5Mb/s).全速(12Mb/s)速(480Mb/s),四种传输类型:块传输.同步传输 ...

  8. linux 下一个 osw先从操作系统和标准脚本主动发起

    linux 下一个 osw与操作系统的引导和启动标准的脚本.osw它指的是--os watcher,这是一个显示器os这些指标shell脚本.osw监测数据一般使用oracle技能评估os资源的使用, ...

  9. ASP.NET分页正品—分页真

     承接上篇博文<ASP.NET真假分页-假分页>:http://blog.csdn.net/u010773667/article/details/38845009,继续解说ASP.NE ...

  10. all about AIX MPIO

    Multipath  I/O (多路径)   在计算机存储技术里,多路径提供了容错和性能提高,在计算机系统里CPU有多条物理路径通道,块存储设备通过总线,控制器,交换设备以及桥接设备来连接.     ...