添加和删除行的能力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头部.尾部固定;中间内容定高自适应滚动 很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现 工作过程中遇到了,作为一个小笔记,备忘! 如下图所示 --------- ...
随机推荐
- 玩转web之ajax(一)---使用表单的serialize()方法中文乱码解决
有时候我们需要使用ajax提交去提交form的值,这样就需要使用serialize()去获取form的值,但这样获取的值如果有中文,会乱码,原因和解决方法如下: 原因:.serialize()自动调用 ...
- c++学习笔记4,调用派生类的顺序构造和析构函数(一个)
测试源代码: //測试派生类的构造函数的调用顺序何时调用 //Fedora20 gcc version=4.8.2 #include <iostream> using namespace ...
- simple factory, factory method, abstract factory
simple factory good:1 devide implementation and initialization2 use config file can make system more ...
- effective c++ 条款12 copy all parts of an object
这经常发生在更改代码的时候,当有自己的copy 赋值函数或者copy 构造函数时,编译器就不会维护这两个函数.导致发生遗忘. 可能出现的场景 class Customer { private: std ...
- 直接选择排序----java实现
直接选择排序思路: 从待排序数据中选择第一个假定为最小的下标,然后他后面的与他循环比较,得到真的最小值下标,然后最小值前的那一区段依次后移,并把最小值赋值给第一个元素.第二次时,假定第二个为最小,然后 ...
- iphone内容开发技术学习
一.iOS基础 1 开发环境搭建以及IOS组件.框架的概要介绍. 2 mac操作系统与iOS操作系统 3 xcode IDE开发环境的初始 二.C语言基础 1数据类型.表达式与控制流程语句 2数组.函 ...
- Nagios显示器mysql定从库: libmysqlclient.so.18: cannot open shared object file: No such
做mysql的slave时间监控,必须check_mysql文字,check当误差: error while loading shared libraries: libmysqlclient.so.1 ...
- [原创].NET 业务框架开发实战之七 业务层初步构想
原文:[原创].NET 业务框架开发实战之七 业务层初步构想 .NET 业务框架开发实战之七 业务层初步构想 前言:本篇主要讲述如何把DAL和BLL衔接起来. 本篇议题如下: 1. DAL ...
- 【Java基础】System.arraycopy()的使用详解
由于在Java中System.arraycopy()方法在一维数组和二维数组中的表现不同,所以做了一个测试 public static void main(String[] args) { int[] ...
- dispatch_once认识分析
dispatch_once为了确保代码运行一次 +(NSDateFormatter*)getDBDateFormat { static NSDateFormatter* format; static ...