分享
 
 
 

可编辑的 HTML JavaScript 表格控件 DataGrid

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

可编辑的 HTML JavaScript 表格控件 DataGrid

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

<script language=javascript1.2>

/*

*====================================================================================================================

*/

//定义全局的表格行列值

var col = 5;

var row = 2;

//currRowIndex 选定行

var currRowIndex = 0;

//表单域数组(这部分作废)-----------------

var elementNames = new Array(col);

var k = 0;

for(k=0;k<col;k++)

elementNames[k] = k;

//---------------------------------------

//标题头数组

var headers = new Array(col);

for(k=0;k<col;k++)

{

headers[k] = "第" + k + "列";

}

//columnPropertys : 装载要创建的列读写属性

var colPropertys = new Array(col)

for(k=0;k<10;k++)

colPropertys[k] = 1;

colPropertys[0] = 0;

//colDefaultValues : 代表每次增加行的时候需要装入的默认值

var colDefaultValues = new Array(col);

for(k=0;k<col;k++)

{

if(k%2==0)

colDefaultValues[k] = "o";

else

colDefaultValues[k] = "j"; //代表这个不是默认值

}

//dataArray : 需要修改的数据集,修改之前预先装入,供用户参考

var dataArray = new Array(row*col);

var m=0,n=0;

for(m=0;m<row;m++)

{

for(n=0;n<col;n++)

{

dataArray[m*col + n] ="array(" + m + "," + n + ")"; //注意这里代表2维数组

}

}

/*

*====================================================================================================================

*/

var oPopup = window.createPopup();

//创建一个公共的可编辑的表格

//参数:

// formName : 表单名

// action : 代表当前要执行的提交动作 : 1:add 2:del 3:modefy 4:query

// formAction : 表格对应Form的Action

// tableId :表格ID

// colNum:表单列数目

// rowNum:初始表格的行数目

function CreateTable(formName,action,formAction,tableId,colNum,rowNum)

{

var startStr = new String("");

var endStr = new String("");

var colStr = new String("");

startStr = "<form name=\"" + formName + "\" method=post action=\"" + formAction + "\">";

startStr += "<table id=\"" + tableId +"\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">";

colStr = createTrs(colNum,rowNum);

endStr = "</table>";

//创建用来获取最后表格输出数据的隐藏域

var hiddens = CreateHiddens(colNum,action);

endStr += hiddens;

endStr += "</form>";

//输出表格

//document.forms(0).elements("t").value = (startStr + colStr + endStr);

document.write(startStr + colStr + endStr);

}

function CreateHiddens(cols,action)

{

var str = new String("");

var i=0;

for(i=0;i<cols;i++)

{

str +="<input type=\"hidden\" name=\"col" + (i+1) + "\" >";

}

str+="<input type=hidden name=\"action\" value=\"" + action + "\">";

return str;

}

function createTrs(colNum,rowNum)

{

var colStr = new String("");

var i = 0;

var j = 0;

colStr += "<tr bgColor='#00ccff'>"

//创建表头行

colStr += "<td onClick=orderTb1(this,1); onMouseOver=\"showTip('单击对本列排序');\" onMouseOut=\"hideTip();\"><center>"

colStr += "序号";

colStr += "</center></td>";

for(i=1;i<=colNum;i++)

{

colStr += "<td align=center onClick=orderTb1(this,1); onMouseOver=\"showTip('单击对本列排序');\" onMouseOut=\"hideTip();\" >";

colStr += headers[i-1];

colStr += "</td>";

}

//创建表体行

for(i=0;i<rowNum;i++)

{

colStr += "<tr ";

colStr += "onDblClick=\"ChangeInput(this);\" "; //表格行中的事件支持部分

colStr += "onBlur=\"ResetTR(this);\" >";

//创建每行的所有单元格

colStr += "<td onClick=SelectRow(this);>";

colStr += i+1;

colStr +="</td>";

for(j=1;j<=colNum;j++)

{

colStr += "<td onMouseOut=\"this.bgColor='#FFFFFF';\" onMouseOver=\"this.bgColor='#00CCFF';\" >";

colStr += dataArray[i*colNum+j-1];

colStr +="</td>";

}

colStr +="</tr>";

}

return colStr;

}

