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

Javascript
jquery 操作单选框，复选框，下拉列表实现代码
js 数组实现一个类似ruby的迭代器
JavaScript 组件之旅（一）分析和设计
JavaScript 组件之旅（二）编码实现和算法
JavaScript 组件之旅（三）：用 Ant 构建组件
JavaScript 组件之旅（四）：测试 JavaScript 组件
小议javascript 设计模式 推荐
浅谈javascript 面向对象编程
javascript 时间比较实现代码
js apply/call/caller/callee/bind使用方法与区别分析
JavaScript 全角转半角部分
jquery 选择器部分整理
Firebug 字幕文件JSON地址获取代码
jQuery 判断元素上是否绑定了事件
javascript实现的距离现在多长时间后的一个格式化的日期
javascript 面向对象,实现namespace,class,继承，重载
javascript 通过封装div方式弹出div窗体
JScript 脚本实现文件下载 一般用于下载木马
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
网页禁用右键实现代码（JavaScript代码）

No. « 268 269 270 271 »

技术文章搜索

关键字

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

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