一个自由编辑表格的小例子

最新推荐文章于 2021-07-03 17:45:46 发布

evilzydar

最新推荐文章于 2021-07-03 17:45:46 发布

阅读量940

点赞数

分类专栏： Other 文章标签： table button function javascript input class

本文链接：https://blog.csdn.net/evilzydar/article/details/107401

版权

Other 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一个自由编辑表格的小例子

//===============================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: "宋体";
    color: #000000;
    background-color: #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";
    color: #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 = "JavaScript">

</SCRIPT>

<SCRIPT language = "JavaScript">
<!--
/**
* 编辑表格函数
* 单击某个单元格可以对里面的内容进行自由编辑
* @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=' 确定 ' οnclick='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"
    οnclick="editerTableCell('editer_table','no_editer')">
    <TR class="TrHead">
  <TD colspan="3" align="center" id="no_editer">自由编辑表格</TD>
</TR>
<TR>
  <TD width="33%">单击开始编辑按钮,然后点击各单元格编辑</TD>
  <TD width="33%">2</TD>
  <TD width="33%">3</TD>
</TR>
<TR>
  <TD width="33%">4</TD>
  <TD width="33%">5</TD>
  <TD width="33%">6</TD>
</TR>
<TR>
  <TD width="33%">one</TD>
  <TD width="33%">two</TD>
  <TD width="33%">three</TD>
</TR>
<TR>
  <TD width="33%">four</TD>
  <TD width="33%">five</TD>
  <TD width="33%">six</TD>
</TR>
    <TR class="TrFoot">
  <TD colspan="3" align="center" id="no_editer">
   <INPUT type="button" class="bt" value="开始编辑" onClick="editStart()" onMouseOver="showTip()" onMouseMove="showTip()" onMouseOut="editTip.style.visibility = 'hidden';">
  </TD>
</TR>
</TABLE>
</BODY>
<DIV id="editTip">请单击某个单元格进行编辑!</DIV>
</HTML>

evilzydar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个自由编辑表格的小例子

一个自由编辑表格的小例子//===============================start================================测试修改表格/*提示层的样式*/div{ BORDER-RIGHT: #80c144 1px solid; BORDER-TOP: #80c144 1px solid; VISIBILITY: hidden; BORDE
复制链接

扫一扫

专栏目录