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

Javascript
颜色变换 像字符逐字输入的欢迎词
CSS 伪类实现的鼠标滑动图片链接
百度用到的Js日历 大家可以看看
CSS 渐变背景的6个演示代码
Jquery 弹出层插件实现代码
Javascript 模式实例 观察者模式
[原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
javascript window对象属性整理
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
理解 JavaScript 预解析
理解JavaScript变量作用域更轻松
JavaScript的变量作用域深入理解
javascript写的一个链表实现代码
Js 打字效果 逐一出现的文字
javascript 走马灯效果的链接提示
CSS 动态链接提示
JavaScript 事件的一些重要说明
JavaScript 三种不同位置代码的写法

No. « 266 267 268 269 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-10   浏览: 244 ::
收藏到网摘: 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>