JavaScript创建的可编辑表格

<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 yzh 2001.5.12
* 请大家引用时保留这段作者声明，此代码为开源代码；使用不受限制，欢迎大家采用本人所写JS动态拖动表格实现代码。
* JavaScript创建的可编辑表格
* 用法：
*    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] = "VB";
*                  arrDa[1] = "C#";
*                  arrDa[2] = "数据四";
*                  arrDa[3] = "PB";
*                  arrDa[4] = "Java";
*                  arrDa[5] = "2.112.521";
*                  arrDa[6] = "中国";
*                  pt.setCellData(arrDa);
*
*              //然后调用add_row(mainTab)方法。
*              //也可以不设置，增加一行，则自动填充每列的列数
*
*修改履历：
*      2002.03.18 增加函数
*              getColData(colIndex,isImg) //得到指定列的所有值，colIndex为列号,isImg指定此行是否为图片
*              getRowData(rowIndex);//得到指定行的所有值，rowIndex为行号
*
*      2003.08.18 改变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>
*    2003.07.18 修改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] = " ";
    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;

//设置是否需要编辑的标记，如果设为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);
}

        //根据标记设置是否可编辑
        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 2003.8.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 2004.8.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 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,"&");
    result = result.replace(/</g,"<");
    result = result.replace(/>/g,">");
    result = result.replace(/\s/g," ");
    if(result == "")
        result = " ";
    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] = "VB.Net";
    arrDa[1] = "Java";
    arrDa[2] = "PowerBuilder";
    arrDa[3] = "数据四";
    arrDa[4] = "C++";
    arrDa[5] = "C";
    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%> </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> </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> </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> </td>
    <td>3</td>
    <td>Raikkonen</td>
    <td data="2">数据二</td>
    <td>Petronas</td>
    <td>aaaa</td>
    <td>1.16.875</td>
    <td>缅甸 </td></tr>
<tr >
    <td> </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> </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> </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> </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> </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()"/>  
<input type=button value='设置图片图标' onclick="chanIcon1()"/>  
<input type=button value='设置文件夹图标' onclick="chanIcon2()"/>
</div><br>
<div style="background-color:#cccccc">
<input id=colNum size=2> <input type=button value='取列数据' onclick="alert(getColData(document.all.colNum.value))"/>  
<input id=rowNum size=2> <input type=button value='取行数据' onclick="alert(getRowData(document.all.rowNum.value))"/>
</div><br>
</body>
</html>

posted @ 2006-03-24 18:15 JackYang 阅读(2206) 评论(0) 编辑收藏举报

刷新页面返回顶部