当前位置：早雪网 → 网络学院 → 编程文档 → Script → 可编辑的 HTML JavaScript 表格控件 DataGrid

可编辑的 HTML JavaScript 表格控件 DataGrid

减小字体

增大字体作者：未知来源：从互联网收集整理并转载发布时间：2005-3-8 0:43:56

<%@ 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>

/*
*====================================================================================================================
*/

//定义全局的表格行列值
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 = " "
   objTR.cells[i].innerHTML = tmpStr + " ";
   continue;
  }

  //里面不包含控件
  if(tmpStr==" " || tmpStr=="")
  {
   if(objTR.cells[i].innerHTML!="")
    tmpStr += objTR.cells[i].innerHTML;
   else
    tmpStr += " ";
  }
  objTR.cells[i].innerHTML = tmpStr;

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

//对表格指定列进行排序
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

[1] [2] 下一页

Tags：编辑,HTML,JavaScript,表格,控件,DataGrid

[数据载入中...] [返回上一页] [打印]

·shtml精简教程

·[图文]“榨干”Word表格的最后空间

·使用Tag&Rename智能化编辑音频文件的标签

·[图文]AutoCAD 2002之编辑图形

·[图文]Maya UV和UV编辑实例系列(2):认识UV

·[图文]Maya UV和UV编辑实例系列(1):一个简单的例子

·perl如何内嵌html

·在ASP中使用FSO组件生成HTML页面

·谈两种数据库内容HTML格式的输出方法