⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 js_top.htm

📁 超强在线编辑表格 本程序是用JavaScript写的表格应用程序
💻 HTM
📖 第 1 页 / 共 5 页
字号:
🔍
12345 
    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,"&");
    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] = " ";
    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 = "http://www.smallrain.net/treeimg/file.gif";
    insertImg(oImg,'1');    
}

function chanIcon1()
{
    var oImg = new Image();
    oImg.src = "http://www.smallrain.net/treeimg/collection.gif";
    insertImg(oImg,'2');
}

function chanIcon2()
{
    var oImg = new Image();
    oImg.src = "http://www.smallrain.net/treeimg/folderopen.gif";
    insertImg(oImg,'3');
}
&lt;/script&gt;</TEXTAREA> </DIV></TD></TR>
  <TR>
    <TD width=162 background=js_top.files/top_bg03.gif height=30>&nbsp;</TD>
    <TD width=274 background=js_top.files/top_bg03.gif>
      <DIV align=center><FONT color=#ffffff>以下代码加入&lt;body&gt;区域</FONT></DIV></TD>
    <TD vAlign=top background=js_top.files/top_bg03.gif><INPUT class=button1 onclick="JM_cc('js_2')" type=button value=复制到我的剪贴板 name=Button2> 
    </TD></TR>
  <TR>
    <TD bgColor=#f7f7f7 colSpan=3 height=180>
      <DIV align=center><TEXTAREA class=textarea1 name=js_2 rows=10 wrap=VIRTUAL cols=80>&lt;div class="divClass"&gt;
&lt;table id=table1 border="1"   cellpadding="0" cellspacing="1" bordercolor="#000000" width="100%"&gt;
  &lt;tr align=middle&gt;
    &lt;th width=2%&gt;&nbsp;&lt;/th&gt;
    &lt;th width=13%&gt;数字&lt;/th&gt;
    &lt;th width=15%&gt;名称&lt;/th&gt;
    &lt;th width=15%&gt;数据&lt;/th&gt;
    &lt;th width=15%&gt;Engine&lt;/th&gt;
    &lt;th width=10%&gt;字母&lt;/th&gt;
    &lt;th width=15%&gt;Fastest Lap&lt;/th&gt;
    &lt;th width=15%&gt;国家&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&nbsp;&lt;/td&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;Schumacher&lt;/td&gt;
    &lt;td data="1"&gt;数据一&lt;/td&gt;
    &lt;td&gt;Ferrari&lt;/td&gt;
    &lt;td&gt;cccc&lt;/td&gt;
    &lt;td&gt;1.15.872&lt;/td&gt;
    &lt;td&gt;德国&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&nbsp;&lt;/td&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td&gt;Barrichello&lt;/td&gt;
    &lt;td data="3"&gt;数据三&lt;/td&gt;
    &lt;td&gt;Ferrari&lt;/td&gt;
    &lt;td&gt;bbbb&lt;/td&gt;
    &lt;td&gt;1.16.760&lt;/td&gt;
    &lt;td&gt;法国&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr &gt;
    &lt;td&gt;&nbsp;&lt;/td&gt;
    &lt;td&gt;3&lt;/td&gt;
    &lt;td&gt;Raikkonen&lt;/td&gt;
    &lt;td data="2"&gt;数据二&lt;/td&gt;
    &lt;td&gt;Petronas&lt;/td&gt;
    &lt;td&gt;aaaa&lt;/td&gt;
    &lt;td&gt;1.16.875&lt;/td&gt;
    &lt;td&gt;缅甸&nbsp;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr &gt;
    &lt;td&gt;&nbsp;&lt;/td&gt;
    &lt;td&gt;4&lt;/td&gt;
    &lt;td&gt;Heidfeld&lt;/td&gt;
    &lt;td data="3"&gt;数据三&lt;/td&gt;
    &lt;td&gt;Petronas&lt;/td&gt;
    &lt;td&gt;aaaa&lt;/td&gt;
    &lt;td&gt;1.17.165&lt;/td&gt;
    &lt;td&gt;朝鲜&lt;/td&gt;&lt;/tr&gt;
  &lt;tr &gt;
    &lt;td&gt;&nbsp;&lt;/td&gt;
    &lt;td&gt;5&lt;/td&gt;
    &lt;td&gt;Irvine&lt;/td&gt;
    &lt;td data="1"&gt;数据一&lt;/td&gt;
    &lt;td&gt;Cosworth&lt;/td&gt;
    &lt;td&gt;bbbb&lt;/td&gt;
    &lt;td&gt;1.18.016&lt;/td&gt;
    &lt;td&gt;中国&lt;/td&gt;&lt;/tr&gt;
  &lt;tr &gt;
    &lt;td&gt;&nbsp;&lt;/td&gt;
    &lt;td&gt;6&lt;/td&gt;
    &lt;td&gt;asdasdasd&lt;/td&gt;
    &lt;td data="4"&gt;数据四&lt;/td&gt;
    &lt;td&gt;Cosworth&lt;/td&gt;
    &lt;td&gt;aaaa&lt;/td&gt;
    &lt;td&gt;1.18.015&lt;/td&gt;
    &lt;td&gt;俄罗斯&lt;/td&gt;&lt;/tr&gt;
  &lt;tr &gt;
    &lt;td&gt;&nbsp;&lt;/td&gt;
    &lt;td&gt;7&lt;/td&gt;
    &lt;td&gt;Gengine&lt;/td&gt;
    &lt;td data="3"&gt;数据三&lt;/td&gt;
    &lt;td&gt;Renault&lt;/td&gt;
    &lt;td&gt;cccc&lt;/td&gt;
    &lt;td&gt;1.15.015&lt;/td&gt;
    &lt;td&gt;韩国&lt;/td&gt;&lt;/tr&gt;
  &lt;tr &gt;
    &lt;td&gt;&nbsp;&lt;/td&gt;
    &lt;td&gt;8&lt;/td&gt;
    &lt;td&gt;Slap&lt;/td&gt;
    &lt;td data="2"&gt;数据二&lt;/td&gt;
    &lt;td&gt;Renault&lt;/td&gt;
    &lt;td&gt;bbbb&lt;/td&gt;
    &lt;td&gt;1.15.012&lt;/td&gt;
    &lt;td&gt;日本&lt;/td&gt;
  &lt;/tr&gt;  
