添加和删除行的能力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="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(能够编辑的表的内容)的更多相关文章
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- js如何实现动态的在表格中添加和删除行?(两种方法)
js如何实现动态的在表格中添加和删除行?(两种方法) 一.总结 1.table元素有属性和一些方法(js使用) 方法一:添加可通过在table的innerHTML属性中添加tr和td来实现 tab.i ...
- ivew实现table的编辑保存追加删除
ivew实现table的编辑 例子1 例子2
- mysql学习之-show table status(获取表的信息)参数说明
--获取表的信息mysql> show table status like 'columns_priv'\G;*************************** 1. row ******* ...
- MySQL的数据类型,MySQL增删改--添加主外键、添加属性、删除主外键、改表名、获取系统当前时间等
ls /etc/rc.d/init.d/mysql56service mysql56 start ps aux |grep "mysql"|grep "socket=&q ...
- 聊下图片滤镜,手机上的,lookup table(颜色查找表
今天这里要介绍的是lookup table(颜色查找表),简而言之就是通过将每一个原始的颜色进行转换之后成为一个新的颜色. 打一个比方,比如原始颜色是红色(r:255,g:0,b:0),进行转换后变为 ...
- element-ui的table表格控件表头与内容列不对齐问题
原文链接:点我 element-ui的table表格控件表头与内容列不对齐问题 解决方法:将以下样式代码添加到index.html.或app.vue中(必须是入口文件,起全局作用!)body .el- ...
- 问题-delphi无法编辑oracle表
问题现象:在一次开发过程中,遇到了delphi无法编辑oracle表. 问题原因:原来是自己误操作控件的属性了. 问题处理: OraQuery1.ReadOnly:=False; OraQuery1. ...
- table头部、尾部固定;中间内容定高自适应滚动
table头部.尾部固定;中间内容定高自适应滚动 很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现 工作过程中遇到了,作为一个小笔记,备忘! 如下图所示 --------- ...
随机推荐
- 重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid
原文:重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGr ...
- POJ 3684 Priest John's Busiest Day 2-SAT+输出路径
强连通算法推断是否满足2-sat,然后反向建图,拓扑排序+染色. 一种选择是从 起点開始,还有一种是终点-持续时间那个点 開始. 若2个婚礼的某2种时间线段相交,则有矛盾,建边. easy出错的地方就 ...
- cocos3——8.实现初学者指南
1.采用ClippingNode裁剪范围 写作物接口: function createClipNode(node, stencil, inverted) { var clip_node = new c ...
- 栈实现java
栈是一种“先去后出”的抽象的数据结构.例如:我们在洗盘子的时候,洗完一个盘子,将其放在一摞盘子的最上面,但我们全部洗完后,要是有盘子时,我们会先从最上面的盘子开始使用,这种例子就像栈的数据结构一样,先 ...
- T-SQL基础(7) - 透视,逆透视和分组集
透视转换: use tempdb;if object_id('dbo.Orders', 'U') is not null drop table dbo.Orders;create table dbo. ...
- Hive ERROR: Out of memory due to hash maps used in map-side aggregation
什么时候hive在运行大数据量的统计查询语句时.常常会出现以下OOM错误.详细错误提演示样例如以下: Possible error: Out of memory due to hash maps us ...
- appendChild的用法
appendChild的用法 1,先把元素从原有父级上删除 2,再把元素添加到新父级上
- 使用SKIP-GRANT-TABLES 解决 MYSQL ROOT密码丢失(转)
B.5.3.2 How to Reset the Root Password If you have never assigned a root password for MySQL, the ser ...
- Lua 服务器Socket通信实例(转)
local socket = require"socket" local host = "127.0.0.1"local port = "843&qu ...
- linux---Vim命令集
Vim命令集 命令历史 以:和/开头的命令都有历史纪录,能够首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗体中输入下面命令就可以 vim 直接启动vim vim filena ...