js_top.htm

超强在线编辑表格 本程序是用JavaScript写的表格应用程序

                    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 = " ";
                    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] = " ";
}

//删除行，并处理当前选择项为不选择
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] == " " || 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)
{
    //不删除标题行；指定行不在表格中也不执行删除；