js模拟datagrid

来源：互联网发布：淘宝怎么导出数据包编辑：程序博客网时间：2024/06/05 05:31

最近发现越来越懒,做后台管理对数据进行修改的时候老是做新页面,然后显示要修改的数据,用户修改,提交,太麻烦了,主要还要做一张新页面,关键还要美工,内容那么少,就那几个字段,多做一张页面真是浪费,因为是用java开发,不可能有datagrid控件的,所以这里就想模拟一个,代码比较简单.不要见笑阿!

<html>

<head><title>Simple jsp page</title>

<style>

.input {border:1 solid #000;width:80px;}

span {cursor:hand;COLOR:BLUE;}

</style>

</head>

<body>

<ul class="deplist">教科院

<li>

</TR>

<TD>教育技术学</TD>

</TR>

<TD>教育技术学</TD>

</TR>

</TABLE>

</li>

</ul>

</form>

<!--

var arr = new Array();

function edit(obj){

var ele = obj.parentElement.parentElement;

var len = ele.cells.length;

var val = "";

for(i = 1;i<len-1;i++){

val = ele.cells[i].innerText

ele.cells[i].innerHTML = "<input class='input' type=text name='t"+i+"' value="+val+">";

arr[i-1] = val;

}

obj.parentElement.innerHTML = "<span onclick='mod(this)'>修改</span> <span onclick='cancel(this)'>取消</span>";

}

function mod(obj){

var ele = obj.parentElement.parentElement;

var len = ele.cells.length;

for(i = 1;i<len-1;i++){

ele.cells[i].innerText = ele.cells[i].children[0].value;

}

obj.parentElement.innerHTML = "<span onclick='edit(this)'>编辑</span>";

}

function cancel(obj){

var ele = obj.parentElement.parentElement;

var len = ele.cells.length;

for(i = 1;i<len-1;i++){

ele.cells[i].innerText = arr[i-1];

}

obj.parentElement.innerHTML = "<span onclick='edit(this)'>编辑</span>";

}

//-->

</SCRIPT>

</div>

</body>

</html>