可编辑的 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++)
{
