Sometimes you need to edit the form freely---
I'll give you a small example of freely editing the form. The writing is a bit messy, haha:)
//===============================start================================
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>Test modification form</TITLE>
<STYLE>
/*Style of prompt layer*/
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: Song font;
font-size:12px;
POSITION: absolute;
BACKGROUND-COLOR: #f6f6f6;
TOP:30px;
LEFT:30px;
}
/*tr style*/
tr
{
font-family: "Zongyi";
color: #000000;
background-color: #C1DBF5;
font-size: 12px
}
/*table footnote style*/
.TrFoot
{
FONT-SIZE: 12px;
font-family:"An An", "Verdana", "Arial";
BACKGROUND-COLOR: #6699CC;
COLOR:#FFFFFF;
height: 25;
}
/*trhead property*/
.TrHead
{
FONT-SIZE: 13px;
font-family:"An An", "Verdana", "Arial";
BACKGROUND-COLOR: #77AADD;
COLOR:#FFFFFF;
height: 25;
}
/*Text box style*/
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: “Zongyi”, “Verdana”;
color: #000000;
BACKGROUND-COLOR: #E9EFF5;
}
/*button style*/
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">
<!--Global Variable
//Flag bit, the value of false means that an edit box has not been opened, and the value of true means that an edit box has been opened to start editing.
var editer_table_cell_tag = false;
//Enable editing function flag, if the value is true, editing is allowed
var run_edit_flag = false;
//-->
</SCRIPT>
<SCRIPT language = "JavaScript">
<!--
/**
* Edit table functions
* Click a cell to edit the contents inside freely
* @para tableID is the id of the table to be edited
* @para noEdiID The ID of the td that you do not edit, such as the title of the table
* Can be written as <TD >Free editing form</TD>
* This td cannot be edited at this time
*/
function editerTableCell(tableId,noEdiId)
{
var tdObject = ;
var tObject = (().parentNode).parentNode;
if( == tableId && != noEdiId&&editer_table_cell_tag == false && run_edit_flag == true)
{
= "<input type=text id=edit_table_txt name=edit_table_txt value="++" size='15' onKeyDown='enterToTab()'> <input type=button value=' OKEY ' onclick='certainEdit()'>";
edit_table_txt.focus();
edit_table_txt.select();
editer_table_cell_tag = true;
//Modify button prompt information
= "Please click the confirm button first to confirm the modification!";
}
else
{
return false;
}
}
/**
* Confirm to modify
*/
function certainEdit()
{
var bObject = ;
var tdObject = ;
var txtObject = ;
= ;
// means the editing box has been closed
editer_table_cell_tag = false;
//Modify button prompt information
= "Please click a cell to edit!";
}
function enterToTab()
{
if( != 'button' && != 'textarea'
&& == 13)
{
= 9;
}
}
/**
* Control whether to edit
*/
function editStart()
{
if( == "Start editing")
{
= "Edit completed";
run_edit_flag = true;
}
else
{
//If there is no edit box at present, the editing will be successful, otherwise, the submission cannot be submitted.
//You must press the OK button before you can submit it normally
if(editer_table_cell_tag == false)
{
alert("Editor ended successfully!");
= "Start editing";
run_edit_flag = false;
}
}
}
/**
* Provide different prompt information according to different buttons
*/
function showTip()
{
if( == "Edit completed")
{
= + 15;
= + 12;
= "visible";
}
else
{
= "hidden";
}
}
-->
</SCRIPT>
<TABLE width="100%" align="center"
onclick="editerTableCell('editer_table','no_editer')">
<TR class="TrHead">
<TD colspan="3" align="center" >Free editing forms</TD>
</TR>
<TR>
<TD width="33%">Click the Start Editing button, and then click each cell to edit</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" >
<INPUT type="button" class="bt" value="Start editing" onClick="editStart()" onMouseOver="showTip()" onMouseMove="showTip()" onMouseOut=" = 'hidden';">
</TD>
</TR>
</TABLE>
</BODY>
<DIV >Please click a cell to edit!</DIV>
</HTML>
Previous page123Read the full text