如何实现可编辑表格单元格效果

时间：2015-07-10 18:18:46 阅读：118 评论：0 收藏：0 [点我收藏+]

标签：

如何实现可编辑表格单元格效果:
在不少的网页都有这样的效果，可以编辑表格中的内容，非常的方便，在本站特效下载和网络上有一个可编辑单元格的实例，但是通过分析发现有诸多问题，最大一个问题就是浏览器不具有浏览器兼容性，所以本站写了一个简单的能偶兼容所有主流浏览器的效果，下面就通过实例简单介绍一下如何实现可以编辑单元格的效果，代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
#main
{
 width:304px;
 margin:0px auto;
}
ul
{ 
 height:25px; 
 width:302px;
 line-height:25px; 
 border:1px solid green; 
 border-top:0px; 
 font-size:12px;
 text-align:center;
 list-style:none; 
 padding:0px; 
 margin:0px;
}
ul li
{ 
 display:block; 
 width:100px; 
 height:25px; 
 float:left;
 color:#999;
}
.thead
{ 
 background:#F1FADE; 
 color:#F90;
 font-weight:bold; 
 border-top:1px solid green;
}
.leftborder
{
 border-left:1px solid green; 
}
input
{
 background-color:#FFC;
 border:none;
 outline:none;
 color:#F90;
 text-align:center;
}
</style>
<script type="text/javascript">
var preEdited="";
var prenewNode;
var newNode=document.createElement("input");
newNode.type="text";
 
function editCell(myEvent)
{
 editTarget=myEvent.srcElement?myEvent.srcElement:myEvent.target;
 
 if(editTarget.tagName=="INPUT")
 {
  stopPao(myEvent);
  return;
 }
 
 if(preEdited!="")
 {
  preEdited.innerHTML=newNode.value;
 }
 
 if(editTarget.tagName=="LI"&&editTarget.parentNode.getAttribute("class")!="thead")
 {
  newNode.value=editTarget.innerHTML;
  editTarget.innerHTML="";
  newNode.style.width="100px";
  newNode.style.height="23px";
  editTarget.appendChild(newNode);
  preEdited=editTarget;
  newNode.focus();
 }
 stopPao(myEvent);
}
 
function stopPao(myEvent)
{
 if(window.event)
 {
  event.cancelBubble=true
 }
 else
 {
  myEvent.stopPropagation()
 }
}
 
window.onload=function()
{
 var main=document.getElementById("main");
 
 main.onclick=function(ev)
 {
  var oEvent=ev||event; 
  editCell(oEvent);
 }
 document.onclick=function()
 {
  if(preEdited!="")
  {
   preEdited.innerHTML=newNode.value;
  }
 }
}
</script>
</head>
<body>
<div id="main">
 <ul class="thead">
  <li>前台专区</li>
  <li class="leftborder">后台专区</li>
  <li class="leftborder">交流专区</li>
 </ul>
 <ul>
  <li>div+css专区</li>
  <li class="leftborder">ASP专区</li>
  <li class="leftborder">搜索优化</li>
 </ul>
 <ul>
  <li>HTML专区</li>
  <li class="leftborder">ASP.NET专区</li>
  <li class="leftborder">如何建站</li>
 </ul>
 <ul>
  <li>jQuery专区</li>
  <li class="leftborder">HP专区</li>
  <li class="leftborder">站长交流</li>
 </ul>
 <ul>
  <li>搜索优化</li>
  <li class="leftborder">教程下载</li>
  <li class="leftborder">特效下载</li>
 </ul>
</div>
</body>
</html>

以上代码实现了基本的可编辑表格效果，当然代码可能算不上完美，应该还会有更好的方法实现此功能，或者说代码性能能够更加优化，不过这里目的只是给出一个实现此功能的思路，当然如果有兴趣可以去深究一下，下面简单介绍一下实现此功能的步骤:
一.实现原理:
创建一个input文本框，当点击单元格的时候会将原来单元格中的内容赋值给创建的文本框，并将单元格的innerHTML设置为空，然后通过appendChild(newNode)将创建的input文本框添加到单元格中，这样就实现了点击单元格出现一个可编辑区域，进行编辑即可，将当前编辑单元格赋值给变量preEdited。当点击其他单元格的时候，会将文本框的当前值赋给原来单元格（之前被赋值的preEdited）的innerHTML，这样就实现了点击其他单元格时，上一个被编辑的单元格被保存的功能，这样就基本实现编辑表格的功能。下面再来介绍一下需要注意的几个知识点，对单元格的点击事件并没有分别绑定到每一个单元格上，而是利用事件冒泡原理绑定它父元素main上。为了实现点击表格之外的区域实现被编辑单元格内容保存功能，为document绑定了一个onclick事件，当点击网页其他地方的时候也会实现被编辑单元格内容保存功能，还要特别注意的一点就是在editCell()函数中调用了stopPao()函数就是在组织事件冒泡的现象的发生，防止事件冒泡到document，触发自定义的onclick事件。
二.代码注释:
1.var preEdited=""声明一个变量用以存放上一个被编辑的单元格对象。
2.var newNode=document.createElement("input")创建一个input对象。
3.newNode.type="text"将input对象的类型设置为text，也就是一个文本框。
4.function editCell(myEvent)创建一个函数，参数为一个事件对象。
4.1.editTarget=myEvent.srcElement?myEvent.srcElement:myEvent.target将事件源对象（也就是点击的哪一个单元格）赋值给editTarget，这里采用兼容性。
4.2.if(editTarget.tagName=="INPUT")判断当前点击的是否是input标签，如果是则结束函数的执行，可以防止点击点击正在编辑的文本框内容时，被保存的现象。语句里面调用了stopPao(myEvent)函数为了防止事件冒泡到document。
4.3.if(preEdited!="")用来判断preEdited是否为空，如果为空说明是首次点击单元格，如果preEdited不为空的话，说明之前已经编辑过单元格，并将编辑后的内容保存。
4.4.if(editTarget.tagName=="LI"&&editTarget.parentNode.getAttribute("class")!="thead")用来判断点击的是否是标题，如果是标题，则不执行编辑操作，如果不是标题则执行主体代码。
4.5.newNode.value=editTarget.innerHTML将被点击的单元格中的内容赋值给创建的input文本框。
4.6.editTarget.innerHTML=""将被点击文本框内容清空。
4.7.newNode.style.width="100px"和newNode.style.height="23px"设置文本框的尺寸。
4.8.editTarget.appendChild(newNode)将创建的文本框节点添加到被编辑的单元格，这样显现被编辑状态了。
4.9.preEdited=editTarget将当前单元格对象赋值给preEdited。
4.10.newNode.focus()让文本框获得焦点。
4.11.stopPao(myEvent)阻止事件冒泡到document。
5.function stopPao(myEvent)创建一个阻止事件冒泡的函数。
6.window.onload=function(){}当文档加载完成在去执行主体代码。
7.main.onclick=function(ev){}为main绑定onclick事件处理函数，采用了浏览器兼容写法。
8.document.onclick=function(){}为document绑定onclick事件处理函数实现点击表格区域之外地方也可以实现被编辑内容保存功能。

原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0405/135.html

如何实现可编辑表格单元格效果

标签：

原文地址：http://www.cnblogs.com/xiaofinder/p/4636171.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行