<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript" src = "jquery-1.4.1.min.js"> </script>
<Title> untitled document </title>
<Script type = "text/javascript">
// Add a new row
Function do_Add (tag)
{
// First convert the DOM object to the JQuery object
// Obtain the parent element tr of the current DOM object
// Call the Jquery clone method to clone a copy of a row
Var tr = $ (tag). parents ("tr"). clone ();
// Duplicate when the Column Used for operation is modified
Var td = tr. find ("td" 2.16.eq(42.16.html ("");
// Determine the number of columns in this row
Var count = tr. find ("td"). length;
// Use the each method to bind the click Event of the current column so that the column can be edited
Tr. find ("td"). each (function (I ){
// Avoid modifying the last column
If (I <count-1 ){
$ (This). click (function (){
EditTd (this );
});
}
});
// Add a cancel event (create a hyperlink to cancel adding rows)
Var cacel = $ ("<a>"). attr ("href", "#"). text ("cancel"). click (function (){
Do_cancel (this );
}). Appendto (TD );
// Append save event (create a hyperlink to save the added row)
VaR save = $ ("<A>"). ATTR ("href", "#"). Text ("save"). Click (function (){
Do_save (this );
}). Appendto (TD );
// Add the cloned row to the table
Tr. appendto ($ ("# tbody "));
Return false;
}
// Create an input box and add it to the current column. When the input box loses focus, add the input value to the current column.
Function edittd (TAG ){
// Convert a DOM object to a jquery object
VaR TD = $ (TAG );
// Obtain the text content of the current object
VaR text = td.html ();
// Create a text box and assign the text value in the original column to the text box
Var input = $ ("<input id = 'A'>"). val (text). blur (function (){
// When the text box loses focus, add the value of the text box to the column
Td.html ($ (this). val (). click (function (){
EditTd (this );
});
});
Td.html (input). unbind ("click ");
$ ("# A") [0]. focus ();
}
// Cancel the event
Function do_cancel (tag)
{
$ (Tag). parents ("tr"). remove ();
}
// Column saving event
Function do_save (tag)
{
This. focus ();
// Obtain the parent element of the current click, the entire row
Var tr = $ (tag). parents ("tr ");
// Obtain the columns of the current row
Var count = tr. find ("td"). length;
// Obtain the text of the current row
Tr. find ("td"). each (function (I ){
If (I <count-1 ){
Alert (count + "\ n" + $ (this). text ())
}
});
}
</Script>
<Style type = "text/css">
# Info {border: solid 1px}
# Info td {border: solid 1px; width: 200px}
</Style>
</Head>
<Body>
<Table id = "Info">
<Thead>
<Tr>
<Td> NO. </td>
<Td> name </td>
<Td> link </td>
<Td> time </td>
<Td> operation </td>
</Tr>
</Thead>
<Tbody id = "tbody">
<Tr>
<TD> 0 </TD>
<TD> ABC </TD>
<TD> http: // www </TD>
<TD> 2012/2/1 </TD>
<TD>
<A href = "#" onclick = "do_add (this)"> Add by template </a>
</TD>
</Tr>
</Tbody>
</Table>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