//把某行转变为输入状态

function ChangeInput(objTR)

{

var str = new String("");

var i = 0;

for(i=1;i<objTR.cells.length;i++)

{

str = "<input type=text name=\"" + elementNames[i-1] + "\" style=\"width:" + objTR.cells[i].width + "\" ";

//装入默认值

if(colDefaultValues[i-1]=="j") //j代表该列不能装入默认值

str += "value=\"" + objTR.cells[i].innerText + "\"";

else//否则装入默认值

str += "value=\"" + colDefaultValues[i-1] + "\"";

//控制控件的读写属性

if(colPropertys[i-1] == 0)

{

str += " disabled ";

}

str += "/>";

objTR.cells[i].innerHTML = str;

}

objTR.ondblclick=doNothing; //使行保持原始状态

}

//把行恢复为非输入状态

function ResetTR(objTR)

{

var str = new String("");

var i = 0;

for(i=0;i<objTR.cells.length;i++)

{

var objChild;

var tmpStr = "";

tmpStr = objTR.cells[i].innerHTML;

//里面包含控件

if(objTR.cells[i].firstChild!=undefined && objTR.cells[i].firstChild.value!=undefined)

{

tmpStr = objTR.cells[i].firstChild.value;

if(tmpStr=="")

tmpStr = "&nbsp;"

objTR.cells[i].innerHTML = tmpStr + "&nbsp;";

continue;

}

//里面不包含控件

if(tmpStr=="&nbsp;" || tmpStr=="")

{

if(objTR.cells[i].innerHTML!="")

tmpStr += objTR.cells[i].innerHTML;

else

tmpStr += "&nbsp;";

}

objTR.cells[i].innerHTML = tmpStr;

if(objTR.cells[i].innerHTML=="")

objTR.cells[i].innerHTML="&nbsp;";

}

}

//对表格指定列进行排序

function orderTB(objTB,index,type){

for(var i=1;i<(objTB.rows.length-1);i++){

for(var j=i+1;j<objTB.rows.length;j++){

var tmp1,tmp2;

if(objTB.rows[j].cells[index].firstChild.value==undefined)

tmp1 = objTB.rows[j].cells[index].innerText;

else

tmp1 = objTB.rows[j].cells[index].firstChild.value;

if(objTB.rows[i].cells[index].firstChild.value==undefined)

tmp2 = objTB.rows[i].cells[index].innerText;

else

tmp2 = objTB.rows[i].cells[index].firstChild.value;

if(tmp1>tmp2)

{

objTB.moveRow(j,i);

}

}

}

}

function orderTb1(objTD,type)

{

var objTR =objTD.parentElement;

var objTable = objTR.parentElement;

var colIndex = objTD.cellIndex;

orderTB(objTable,colIndex);

}

//在表格末尾增加一行

function InsertRow(tableId)

{

var objTable = document.getElementById(tableId);

var col = objTable.cells.length/objTable.rows.length;

var row = objTable.rows.length;

var objRow = objTable.insertRow(); //增加行

var i = 0;

//取得最大序号

var max1 = 1;

for(i=1;i<row-1;i++)

{

var tmpMax = 1;

if(parseFloat(objTable.rows[i].cells[0].innerText) > parseFloat(objTable.rows[i+1].cells[0].innerText))

{

tmpMax = parseFloat(objTable.rows[i].cells[0].innerText);

}

else

{

tmpMax = parseFloat(objTable.rows[i+1].cells[0].innerText);

}

if(tmpMax>=max1)

max1= tmpMax;

}

for(i=1;i<=col;i++)

{

var objCell = objRow.insertCell();

objRow.cells[0].innerText = parseFloat(max1)+1;

objCell.innerHTML = "&nbsp;";

objCell.onmouseover = Td_MouseOver_Handle;

objCell.onmouseout = Td_MouseOut_Handle

objRow.cells[0].onclick = TD_Click_Handle;

objRow.cells[0].onmouseover = doNothing;

objRow.cells[0].onmouseout = doNothing;

}

//为新增的行提供事件绑定支持

//objRow.attachEvent('ondblclick', dblClick_Handle);

objRow.ondblclick = dblClick_Handle;

objRow.onblur = click_Handle;

}

