关闭

js源码--表格的操作

994人阅读 评论(0) 收藏 举报
转自:

LxcJie的专栏

上一个项目使用了一个超级表格,现在共享出来,希望对大家有所参考.
   
    a, 此表格可以实现增加,删除,上移,下移,修改等很多的操作,并且,可以设置每一列的编辑方式.
    b, 目前含有两种编辑方式: 1,文本框编辑 2,下拉框编辑 (需要提供两个数组,一个是text,一个是value)
    c, 编辑过程中,可以使用tab键进入下一个单元格进行编辑,也可以之间使用enter键结束编辑
    d, 提供设置图标的功能
    e, 把下面代码拷贝到htm文件中运行查看效果,代码量很大
    f, 嘿嘿,一定要看看效果哦 :)


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.divClass{height:250px;width:100%;overflow:auto;}
td{height:22px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;border-right:1px solid black;background-color:#999999}
table{border-top:1px solid black;border-left:1px solid black;font-size:13px;}
input{border:1px solid black;}
.TrOdd{font-family: "宋体";font-size: 12px;background-color: #FFFFFF;}
.TrEven{font-family: "宋体";font-size: 12px;background-color: #CCCCCC;}
</style>
<script language="javascript">
/*****************************可以把下面这部分代码提到一个js文件中***************************/
/*********************************** powerTableEdit.js *********************************/
/****************************************************************************************
 * created by LxcJie 2004.3.1
 *
 * 用法:
 *    1,首先创建表格对象: var pt = new PowerTableEdit("table1");
 *                          其中,"table1"为表格的id
 *                         
 *    2,设置表格的编辑方式,调用pt对象的setCol方法,此方法有三个参数:
 *   
 *                          setCol(colNum,colSty,sDa)
 *                         
 *                          > colNum:为准备编辑的列编号,第一列编号为0
 *                          > colSty:为准备编辑的方式,txt为文本编辑方式,sel为下拉编辑方式
 *                          > sDa:如果选择的编辑方式为下拉编辑方式,则此参数有效,代表下拉框中的预置数据,是数组类型
 *                 
 *    3, 在按钮中调用相应的方法(注意:上移行和下移行按钮的id必须为moveUp和moveDown):如:
 *
 *      <!--增加行-->
 *      <input onclick=add_row(mainTab) type=button value=ins_row>
 *      <!--删除行-->
 *      <input onclick=del_row(mainTab) type=button value=Del_row>
 *      <!--重置表格-->
 *      <input onclick=res_tab() type=button value=Restore>
 *     
 *      <!--上移行-->
 *      <input id=moveUp onclick=Move_up(mainTab) type=button value=Up>
 *      <!--下移行-->      
 *      <input id=moveDown onclick=Move_down(mainTab) type=button value=Down>
 *    4, 如果想取消编辑功能,调用方法setEditable(false)
 *    5, 增加一行时,可以先调用selCellData方法,传入一个数组,来设置增加一行时没格单元格的数据
 *
 *    5,例如:
 *              var arr = new Array();
 *              arr[0] = "a";
 *              arr[1] = "b";
 *              arr[2] = "c";
 *             
 *              var arr1 = new Array();
 *              arr1[0] = "1";
 *              arr1[1] = "2";
 *              arr1[2] = "3";
 *             
 *              //页面table的id为table1
 *              var pt = new PowerTable("table1");
 *             
 *              //表格的第一列为文本编辑方式
 *              pt.setCol(0,'txt');
 *              //表格的第二列为下拉框编辑方式,指定数据为数组arr
 *              pt.setCol(2,'sel',arr);
 *              //如果不想此表格有编辑功能 pt.setEditable(false)
 *             
 *              //增加一行时:
 *                  var arrDa = new Array();
 *                  arrDa[0] = "九";
 *                  arrDa[1] = "Tomcat";
 *                  arrDa[2] = "数据四";
 *                  arrDa[3] = "Ellise";
 *                  arrDa[4] = "aaaa";
 *                  arrDa[5] = "2.112.521";
 *                  arrDa[6] = "美国";
 *                  pt.setCellData(arrDa); 
 *                 
 *              //然后调用add_row(mainTab)方法。
 *              //也可以不设置,增加一行,则自动填充每列的列数
 *
 *修改履历:
 *      2004.04.12 刘肖冲 增加函数
 *              getColData(colIndex,isImg) //得到指定列的所有值,colIndex为列号,isImg指定此行是否为图片
 *              getRowData(rowIndex);//得到指定行的所有值,rowIndex为行号
 *
 *      2004.04.12 刘肖冲 改变select的接口
 *              var arrText = new Array();
 *              arrText[0] = "数据一";
 *              arrText[1] = "数据二";
 *              arrText[2] = "数据三";
 *              arrText[3] = "数据四";
 *              var arrValue = new Array();
 *              arrValue[0] = "1";
 *              arrValue[1] = "2";
 *              arrValue[2] = "3";
 *              arrValue[3] = "4"; 
 *              pt.setCol(3,'sel',arrText,arrValue);
 *
 *              arrText为select的text,arrValue为select的value值
 *              注:构建表格时,必须select所在的所有td中指定data等于value值,例如:<td data="1">数据一</td>
 *    2004.6.28 刘肖冲修改addRow()方法
 *                      增加一条数据时,如果是select形式的编辑方式,则搜索sValue和sText
                        找到与输入值相符的value赋给td的data
 *********************************************************************************************/

var mainTab = null;
var currentRowIndex = null;
var currentCell = null;
var orgContent = "";
//标记是否能编辑
var editbleFlag = true;

var showColume = false;

//选中行默认颜色
var currentBgc  = "cornflowerblue";
//选中行字体颜色
var currentFontColor = "black";

//用来保存下拉菜单中的option项
var optionText = "";
//图片列号
var imagePos = 0;
//保存每一列的编辑类型
var colStyle = new Array();
//保存下拉框中的text和value
var sText = new Array();
var sValue = new Array();
//增加是各个单元格的数据
var cellData = new Array();
/**
 * 建立PowerTableEdit类,该类实现表格的自由编辑,删除,增加,上下移动
 * 其中自由编辑可以指定编辑方式及哪一列需要编辑
 * 使用时,只需要利用表格的id创建PowerTableEdit对象
 */
function PowerTableEdit(tableId)
{
    //当前选中行
    currentRowIndex = null;
    //当前编辑cell
    currentCell = null;

    mainTab = document.all(tableId);
    //获取已定义的颜色
    readDef(mainTab);

    mainTab.onclick = clickIt;
    //mainTab.ondblclick    = dblclickIt;
   
    //设置select下拉框的数据
    this.setCol = setColStyle;
    this.setEditable = setEditable;
    this.setCellData = setCellData;
    this.getColData = getColData;
    this.getRowData = getRowData;
    //原始表格,可以支持reset
    orgContent = mainTab.outerHTML;

    //初始化增加表格的数据 
    for(var i=0; i < mainTab.rows[0].cells.length; i++)
        cellData[i] = "&nbsp;";
    setEvenOddColor(mainTab);
}

//为select的onchange事件指定动作
function selectChangeAction()
{
    var cellNum = currentCell.cellIndex;
    var valueOfSel = document.all.powerTableSel.value;
    //给单元格的data赋值
    event.srcElement.parentNode.data = event.srcElement.value;
   
    //动作代理
    selectProxy(cellNum,valueOfSel);
}
function selectProxy(cellNum, valueOfSel)
{}

//获取指定列的所有数据,以数组形式返回,如果是文本编辑方式,就返回文本内容,
//如果是下拉框编辑方式,则返回其value值,即td中的data值
//colIndex为列号,isImg为是否为图片
function getColData(colIndex,isImg)
{
    if(colIndex == "")
        return null;
    var colNum = colIndex == null ? 0 : colIndex;
    //如果为指定此参数,则默认为false,即不是图片格式数据
    var isImgCol = isImg == null ? false : isImg;
    var arrCelData = new Array();
    if(//D/g.test(colNum)
        || colNum >= mainTab.rows[0].cells.length
         || colNum < 0)
        return null;
    if(isImgCol)
    {
        for(var i=1; i<mainTab.rows.length; i++)
        {
            if(mainTab.rows[i].cells[0].children[0]
                && mainTab.rows[i].cells[0].children[0].tagName.toLowerCase() == "img")
                arrCelData[i-1] = mainTab.rows[i].cells[0].data;
            else
                arrCelData[i-1] = null;
        }
    }  
    else
    {
        if(colStyle[parseInt(colNum)] == "txt")
        {
            for(var i=1; i<mainTab.rows.length; i++)
            {
                if(mainTab.rows[i].cells[colNum].children.length>0)
                    arrCelData[i-1] = mainTab.rows[i].cells[colNum].children[0].value;
                else
                    arrCelData[i-1] = mainTab.rows[i].cells[colNum].innerText;
            }              
        }
        else if(colStyle[parseInt(colNum)] == "sel")
        {
            for(var i=1; i<mainTab.rows.length; i++)
                arrCelData[i-1] = mainTab.rows[i].cells[colNum].data;
        }
        else
        {
                for(var i=1; i<mainTab.rows.length; i++)
                arrCelData[i-1] = mainTab.rows[i].cells[colNum].innerText;             
        }
    }
    return arrCelData;
}

//获取指定行的所有数据,以数组形式返回,如果是文本编辑方式,就返回文本内容,
//如果是下拉框编辑方式,则返回其value值,即td中的data值
//rowIndex为列号,isImg为是否为图片,如果是图片,则返回图片的id
function getRowData(rowIndex)
{
    var arrRowData = new Array();
    var rowNum = rowIndex == null ? 1 : rowIndex;
    if(//D/g.test(rowNum)
        || rowNum >= mainTab.rows.length
         || rowNum <= 0)
        return null;
    for(var i=0; i<mainTab.rows[rowIndex].cells.length; i++)
    {
        with(mainTab.rows[rowIndex].cells[i])
        {
            if(children.length > 0)
            {
                if(children[0].tagName.toLowerCase() == "img")
                    arrRowData[i] = data;
                else if(children[0].tagName.toLowerCase() == "select")
                    arrRowData[i] = data;
                else if(children[0].tagName.toLowerCase() == "input")
                    arrRowData[i] = children[0].value;
                else
                    arrRowData[i] = innerText;
            }
            else
            {
                if(colStyle[i] == "sel")
                    arrRowData[i] = data;
                else
                    arrRowData[i] = innerText;
            }
        }
    }
    return arrRowData;
}

//如果是input或textarea,则允许选中里面的文字
document.onselectstart = function()
                         {
                             var oObj = event.srcElement;
                             if(oObj.tagName.toLowerCase() != "input"
                                && oObj.tagName.toLowerCase()!= "textarea")
                                return false;
                         }

/**
 *  设置编辑方式
 *  colNum 为列编号
 *  colSty为编辑类型,分为:txt-文本框编辑; sel-下拉框 编辑
 *  sDa 当编辑方式是下拉框方式时,传入下拉框中的数据数组
 */
function setColStyle(colNum,colSty,sTxt,sVal)
{
    colStyle[parseInt(colNum)] = colSty;
    sText[parseInt(colNum)] = sTxt == null ? "" : sTxt;
    sValue[parseInt(colNum)] = sVal == null ? "" : sVal;
}

//在表格的指定位置插入标记图标,其中,
//oImg是用来插入的图标对象,
//rIndex,是没个图标的id,如果一列中要采用不同的标志,该值不可相同
//nCell,为设置的图标的列,默认为第一列
function insertImg(oImg,rIndex,nCell)
{
    if(nCell == null)
        nCell = 0;
    else
        imagePos = nCell;

    var sHtml = "<img id=imgIndex_"+rIndex+" src='"+oImg.src+"' width=16 height=16/>";
   
    if(!currentRowIndex)
    {
        alert("请选中要设置图片的行!");
        return;
    }
   
    //检测所选行已经存在标志时的情况
    if(mainTab.rows[currentRowIndex].cells[nCell].children[0])
    {
        if(mainTab.rows[currentRowIndex].cells[nCell].children[0].id != "imgIndex_"+rIndex)
            alert("此位置已经存在其它的标志!");
        else
            return;
    }      
    else
    {
        //遍历整个表格,把原始标志还原
        for(var i=0; i<mainTab.rows.length; i++)
        {
            with(mainTab.rows[i].cells[nCell])
            {
                if(children[0] && children[0].id == 'imgIndex_'+rIndex && i!= currentRowIndex)
                {
                    innerHTML = "&nbsp;";
                    data = null;
                }
            }
        }
        //置新标志
        mainTab.rows[currentRowIndex].cells[nCell].innerHTML = sHtml;
        mainTab.rows[currentRowIndex].cells[nCell].data = rIndex;
    }
}

//设置是否需要编辑的标记,如果设为true,则表格能编辑,反之不能,默认为可以编辑
function setEditable(editFlag)
{
    if(editFlag == null)
        editbleFlag == true;
    else
        editbleFlag = editFlag;
}

//设置增加时各个单元格的数据
function setCellData(arrData)
{
    //如果没有设置数据,则插入各个单元格所在的列数
    if(arrData == null)
    {
        for(var i=0; i<mainTab.rows[0].cells.length; i++)
            cellData[i] = i;
    }
    else
    {
        if(arrData.length >= arrData.length)
        {
            for(var i=0; i<mainTab.rows[0].cells.length; i++)
                cellData[i] = arrData[i];
        }
        //数据不足,补以列号
        if(arrData.length < mainTab.rows[0].cells.length)
        {
            for(var i=0; i<arrData.length; i++)
                cellData[i] = arrData[i];
            for(var i= arrData.length; i<mainTab.rows[0].cells.length; i++)
                cellData[i] = i;
        }
    }
}

function clearColor()
{
    objTable=mainTab;
    if (currentCell != null)
        if (currentCell.children.length>0)
    {
        if(currentCell.children[0].tagName.toLowerCase() == "input")
            currentCell.innerText=currentCell.children[0].value;
        else if(currentCell.children[0].tagName.toLowerCase() == "select")
            currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text;     
    }
    ClearColor(objTable,currentRowIndex,currentCell);
}

function document.onclick()
{
    clearColor();
    currentRowIndex  = null;
    currentCell = null;
}

function readDef(objTable)
{
    ReadOrgColor(objTable);
}

function clickIt()
{
    event.cancelBubble=true;
    var currentObject = event.srcElement;
    var i = 0 ,j = 0;
    //原编辑项变为表格 
    if(currentCell!=null && currentRowIndex!=0
        && currentObject.type!="select-one"
            && currentObject.type!="text")
    if (currentCell.children.length>0 )
    {
        if(currentCell.children[0].tagName.toLowerCase() != "img"
             && currentCell.children[0].tagName.toLowerCase() != "a")
        {
            if(currentCell.children[0].tagName.toLowerCase() == "input")
                currentCell.innerText=currentCell.children[0].value;
            else if(currentCell.children[0].tagName.toLowerCase() == "select")
                currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text;
        }
    }
    if(currentObject.tagName.toLowerCase() != "table"
        && currentObject.tagName.toLowerCase() != "tbody"
           && currentObject.tagName.toLowerCase() != "tr")
    {
        var currentTd   = getElement(currentObject,"td");
        if(currentTd==null) return;
       
        //modified 2004.04.09 更改点击图标,链接可以选择单行
        if (currentTd.children.length<=0
            || currentTd.children[0].tagName.toLowerCase() == "a"
             || currentTd.children[0].tagName.toLowerCase() == "img")
        //end modified 2004.04.09 更改点击图标,链接可以选择单行
        {
            var currentTr   = currentTd.parentElement;
            var objTable = getElement(currentTd,"table");
            var i = 0;
            clearColor();
            currentRowIndex = currentTr.rowIndex;
            //设置选中的行
            if(currentRowIndex!=0)
            {
                for(i=0;i<currentTr.cells.length;i++)
                {
                    with(currentTr.cells[i])
                    {
                        style.backgroundColor=currentBgc;
                        style.color=currentFontColor;
                    }
                }
            }
        }

        //根据标记设置是否可编辑
        if(editbleFlag)
        {
            currentCell= currentTd;
               
            /*根据不同的设置进行编辑选择*/
            if(currentCell.children.length!=1 && currentCell.parentNode.rowIndex != 0) 
            {
                var cellN = currentCell.cellIndex;
                if(colStyle[parseInt(cellN)] == 'txt')
                    editCell(mainTab,currentCell,'txt',true);  
                else if(colStyle[parseInt(cellN)] == 'sel')
                    editCell(mainTab,currentCell,'sel',true,sText[parseInt(cellN)],sValue[parseInt(cellN)]);
               
                if(currentCell.children.length > 0)
                {
                    if(currentCell.children[0].type == "select-one")
                        currentCell.children[0].focus();
                    else
                        currentCell.children[0].select();
                }
            }
        }
    }

    selectRowProxy(currentRowIndex);
}

//增加点击一行时的代理动作,参数是选中当前行号
function selectRowProxy(currentRowIndex){}

//表格指定位置变为可编辑
//目前支持文本和下拉框
function editCell(oTable,oCell,editType,bEditable,sText,sValue)
{
    if (bEditable)
    {  
        switch(editType)
        {
            case 'txt':
                if(sText == null)
                    sText = true;
                oCell.innerHTML = "<input id=dyText type=text  size=10 onKeyDown = judgeKeyToDo() value="
                                  + oCell.innerText.replaceHTML() + ">";
                break;
            case 'sel':        
                var preValue = oCell.data;//获取当前表格的内容,在下拉框中选中
                for(var i=0; i<sValue.length; i++)
                {
                    //如果是原有表格的内容,则默认选中
                    if(sValue[i] == preValue)
                        optionText += "<option value='"+sValue[i]+"' selected>"+sText[i];
                    else                   
                        optionText += "<option value='"+sValue[i]+"'>"+sText[i];
                }
                oCell.innerHTML="<select id=powerTableSel onKeyDown = judgeKeyToDo()>"+optionText+"</select>";
                //为select的onchange指定事件
                oCell.children[0].onchange = selectChangeAction;
                //清空缓冲区
                optionText = "";
                break;
        }
    }
}

//向上移动指定表格的行
function Move_up(objTable)
{
    event.cancelBubble=true;
    if(currentRowIndex == null)
        return;

    if(currentRowIndex <= 1)
        return;
    else
    {
        MoveUp(objTable,currentRowIndex);
        //当前选择也上移
        --currentRowIndex;
    }
    setEvenOddColor(mainTab);
}

function Move_down(objTable)
{
    event.cancelBubble=true;
    if(currentRowIndex == null)
        return;
       
    if(currentRowIndex == mainTab.rows.length-1)
        return;
    else
    {
        MoveDown(objTable,currentRowIndex);
        //当前选择也下移
        ++currentRowIndex;
    }
    setEvenOddColor(mainTab);
}

function add_row(objTable)
{
    event.cancelBubble=true;
    clearColor();
    var cellNow = cellData;
    //如果没选中行,则在表格的最下方插入
    var pos = currentRowIndex==null?objTable.rows.length:(currentRowIndex+1);
    addRow(objTable,pos,cellNow);

    currentCell=null;
    readDef(objTable);
    setEvenOddColor(mainTab);
    //清除设置的数据
    for(var i=0; i < mainTab.rows[0].cells.length; i++)
        cellData[i] = "&nbsp;";
}

//删除行,并处理当前选择项为不选择
function del_row(objTable)
{
    if(currentRowIndex == null)
        return;

    if(confirm("确实要删除第"+currentRowIndex+"行吗?"))
    {
        delRow(objTable,currentRowIndex);
        currentRowIndex=null;
        currentCell=null;
        clearColor();
        setEvenOddColor(mainTab);
    }
}

function res_tab(objTable)
{
    objTable.outerHTML=orgContent;
    PowerTableEdit(objTable.id);
}

//在表格中指定位置,插入元素
function addRow(oTable,rowIndex2Add,c)
{
    if (rowIndex2Add<0 || rowIndex2Add>oTable.rows.length)
        return;
    var currentCell;
    var newRow=oTable.insertRow(rowIndex2Add);
    for (var i=0;i<c.length;i++)
    {
        //modified by liu_xc 2004.6.28
        //增加一条数据时,如果时select形式的编辑方式,则搜索sValue和sText
        //找到与输入值相符的value赋给td的data
        if(colStyle[i] == "sel")
        {
            //如果没有设置数据而直接添加,会在编辑方式为
            //select的td中添加选择框数据的第一项
            if(c[i] == "&nbsp;" || c[i] == "")
                c[i] = sText[i][0];
            currentCell=newRow.insertCell(i);
            currentCell.innerHTML= c[i];
            for(var j=0; j<sText[i].length; j++)
            {
                if(c[i] == sText[i][j])
                {
                    currentCell.data= sValue[i][j];
                }
            }
        }
        else
        {
            currentCell=newRow.insertCell(i);
            currentCell.innerHTML= c[i];
        }
        //modified by liu_xc 2004.6.28
        //增加一条数据时,如果时select形式的编辑方式,则搜索sValue和sText
        //找到与输入值相符的value赋给td的data
    }
}

//删除指定行
function delRow(oTable,nRowIndex2Del)
{
    //不删除标题行;指定行不在表格中也不执行删除;
    if (oTable.rows.length==1
          ||nRowIndex2Del==null
            ||nRowIndex2Del==0
              || nRowIndex2Del>=oTable.rows.length)
        return;
    else
        oTable.deleteRow(nRowIndex2Del);
}

function MoveUp(oTable,nRowIndex2Move)
{
    //判断移动的行是否合法
    if(nRowIndex2Move==null
        || nRowIndex2Move<=1
            || nRowIndex2Move>=oTable.rows.length)return;
           
    ChangeRow(oTable,nRowIndex2Move,--nRowIndex2Move);
}

//向下移动指定表格的行
function MoveDown(oTable,nRowIndex2Move)
{
    //判断移动的行是否合法
    if(nRowIndex2Move==null
        || currentRowIndex==oTable.rows.length
            || currentRowIndex==0)
        return;
           
    ChangeRow(oTable,nRowIndex2Move,++nRowIndex2Move);
}

//指定表单的两行互换
function ChangeRow(oTable,nRowIndex1,nRowIndex2)
{
    oTable.rows[nRowIndex1].swapNode(oTable.rows[nRowIndex2]);
}

//获取指定tag的元素 [逐级查找]
function getElement(oElement,sTag)
{
    sTag = sTag.toLowerCase();
    if(oElement.tagName.toLowerCase()==sTag)
        return oElement;
    while(oElement=oElement.offsetParent)
    {
        if(oElement.tagName.toLowerCase()==sTag)
            return oElement;
    }
    return(null);
}

function ClearColor(oTable,nCurRowIndex,oCurCell)
{
    //清除选中行表现
    if(nCurRowIndex!=null && nCurRowIndex != -1)
    {
        for(i=0;i<oTable.rows[nCurRowIndex].cells.length;i++)
        {
            with(oTable.rows[nCurRowIndex].cells[i])
            {
                style.backgroundColor=oBgc;
                style.color=oFc;
            }
        }
    }
    //清除可编辑表格
    if(oCurCell!=null)
    {
        if (oCurCell.children.length>0 )
        {
            if(oCurCell.children[0].tagName.toLowerCase() != "img"
                &&oCurCell.children[0].tagName.toLowerCase() != "a")
            {
                if(oCurCell.children[0].tagName.toLowerCase() == "input")
                    oCurCell.innerHTML=oCurCell.children[0].value.replaceHTML();
                else if(oCurCell.children[0].tagName.toLowerCase() == "select")
                    oCurCell.innerHTML=oCurCell.children[0].options[oCurCell.children[0].selectedIndex].text;
            }
        }
    }
}

//读取表格现有颜色
function ReadOrgColor(oTable)
{
    for(var i=0;i<oTable.rows.length;i++)
    {
        for(var j=0;j<oTable.rows[i].cells.length;j++)
        {
            with(oTable.rows[i])
            {
                cells[j].oBgc = "";
                cells[j].oFc  = "";
            }
        }
    }
}

function setEvenOddColor(mainTab)
{
    //增加奇偶行的css控制 奇行:tdOdd,偶行:tdEven
    for(var i=1; i<mainTab.rows.length; i++)
    {
        if(i%2 == 0)
            mainTab.rows[i].className = "TrEven";
        else
            mainTab.rows[i].className = "TrOdd";
    }
}

//根据在编辑框按键的不同而采取不同的动作
function judgeKeyToDo()
{
    //按键是tab
    if(event.keyCode == 9)
    {
        var cellN;
        if(currentCell.cellIndex == mainTab.rows[currentRowIndex].cells.length-1)
            cellN = -1;
        else
            cellN = currentCell.cellIndex;
        var nextCell = mainTab.rows[currentRowIndex].cells[cellN+1];       
        //如果下一个表格未指定编辑方式,跳过
        while(colStyle[parseInt(cellN+1)] == null)
        {
            cellN = cellN + 1;
            nextCell = mainTab.rows[currentRowIndex].cells[cellN+1];
        }
        //如果编辑方式为txt
        if(colStyle[parseInt(cellN+1)] == 'txt')
        {
            if(currentCell.children.length>0)
            {
                if(currentCell.children[0].tagName.toLowerCase() == "input")
                    currentCell.innerHTML=currentCell.children[0].value.replaceHTML();
                else if(currentCell.children[0].tagName.toLowerCase() == "select")
                    currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text;
            }
            editCell(mainTab,nextCell,'txt',true);
        }
        //如果编辑方式为select
        else if(colStyle[parseInt(cellN+1)] == 'sel')
        {
            if(currentCell.children.length>0)
            {
                if(currentCell.children[0].tagName.toLowerCase() == "input")
                    currentCell.innerHTML=currentCell.children[0].value.replaceHTML();
                else if(currentCell.children[0].tagName.toLowerCase() == "select")
                    currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text;
            }
            editCell(mainTab,nextCell,'sel',true,sText[parseInt(cellN+1)],sValue[parseInt(cellN+1)]);
        }
        //设置当前表格为下一个单元格
        currentCell = nextCell;
       
        if(currentCell.children.length > 0)
        {
            if(currentCell.children[0].type == "select-one")
                setTimeout('currentCell.children[0].focus()',10);
            else
                setTimeout('currentCell.children[0].select()',10);
        }
    }
    //如果按键是enter
    if(event.keyCode == 13)
    {
        if(currentCell.children[0].tagName.toLowerCase() == "input")
            currentCell.innerHTML=currentCell.children[0].value.replaceHTML();
        else if(currentCell.children[0].tagName.toLowerCase() == "select")
            currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text;
    }
}

String.prototype.replaceHTML = function()
{
    var result = this;
    result = result.replace(/&/g,"&amp;");
    result = result.replace(/</g,"&lt;");
    result = result.replace(/>/g,"&gt;");
    result = result.replace(//s/g,"&nbsp;");
    if(result == "")
        result = "&nbsp;";
    return result;
}
/*********************************** powerTableEdit.js *********************************/
</script>
<script language="javascript">

function initTable()
{
    pt = new PowerTableEdit("table1");
    var arrText = new Array();
    arrText[0] = "数据一";
    arrText[1] = "数据二";
    arrText[2] = "数据三";
    arrText[3] = "数据四";
    var arrValue = new Array();
    arrValue[0] = "1";
    arrValue[1] = "2";
    arrValue[2] = "3";
    arrValue[3] = "4";
   
    pt.setCol(2,'txt');
    pt.setCol(3,'sel',arrText,arrValue);
    pt.setCol(4,'txt');
    pt.setCol(5,'txt');
    pt.setCol(6,'txt');
    pt.setCol(7,'txt');
}

function add()
{
    var arrDa = new Array();
    arrDa[0] = "&nbsp;";
    arrDa[1] = "九";
    arrDa[2] = "Tomcat";
    arrDa[3] = "数据四";
    arrDa[4] = "Ellise";
    arrDa[5] = "aaaa";
    arrDa[6] = "2.112.521";
    arrDa[7] = "美国";
    pt.setCellData(arrDa);
    add_row(mainTab);
}

//添加图标
function chanIcon()
{
    var oImg = new Image();
    oImg.src = "file.png";
    insertImg(oImg,'1');   
}

function chanIcon1()
{
    var oImg = new Image();
    oImg.src = "woman.jpg";
    insertImg(oImg,'2');
}

function chanIcon2()
{
    var oImg = new Image();
    oImg.src = "openfoldericon.png";
    insertImg(oImg,'3');
}
</script>
</head>

<body onLoad="initTable();">
<div class="divClass">
<table id=table1 cellSpacing=0 cellPadding=0 border=0 width="100%">
  <tr align=middle>
    <th width=2%>&nbsp;</th>
    <th width=13%>数字</th>
    <th width=15%>名称</th>
    <th width=15%>数据</th>
    <th width=15%>Engine</th>
    <th width=10%>字母</th>
    <th width=15%>Fastest Lap</th>
    <th width=15%>国家</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>1</td>
    <td>Schumacher</td>
    <td data="1">数据一</td>
    <td>Ferrari</td>
    <td>cccc</td>
    <td>1.15.872</td>
    <td>德国</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>2</td>
    <td>Barrichello</td>
    <td data="3">数据三</td>
    <td>Ferrari</td>
    <td>bbbb</td>
    <td>1.16.760</td>
    <td>法国</td>
  </tr>
  <tr >
    <td>&nbsp;</td>
    <td>3</td>
    <td>Raikkonen</td>
    <td data="2">数据二</td>
    <td>Petronas</td>
    <td>aaaa</td>
    <td>1.16.875</td>
    <td>缅甸&nbsp;</td></tr>
  <tr >
    <td>&nbsp;</td>
    <td>4</td>
    <td>Heidfeld</td>
    <td data="3">数据三</td>
    <td>Petronas</td>
    <td>aaaa</td>
    <td>1.17.165</td>
    <td>朝鲜</td></tr>
  <tr >
    <td>&nbsp;</td>
    <td>5</td>
    <td>Irvine</td>
    <td data="1">数据一</td>
    <td>Cosworth</td>
    <td>bbbb</td>
    <td>1.18.016</td>
    <td>中国</td></tr>
  <tr >
    <td>&nbsp;</td>
    <td>6</td>
    <td>asdasdasd</td>
    <td data="4">数据四</td>
    <td>Cosworth</td>
    <td>aaaa</td>
    <td>1.18.015</td>
    <td>俄罗斯</td></tr>
  <tr >
    <td>&nbsp;</td>
    <td>7</td>
    <td>Gengine</td>
    <td data="3">数据三</td>
    <td>Renault</td>
    <td>cccc</td>
    <td>1.15.015</td>
    <td>韩国</td></tr>
  <tr >
    <td>&nbsp;</td>
    <td>8</td>
    <td>Slap</td>
    <td data="2">数据二</td>
    <td>Renault</td>
    <td>bbbb</td>
    <td>1.15.012</td>
    <td>日本</td>
  </tr> 
</table>
</div>
<p>
<div style="background-color:#cccccc">
<input onclick=add() type=button value=添加一行>
<input onclick="del_row(mainTab);" type=button value=删除一行>
<input id=moveUp onclick=Move_up(mainTab) type=button value=上移一行>
<input id=moveDown onclick=Move_down(mainTab) type=button value=下移一行>
<input onclick=res_tab(mainTab) type=button value=重置表格>
<span style="font-size:12px">按tab键可以自动跳入下一个编辑单元格,enter结束编辑</span>
</div><br>
<div style="background-color:#cccccc">
<input type=button value='设置文件图标' onclick="chanIcon()"/>&nbsp;&nbsp;
<input type=button value='设置图片图标' onclick="chanIcon1()"/>&nbsp;&nbsp;
<input type=button value='设置文件夹图标' onclick="chanIcon2()"/>
</div><br>
<div style="background-color:#cccccc">
<input id=colNum size=2>&nbsp;<input type=button value='取列数据' onclick="alert(getColData(document.all.colNum.value))"/>&nbsp;&nbsp;
<input id=rowNum size=2>&nbsp;<input type=button value='取行数据' onclick="alert(getRowData(document.all.rowNum.value))"/>
</div><br>
</body>
</html>

 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:199772次
    • 积分:2643
    • 等级:
    • 排名:第13832名
    • 原创:59篇
    • 转载:84篇
    • 译文:0篇
    • 评论:80条
    最新评论