一个可以增加和删除行的table并可编辑表格中内容
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <title></title> <scripttype="text/javascript"src="jquery-1.6.min.js"></script> <scripttype="text/javascript"src="queryi18n.js"></script> <scripttype="text/javascript"> </script> </head> <bodyoncontextmenu="returnfalse"> <formid="i18nform"> <divid="i18ntablediv"style="width:90%;"> <tableid="i18ntable"border="1px"width="90%"> <tr> <thwidth='45%'height='20px'>key</th> <thwidth='45%'height='20px'>value</th> <thwidth='5%'height='20px'>value</th> </tr> </table> </div> <divid="addtrdiv"style="width:10%;float:right;"> <ahref="#"iconCls="icon-add"onclick="addtr()"><spankey="ss">添加行</span></a> </div> <div> <tablewidth="90%"> <tr> <tdalign=center><ahref="#"iconCls="icon-ok"onclick="savei18ninfo()"><spankey="save">保存</span></a></td> </tr> </table> </div> </form> </body> </html>
js文件
//保存国际化文件
functionsavei18ninfo(){
vari18ninfo=geti18ninfo();
alert(i18ninfo);
}
//获取i18n值
functiongeti18ninfo(){
varkey="";
varvalue="";
vari18ndata="";
vartable=$("#i18ntable");
vartbody=table.children();
vartrs=tbody.children();
for(vari=1;i<trs.length;i++){
vartds=trs.eq(i).children();
for(varj=0;j<tds.length;j++){
if(j==0){
if(tds.eq(j).text()==null||tds.eq(j).text()==""){
returnnull;
}
key="key\":\""+tds.eq(j).text();
}
if(j==1){
if(tds.eq(j).text()==null||tds.eq(j).text()==""){
returnnull;
}
value="value\":\""+tds.eq(j).text();
}
}
if(i==trs.length-1){
i18ndata+="{\""+key+"\",\""+value+"\"}";
}else{
i18ndata+="{\""+key+"\",\""+value+"\"},";
}
}
i18ndata="["+i18ndata+"]";
returni18ndata;
}
varclientWidth=document.documentElement.clientWidth;
varclientHeight=document.documentElement.clientHeight;
vardiv_left_width=200;
vartempWidth=0;
/**
*描述：页面自适应
*/
$(window).bind("resize",function(){
resizeLayout();
});
functionresizeLayout(){
try{
clientWidth=document.documentElement.clientWidth;
vardiv_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){
}
}
functioninitResize(){
//自动适应页面大小
$(".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});
});
});
}
functiontdclick(tdobject){
vartd=$(tdobject);
td.attr("onclick","");
//1,取出当前td中的文本内容保存起来
vartext=td.text();
//2,清空td里面的内容
td.html("");//也可以用td.empty();
//3，建立一个文本框，也就是input的元素节点
varinput=$("<input>");
//4，设置文本框的值是保存起来的文本内容
input.attr("value",text);
input.bind("blur",function(){
varinputnode=$(this);
varinputtext=inputnode.val();
vartdNode=inputnode.parent();
tdNode.html(inputtext);
tdNode.click(tdclick);
td.attr("onclick","tdclick(this)");
});
input.keyup(function(event){
varmyEvent=event||window.event;
varkcode=myEvent.keyCode;
if(kcode==13){
varinputnode=$(this);
varinputtext=inputnode.val();
vartdNode=inputnode.parent();
tdNode.html(inputtext);
tdNode.click(tdclick);
}
});
//5，将文本框加入到td中
td.append(input);
vart=input.val();
input.val("").focus().val(t);
//input.focus();
//6,清除点击事件
td.unbind("click");
}
functionaddtr(){
vartable=$("#i18ntable");
vartr=$("<tr><tdheight='20px'onclick='tdclick(this)'>"+"</td><tdheight='20px'onclick='tdclick(this)'>"+"</td><tdheight='20px'align='center'onclick='deletetr(this)'><fontsize='2'color='red'>"+"删除"+"</font></td></tr>");
table.append(tr);
}
functiondeletetr(tdobject){
vartd=$(tdobject);
td.parents("tr").remove();
}