当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 可编辑的 HTML JavaScript 表格控件 DataGrid

Javascript
Prototype使用指南之form.js
Prototype1.5 rc2版指南最后一篇之Position
javascript 对象的定义方法
JS多级连动菜单
javascript编程起步（第一课）
javascript编程起步（第二课）
java script编程起步（第三课）
jquery简单体验
javascript编程起步（第四课）
javascript编程起步（第五课）
javascript编程起步（第六课）
javascript编程起步（第七课）
javascript object oriented 面向对象编程初步
js宝典学习笔记（上）
JS宝典学习笔记(下)
javascript基础的动画教程，直观易懂
javascript 的面向对象特性参考
JScript|Event]面向事件驱动的编程(二)--实例讲解:将span模拟成超连接
JScript面向事件驱动的编程
一份老外写的XMLHttpRequest代码多浏览器支持兼容性

No. « 42 43 44 45 »

技术文章搜索

关键字

Javascript 中的 可编辑的 HTML JavaScript 表格控件 DataGrid

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-10   浏览: 301 ::
收藏到网摘: n/a

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