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

📄 js_top.htm

📁 超强在线编辑表格 本程序是用JavaScript写的表格应用程序
💻 HTM
📖 第 1 页 / 共 5 页
字号:
🔍
12345 
            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,"&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 = "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');
}
</SCRIPT>

<META content="MSHTML 6.00.2800.1522" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#cccccc leftMargin=0 topMargin=5 onload=initTable();>
<TABLE height=30 cellSpacing=0 cellPadding=0 width=600 align=center border=0>
  <TBODY>
  <TR>
    <TD width=250 background=js_top.files/top_bg02.gif><FONT 
      color=#ffffff>&nbsp;&nbsp;超强在线编辑表格</FONT></TD>
    <TD width=6 background=js_top.files/top_bg03.gif><IMG height=30 
      src="js_top.files/top03.gif" width=6></TD>
    <TD width=592 background=js_top.files/top_bg03.gif>
      <DIV align=right><A class=w href="javascript:senderr()"><FONT 
      color=yellow>发送错误报告</FONT></A>　</DIV></TD></TR>
  <TR bgColor=#f7f7f7>
    <TD colSpan=3>
      <TABLE cellSpacing=0 cellPadding=0 width="90%" align=center border=0>
        <TBODY>
        <TR>
          <TD height=25><STRONG><FONT color=#000000>介绍：</FONT></STRONG> a, 
            此表格可以实现增加,删除,上移,下移,修改等很多的操作,并且,可以设置每一列的编辑方式.<BR>b, 目前含有两种编辑方式: 
            1,文本框编辑 2,下拉框编辑 (需要提供两个数组,一个是text,一个是value)<BR>c, 
            编辑过程中,可以使用tab键进入下一个单元格进行编辑,也可以之间使用enter键结束编辑<BR>d, 提供设置图标的功能</TD></TR>
        <TR>
          <TD height=25><STRONG><FONT 
        color=#000000>演示：</FONT></STRONG></TD></TR></TBODY></TABLE></TD></TR>
  <TR bgColor=#f7f7f7>
    <TD colSpan=3 height=150>
      <DIV class=divClass>
      <TABLE id=table1 borderColor=#000000 cellSpacing=1 cellPadding=0 
      width="100%" border=1>
        <TBODY>
        <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></TBODY></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 onclick=chanIcon() type=button value=设置文件图标>&nbsp;&nbsp; 
<INPUT onclick=chanIcon1() type=button value=设置图片图标>&nbsp;&nbsp; <INPUT onclick=chanIcon2() type=button value=设置文件夹图标> </DIV><BR>
      <DIV style="BACKGROUND-COLOR: #cccccc"><INPUT id=colNum size=2>&nbsp;<INPUT onclick=alert(getColData(document.all.colNum.value)) type=button value=取列数据>&nbsp;&nbsp; 
      <INPUT id=rowNum size=2>&nbsp;<INPUT onclick=alert(getRowData(document.all.rowNum.value)) type=button value=取行数据> 
      </DIV></TD></TR>
  <TR bgColor=#f7f7f7>
    <TD colSpan=3 height=25>
      <TABLE cellSpacing=0 cellPadding=0 width="90%" align=center border=0>
        <TBODY>
        <TR>
          <TD style="LINE-HEIGHT: 150%" height=25><STRONG><FONT 
            color=#000000>说明：</FONT></STRONG>在&lt;body&gt;中加入onLoad="initTable();",变为&lt;body 
            <FONT color=#ff0000>onLoad="initTable();"</FONT>&gt; 
      </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=600 align=center bgColor=#ffffff 
border=0>
  <TBODY>
  <TR>
    <TD height=10></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=600 align=center border=0>
  <TBODY>
  <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;head&gt;区域</FONT></DIV></TD>
    <TD vAlign=top background=js_top.files/top_bg03.gif><INPUT class=button1 onclick="JM_cc('js_1')" type=button value=复制到我的剪贴板 name=Button> 
    </TD></TR>
  <TR>
    <TD bgColor=#f7f7f7 colSpan=3 height=120>
      <DIV align=center><TEXTAREA class=textarea1 name=js_1 rows=6 wrap=VIRTUAL cols=80>&lt;style type="text/css"&gt;
.divClass{height:250px;width:100%;overflow:auto;}
th{background-color:#999999}
.TrOdd{font-family: "宋体";font-size: 12px;background-color: #FFFFFF;}
.TrEven{font-family: "宋体";font-size: 12px;background-color: #CCCCCC;}
&lt;/style&gt;
&lt;script language="javascript"&gt;
//more javascript from http://www.smallrain.net
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 &lt; 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 &gt;= mainTab.rows[0].cells.length
         || colNum &lt; 0)
        return null;
    if(isImgCol)
    {
        for(var i=1; i&lt;mainTab.rows.length; i++)
        {
            if(mainTab.rows[i].cells[0].children[0]
                &amp;&amp; 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&lt;mainTab.rows.length; i++)
            {
                if(mainTab.rows[i].cells[colNum].children.length&gt;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&lt;mainTab.rows.length; i++)
                arrCelData[i-1] = mainTab.rows[i].cells[colNum].data;
        }
        else
        {
                for(var i=1; i&lt;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 &gt;= mainTab.rows.length
         || rowNum &lt;= 0)
        return null;
    for(var i=0; i&lt;mainTab.rows[rowIndex].cells.length; i++)
    {
        with(mainTab.rows[rowIndex].cells[i])
        {
            if(children.length &gt; 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")
12345

⌨️ 快捷键说明

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