//删除最后1行

function DeleteRow(tableId)

{

var objTable = document.getElementById(tableId);

if(objTable.rows.length==1)

{

alert("对不起,你不能删除表格头!!!");

return;

}

if(confirm("确定删除?"))

{

objTable.deleteRow();

}

}

//选定指定行

function SelectRow(objTD)

{

var objTR =objTD.parentElement;

var objTable = objTR.parentElement;

for(var i=1;i<objTable.rows.length;i++)

objTable.rows[i].cells[0].bgColor = "#ffffff";

objTD.bgColor="#ff0000";

currRowIndex = objTR.rowIndex;

}

//删除指定的行

function DeleteOneRow(tableId,rowIndex)

{

var objTable = document.getElementById(tableId);

var objTable = document.getElementById(tableId);

if(objTable.rows.length==1 || rowIndex==0)

{

alert("对不起,你首先必须选择要删除的行!!!");

return;

}

if(confirm("确定删除?"))

{

objTable.deleteRow(rowIndex);

currRowIndex = 0;

}

else

{

for(var i=1;i<objTable.rows.length;i++)

{

objTable.rows[i].cells[0].bgColor = "#ffffff";

currRowIndex = 0;

}

}

}

//鼠标选择指定列

function TD_Click_Handle()

{

SelectRow(this)

}

//鼠标移入事件支持

function Td_MouseOver_Handle()

{

this.bgColor = "#00ccff";

}

//鼠标移出事件支持

function Td_MouseOut_Handle()

{

this.bgColor = "#ffffff";

}

//鼠标双击事件支持

function dblClick_Handle()

{

ChangeInput(this);// 切换到输入状态

this.ondblclick=doNothing;

}

//鼠标单击事件支持

function click_Handle()

{

ResetTR(this);

}

//保持行的原始状态

function doNothing()

{

return;

}

function showTip(msg)

{

with (oPopup.document.body)

{

style.backgroundColor="lightyellow";

style.border="solid black 1px";

style.fontSize = 12;

innerHTML=msg;

}

oPopup.show(event.x, event.y, 95, 16, document.body);

}

function hideTip()

{

if(oPopup!=undefined)

oPopup.hide();

}

//==============================格式化字符串函数(删除前后空格)========================================================

function trim(str)

{

var tmpStr = new String(str);

var startIndex = 0,endIndex = 0;

for(var i=0;i<tmpStr.length;i++)

{

if(tmpStr.charAt(i)==" ")

{

continue;

}

else

{

startIndex = i;

break;

}

}

for(var i=tmpStr.length;i>=0;i--) //注意开始最大下标必须减1

{

if(tmpStr.charAt(i-1)==" ")

{

continue;

}

else

{

endIndex = i;

break;

}

}

tmpStr = tmpStr.substring(startIndex,endIndex);

return tmpStr;

}

//====================================================================================================================

//submit 方法

function getData(tableId,form)

{

var objTable = document.getElementById(tableId);

var cols = objTable.cells.length/objTable.rows.length-1;

var rows = objTable.rows.length-1;

//为每个隐藏域设置值

var i=0,j=0;

for(i=1;i<=cols;i++)

{

for(j=1;j<=rows;j++)

{

if(objTable.rows[j].cells[i].firstChild.value==undefined)

{

document.forms(form).elements("col" + i).value += trim(objTable.rows[j].cells[i].innerText);

}

else

document.forms(form).elements("col" + i).value += trim(objTable.rows[j].cells[i].firstChild.value);

document.forms(form).elements("col" + i).value += "#";

}

}

document.forms(form).submit();

}

//====================================================================================================================

</script>

</head>

<body>

<input type="button" onClick="InsertRow('tableId');" value="InsertRow">

<input type="button" onClick="DeleteRow('tableId');" value="DeleteRow">

<input type="button" onClick="getData('tableId','specForm');" value="submit">

<input type="button" onClick="DeleteOneRow('tableId',currRowIndex)" value="Delete Spec Row">

<input type="button" onClick="orderTB(document.getElementById('tableId'),3);" value="order Spec Col">

</body>

</html>

<script language="javascript1.2">

CreateTable('specForm','1','sub.jsp','tableId',col,row);

</script>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有