B/S开发常用JavaScript技术(6)
2008-02-23 09:45:31来源：互联网 阅读 ()
}
}
有时候还需要自由编辑表格---
给大家一个自由编辑表格的小例子,写的有点乱,呵呵:）
//===============================start================================
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>测试修改表格</TITLE>
<STYLE>
/*提示层的样式*/
div
{
BORDER-RIGHT: #80c144 1px solid;
BORDER-TOP: #80c144 1px solid;
VISIBILITY: hidden;
BORDER-LEFT: #80c144 1px solid;
CURSOR: default;
LINE-HEIGHT: 20px;
BORDER-BOTTOM: #80c144 1px solid;
FONT-FAMILY: 宋体;
font-size:12px;
POSITION: absolute;
BACKGROUND-COLOR: #f6f6f6;
TOP:30px;
LEFT:30px;
}
/*tr的样式*/
tr
{
font-family: "宋体";
col or: #000000;
background-col or: #C1DBF5;
font-size: 12px
}
/*table脚注样式*/
.TrFoot
{
FONT-SIZE: 12px;
font-family:"宋体", "Verdana", "Arial";
BACKGROUND-COLOR: #6699CC;
COLOR:#FFFFFF;
height: 25;
}
/*trhead属性*/
.TrHead
{
FONT-SIZE: 13px;
font-family:"宋体", "Verdana", "Arial";
BACKGROUND-COLOR: #77AADD;
COLOR:#FFFFFF;
height: 25;
}
/*文本框样式*/
INPUT
{
BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7;
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
BORDER-LEFT: 1px solid;
BORDER-BOTTOM: 1px solid;
FONT-SIZE: 12px;
FONT-FAMILY: "宋体","Verdana";
col or: #000000;
BACKGROUND-COLOR: #E9EFF5;
}
/*button样式*/
button
{
BORDER-COLOR: #AACEF7 #AACEF7 #AACEF7 #AACEF7;
BACKGROUND-COLOR: #D5E4F3;
CURSOR: hand;
FONT-SIZE:12px;
BORDER-RIGHT: 1px solid;
BORDER-TOP: 1px solid;
BORDER-LEFT: 1px solid;
BORDER-BOTTOM: 1px solid;
COLOR: #000000;
}
</STYLE>
</HEAD>
<BODY>
<SCRIPT language = "java script">
<!--全局变量
//标志位,值为false代表未打开一个编辑框,值为true为已经打开一个编辑框开始编辑
var editer_table_cell_tag = false;
//开启编辑功能标志,值为true时为允许编辑
var run_edit_flag = false;
//-->
</SCRIPT>
<SCRIPT language = "java script">
<!--
/**
* 编辑表格函数
* 单击某个单元格可以对里面的内容进行自由编辑
* @para tableID 为要编辑的table的id
* @para noEdiID 为不要编辑的td的ID,比如说table的标题
* 可以写为<TD id="no_editer">自由编辑表格</TD>
* 此时该td不可编辑
*/
function editerTableCell(tableId,noEdiId)
{
var tdObject = event.srcElement;
var tObject = ((tdObject.parentNode).parentNode).parentNode;
if(tObject.id == tableId &&tdObject.id != noEdiId&&editer_table_cell_tag == false && run_edit_flag == true)
{
tdObject.innerHTML = "<input type=text id=edit_table_txt name=edit_table_txt value=" tdObject.innerText " size='15' onKeyDown='enterToTab()'> <input type=button value=' 确定 ' onclick='certainEdit()'>";
edit_table_txt.focus();
edit_table_txt.select();
editer_table_cell_tag = true;
//修改按钮提示信息
editTip.innerText = "请先点确定按钮确认修改!";
}
else
{
return false;
}
}
/**
* 确定修改
*/
function certainEdit()
{
var bObject = event.srcElement;
var tdObject = bObject.parentNode;
var txtObject = tdObject.firstChild;
tdObject.innerHTML = txtObject.value;
//代表编辑框已经关闭
editer_table_cell_tag = false;
//修改按钮提示信息
editTip.innerText = "请单击某个单元格进行编辑!";
}
function enterToTab()
{
if(event.srcElement.type != 'button' && event.srcElement.type != 'textarea'
&& event.keyCode == 13)
{
event.keyCode = 9;
}
}
/**
* 控制是否编辑
*/
function editStart()
{
if(event.srcElement.value == "开始编辑")
{
event.srcElement.value = "编辑完成";
run_edit_flag = true;
}
else
{
//如果当前没有编辑框,则编辑成功,否则,无法提交
//必须按确定按钮后才能正常提交
if(editer_table_cell_tag == false)
{
alert("编辑成功结束!");
event.srcElement.value = "开始编辑";
run_edit_flag = false;
}
}
}
/**
* 根据不同的按钮提供不同的提示信息
*/
function showTip()
{
if(event.srcElement.value == "编辑完成")
{
editTip.style.top = event.y 15;
editTip.style.left = event.x 12;
editTip.style.visibility = "visible";
}
else
{
editTip.style.visibility = "hidden";
}
}
-->
</SCRIPT>
<TABLE id="editer_table" width="100%" align="center"
onclick="editerTableCell('editer_table','no_editer')">
<TR class="TrHead">
<TD colspan="3" align="center" id="no_editer">自由编辑表格</TD>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：ASP分页
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
