自由编辑表格 – 筚路蓝缕

&lt;html&gt;

  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312″&gt;
    &lt;title&gt;
      测试修改表格
    &lt;/title&gt;
    &lt;style&gt;
      /*提示层的样式*/ 
	  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; }
    &lt;/style&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;script language=" JavaScript"&gt;
         //标志位,值为false代表未打开一个编辑框,值为true为已经打开一个编辑框开始编辑 
         var editer_table_cell_tag = false;
         //开启编辑功能标志,值为true时为允许编辑 
         var run_edit_flag = false;
    &lt;/script&gt;
    &lt;script language=" JavaScript"&gt;
             /** * 编辑表格函数 
          * 单击某个单元格可以对里面的内容进行自由编辑
          * @para tableID 为要编辑的table的id
          * @para noEdiID 为不要编辑的td的ID,比如说table的标题
          * 可以写为&lt;td id="no_editer"&gt;自由编辑表格&lt;/td&gt;
          * 此时该td不可编辑 */

         function editerTableCell(tableId, noEdiId)
         {
           var tdObject = event.srcElement;
           var tObject = ((tdObject.parentNode).parentNode).parentNode;
           if (tObject.id == tableId &amp;&amp; tdObject.id != noEdiId &amp;&amp; editer_table_cell_tag == false &amp;&amp; run_edit_flag == true)
           {
             tdObject.innerHTML = " &lt; input type = text id = edit_table_txt name = edit_table_txt value = " + tdObject.innerText + "size = '15′onKeyDown = 'enterToTab()' &gt; &lt;input type = button value = '确定'onclick = 'certainEdit()' &gt; ";
             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' &amp;&amp; event.srcElement.type != 'textarea' &amp;&amp; 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";
           }
         }
    &lt;/script&gt;
    &lt;table id="editer_table" width="100%" align="center" onclick="editerTableCell('editer_table','no_editer')"&gt; 
&lt;tr class="TrHead"&gt; &lt;td colspan="3″ align="center" id="no_editer"&gt;自由编辑表格&lt;/td&gt; &lt;/tr&gt; 
&lt;tr&gt; &lt;td width="33%"&gt;单击开始编辑按钮,然后点击各单元格编辑&lt;/td&gt; &lt;td width="33%"&gt;2&lt;/td&gt; &lt;td width="33%"&gt;3&lt;/td&gt; &lt;/tr&gt; 
&lt;tr&gt; &lt;td width="33%"&gt;4&lt;/td&gt; &lt;td width="33%"&gt;5&lt;/td&gt; &lt;td width="33%"&gt;6&lt;/td&gt; &lt;/tr&gt; 
&lt;tr&gt; &lt;td width="33%"&gt;one&lt;/td&gt; &lt;td width="33%"&gt;two&lt;/td&gt; &lt;td width="33%"&gt;three&lt;/td&gt; &lt;/tr&gt; 
&lt;tr&gt; &lt;td width="33%"&gt;four&lt;/td&gt; &lt;td width="33%"&gt;five&lt;/td&gt; &lt;td width="33%"&gt;six&lt;/td&gt; &lt;/tr&gt; 
&lt;tr class="TrFoot"&gt; &lt;td colspan="3″ align="center" id="no_editer"&gt; 
&lt;input type="button" class="bt" value="开始编辑" onClick="editStart()" onMouseOver="showTip()" onMouseMove="showTip()" onMouseOut="editTip.style.visibility = 'hidden';"&gt; 
&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; 
&lt;div id="editTip"&gt;请单击某个单元格进行编辑!&lt;/div&gt; &lt;/html&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

<html>

<head>

<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>

//标志位,值为false代表未打开一个编辑框,值为true为已经打开一个编辑框开始编辑

var editer_table_cell_tag = false;

//开启编辑功能标志,值为true时为允许编辑

var run_edit_flag = false;

</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>

<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%">one</td> <td width="33%">two</td> <td width="33%">three</td> </tr>

</td> </tr> </table> </body>

<div id="editTip">请单击某个单元格进行编辑!</div> </html>

2025 年 7 月
一	二	三	四	五	六	日
	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

发表回复 取消回复

相关文章

发表回复取消回复