脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → B/S JavaScript

在B/S开发中经常用到的JavaScript技术第3/3页

 更新时间：2008年05月28日 22:55:40   作者：  
javascript运用中，经常用到的代码，建议每段代码都要看下，注意本文有三页，仔细看玩，逐个研究透彻，那么网页中常见的问题，你也就熟悉掌握了

有时候还需要自由编辑表格---
给大家一个自由编辑表格的小例子,写的有点乱,呵呵:）

//===============================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">
<!--全局变量
//标志位,值为false代表未打开一个编辑框,值为true为已经打开一个编辑框开始编辑
var editer_table_cell_tag = false;
//开启编辑功能标志,值为true时为允许编辑
var run_edit_flag = false;
//-->
</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=' 确定 ' 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>  
 </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>
上一页123阅读全文
您可能感兴趣的文章:

相关文章

  • 使用javascript插入样式

    使用javascript插入样式

    这篇文章主要介绍了使用javascript插入样式的相关方法，用javascript插入<style>样式以及<link>样式，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 如何用js将blob为pcm格式转换为MP3格式

    如何用js将blob为pcm格式转换为MP3格式

    要将PCM文件转换为MP3文件,您可以使用Js实现,这篇文章主要给大家介绍了关于如何用js将blob为pcm格式转换为MP3格式的相关资料,需要的朋友可以参考下
    2023-11-11
  • 前端常用6种数据加密方式的使用详细讲解

    前端常用6种数据加密方式的使用详细讲解

    在前端开发中,常用的数据加密技术包括Base64编码、MD5哈希、SHA-256哈希、AES对称加密、RSA非对称加密和HMAC消息认证码,这些加密方式提供了不同层次的数据安全保护,适用于不同的安全需求和场景,需要的朋友可以参考下
    2024-09-09
  • js实现简单图片切换

    js实现简单图片切换

    这篇文章主要为大家详细介绍了js实现简单图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • axios基本入门用法教程

    axios基本入门用法教程

    之前当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios,前一段时间用了一下，现在说一下它的基本用法。文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-03-03
  • D3.js实现拓扑图的示例代码

    D3.js实现拓扑图的示例代码

    本篇文章主要介绍了D3.js实现拓扑图的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • javascript中的有名函数和无名函数

    javascript中的有名函数和无名函数

    javascript中的有名函数和无名函数...
    2007-10-10
  • js数组操作学习总结

    js数组操作学习总结

    js数组操作学习总结。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • MUI 解决动态列表页图片懒加载再次加载不成功的bug问题

    MUI 解决动态列表页图片懒加载再次加载不成功的bug问题

    这篇文章主要介绍了MUI 解决动态列表页图片懒加载再次加载不成功的bug问题,解决方法很简单的，需要的朋友可以参考下
    2017-04-04
  • countUp.js实现数字动态变化效果

    countUp.js实现数字动态变化效果

    这篇文章主要为大家详细介绍了countUp.js实现数字动态变化效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10

最新评论