自由编辑表格 – 筚路蓝缕

<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>
一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31
发表回复 取消回复

相关文章

发表回复取消回复