&lt;/table&gt;
&lt;/div&gt;
&lt;p&gt;
&lt;div style="background-color:#cccccc"&gt;
&lt;input onclick=add() type=button value=添加一行&gt;
&lt;input onclick="del_row(mainTab);" type=button value=删除一行&gt; 
&lt;input id=moveUp onclick=Move_up(mainTab) type=button value=上移一行&gt;
&lt;input id=moveDown onclick=Move_down(mainTab) type=button value=下移一行&gt;
&lt;input onclick=res_tab(mainTab) type=button value=重置表格&gt; 
&lt;span style="font-size:12px"&gt;按tab键可以自动跳入下一个编辑单元格,enter结束编辑&lt;/span&gt;
&lt;/div&gt;&lt;br&gt;
&lt;div style="background-color:#cccccc"&gt;
&lt;input type=button value='设置文件图标' onclick="chanIcon()"/&gt;&nbsp;&nbsp;
&lt;input type=button value='设置图片图标' onclick="chanIcon1()"/&gt;&nbsp;&nbsp;
&lt;input type=button value='设置文件夹图标' onclick="chanIcon2()"/&gt;
&lt;/div&gt;&lt;br&gt;
&lt;div style="background-color:#cccccc"&gt;
&lt;input id=colNum size=2&gt;&nbsp;&lt;input type=button value='取列数据' onclick="alert(getColData(document.all.colNum.value))"/&gt;&nbsp;&nbsp;
&lt;input id=rowNum size=2&gt;&nbsp;&lt;input type=button value='取行数据' onclick="alert(getRowData(document.all.rowNum.value))"/&gt;
&lt;/div&gt;</TEXTAREA> </DIV></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=600 align=center bgColor=#ffffff 
border=0>
  <TBODY>
  <TR>
    <TD width=162 background=js_top.files/top_bg03.gif 
  height=30>&nbsp;</TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=600 align=center border=0>
  <TBODY>
  <TR>
    <TD style="LINE-HEIGHT: 150%" bgColor=#f7f7f7 height=45>
      <DIV align=center><FONT face=Tahoma dlg? shell ?ms ,>Copyright @2000 - 
      2005 <A href="http://www.smallrain.net/"><STRONG>SmallRain.<FONT 
      color=#990000>Net</FONT></STRONG></A> , All Rights Reserved. 
      </FONT><BR>小雨在线 版权所有 </DIV></TD></TR></TBODY></TABLE></BODY></HTML>
12345

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -