1. 论坛系统升级为Xenforo，欢迎大家测试！
    排除公告

可编辑的 HTML JavaScript 表格控件 Data

本帖由 greatqsh 于 2005-10-28 发布。版面名称：前端开发

  1. greatqsh

    greatqsh New Member

    注册:
    2005-09-16
    帖子:
    142
    赞:
    1
    <%@ 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.width + "\" ";
    //装入默认值
    if(colDefaultValues[i-1]=="j") //j代表该列不能装入默认值
    str += "value=\"" + objTR.cells.innerText + "\"";
    else//否则装入默认值
    str += "value=\"" + colDefaultValues[i-1] + "\"";
    //控制控件的读写属性
    if(colPropertys[i-1] == 0)
    {
    str += " disabled ";
    }
    str += "/>";
    objTR.cells.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.innerHTML;
    //里面包含控件
    if(objTR.cells.firstChild!=undefined && objTR.cells.firstChild.value!=undefined)
    {
    tmpStr = objTR.cells.firstChild.value;
    if(tmpStr=="")
    tmpStr = " "
    objTR.cells.innerHTML = tmpStr + " ";
    continue;
    }

    //里面不包含控件
    if(tmpStr==" " || tmpStr=="")
    {
    if(objTR.cells.innerHTML!="")
    tmpStr += objTR.cells.innerHTML;
    else
    tmpStr += " ";
    }
    objTR.cells.innerHTML = tmpStr;
    if(objTR.cells.innerHTML=="")
    objTR.cells.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].cells[index].innerText;
    else
    tmp1 = objTB.rows[j].cells[index].firstChild.value;

    if(objTB.rows.cells[index].firstChild.value==undefined)
    tmp2 = objTB.rows.cells[index].innerText;
    else
    tmp2 = objTB.rows.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.cells[0].innerText) > parseFloat(objTable.rows[i+1].cells[0].innerText))
    {
    tmpMax = parseFloat(objTable.rows.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 = " ";
    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.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.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";
    }
     
    #1 greatqsh, 2005-10-28
  2. greatqsh

    greatqsh New Member

    注册:
    2005-09-16
    帖子:
    142
    赞:
    1
    接着上面

    //鼠标双击事件支持
    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.firstChild.value==undefined)
    {
    document.forms(form).elements("col" + i).value += trim(objTable.rows[j].cells.innerText);
    }
    else
    document.forms(form).elements("col" + i).value += trim(objTable.rows[j].cells.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>
     
    #2 greatqsh, 2005-10-28
  3. 小叶

    小叶 New Member

    注册:
    2005-09-04
    帖子:
    17,941
    赞:
    33
    不错,,自己写编辑器.
     
    #3 小叶, 2005-10-28
  4. jcking

    jcking Well-Known Member

    注册:
    2005-08-30
    帖子:
    22,282
    赞:
    70
    :D
     
    #4 jcking, 2005-10-30
(您必须注册并登陆后发新主题。)
Toggle Width
语言
简体中文