📄 js_top.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0042)http://www.smallrain.net/js_top.asp?id=830 -->
<HTML><HEAD><TITLE>小雨在线>>网页特效>>特殊脚本>>超强在线编辑表格</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content=info@smallrain.net name=author>
<META content=javascript特效,网络学院，网站制作,建站程序,网页设计,设计论坛 name=Keywords>
<META content=以介绍javascript特效和网页设计为主的网站。 name=Description>
<SCRIPT language=JavaScript>
<!--
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function JM_cc(ob){
var obj=MM_findObj(ob); if (obj) {
obj.select();js=obj.createTextRange();js.execCommand("Copy");}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
//-->
</SCRIPT>
<SCRIPT language=javascript>
function senderr(){
if(confirm('确定有错误，要发送吗？')){
window.open('senderr.asp?page='+location.href+'','','width=200,height=100')
}
}
</SCRIPT>
<LINK href="js_top.files/style.css" type=text/css rel=stylesheet>
<STYLE type=text/css>A:active {
FONT-SIZE: 12px; COLOR: blue; TEXT-DECORATION: none
}
A:link {
FONT-SIZE: 12px; COLOR: blue; TEXT-DECORATION: none
}
A:visited {
FONT-SIZE: 12px; COLOR: blue; TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 12px; COLOR: blue; TEXT-DECORATION: underline
}
</STYLE>
<STYLE type=text/css>.divClass {
OVERFLOW: auto; WIDTH: 100%; HEIGHT: 250px
}
TH {
BACKGROUND-COLOR: #999999
}
.TrOdd {
FONT-SIZE: 12px; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #ffffff
}
.TrEven {
FONT-SIZE: 12px; FONT-FAMILY: "宋体"; BACKGROUND-COLOR: #cccccc
}
</STYLE>
<SCRIPT language=javascript>
//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 < 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;
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;
}
}
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -