This example describes the super simple jquery action table method. Share to everyone for your reference. The implementation methods are as follows:
Use jquery to add a row to the specified table, delete a row
Copy Code code as follows:
<script language= "javascript" src= "./jquery.js" ></script>
<table border= "1px #ooo" id= "test" name= "test" class= "test" cellpadding= "0" cellspacing= "0" width= "20%" >
<tr id= "1" ><td width= "30%" >1</td>
<TD width= "30%" >2</td>
<TD width= "30%" >3</td></tr>
<tr id= "2" ><td width= "30%" >11</td>
<TD width= "30%" >22</td>
<TD width= "30%" >33</td></tr>
</table>
<table border= "1px #ooo" id= "test1" name= "test1" cellpadding= "0" cellspacing= "0" width= "20%" > <tr id= "4" > <TD width= "30%" >1</td>
<TD width= "30%" >2</td>
<TD width= "30%" >3</td>
</tr>
</table>
<input type= "button" name= "button" value= "Add" onclick= "ADDTR (' Test ');" >
<input type= "button" name= "button" value= "del" onclick= "deltr" (' Test '); >
<script>//Add a row at the end of table with ID test
function Addtr (id) {tr_id = $ ("#test >tbody>tr:last"). attr ("id");
tr_id++; alert (tr_id);
str = "<tr id = '" +tr_id+ "' ><td width= ' 30% ' >re1</td><td width= ' 30% ' >re2</td><td width = ' 30% ' >re3</td></tr> ';
$ (' # ' +id). append (str); //delete last row of table with ID test
function deltr (id) {tr_id = $ ("#test >tbody>tr:last"). attr ("id"); $ (' # ' +tr_id). Remove ();
}
</script>
jquery dynamically add rows and columns to delete a table
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<style type= "Text/css" > cl1{background-color: #FFFFFF; cl2{background-color: #FFFF99;} </style>
<script type= "Text/javascript" src= "Css_js/jquery/jquery-1.3.2.min.js" ></script>
<script type= "Text/javascript" >
var rowcount = 0;
var colcount = 2;
function AddRow () {rowcount++ var rowtemplate = ' <tr class= ' tr_ ' +rowcount+ ' ' ><td> ' +rowcount+ ' </td> <TD class= "CL1" > Content ' +rowcount+ ' </td><td class= "CL1" ><a href= "#" Onclick=delrow (' +rowcount+ ') > Delete </a></td></tr> ';
var tablehtml = $ ("#testTable tbody"). html ();
tablehtml + = Rowtemplate; $ ("#testTable tbody"). HTML (tablehtml); }
function Delrow (_id) {$ ("#testTable. Tr_" +_id). Hide (); rowcount--;}
function Addcol () {colcount++ $ ("#testTable tr"). each (function () {
var trhtml = $ (this). html (); trhtml + = ' <td onclick= ' delcol (' +colcount+ ') ' > increased td</td> ';
$ (this). html (trhtml);
});
}
function Delcol (_id) {$ ("#testTable tr"). each (function () {$ ("Td:eq (" +_id+) ", this). Hide ();});
colcount--;
}
function Mover (_id) {$ ("#testTable Tr:not (: A)"). each (function () {$ (' Td:eq ("+_id+"), this). Removeclass ("CL1");
$ ("Td:eq (" +_id+ ")", this). AddClass ("Cl2"); }); }
function Mout (_id) {$ ("#testTable Tr:not (: A)"). each (function () {$ (' Td:eq ("+_id+"), this). Removeclass ("Cl2");
$ ("Td:eq (" +_id+ ")", this). AddClass ("CL1"); }); } </script>
<title>jquery Operation form Test </title>
<body>
<table id= "TestTable" border= "1" width= "> <tr>"
<td> serial number </td> <td onmouseover= "mover (1);" Onmouseout= "mout (1);" > Content </td>
<TD onmouseover= "Mover (2);" Onmouseout= "Mout (2);" > Operations </td> </tr>
</table>
<input type= "button" value= "Add Row" onclick= "AddRow ();" />
<input type= "button" value= "Add Column" onclick= "Addcol ();" />
</body>
jquery Operations Table (Add/delete rows, add/Remove Columns)
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<script type= "Text/javascript" src= "Jquery-1.4.4.min.js" ></script>
<title>jquery Operation form Test </title>
<script type= "Text/javascript" >
Function del (_id) {$ ("#testTable. Tr_" +_id). html (');
var tabletr = $ ("#testTable. Tr_" +_id). Hide (); }
function AddRow () {var addrowtemplete = ' <tr class= ' tr_ ' +tablecount+ ' ">
<TD class= "CL1" > ' +tablecount+ ' </td><td class= "CL1" > Content ' +tablecount+ ' </td>
<TD class= "CL1" ><a href= "javascript:void (0)" Onclick=del (' +tablecount+ ');> Delete </a></td>< /tr> '; $ ("#testTable tbody"). Append (Addrowtemplete); function Addcol () {$ ("#testTable tr"). each (function () {var trhtml = ' <td onclick= ' delcol (' +colcount+ ') ' > Zenga T;/td> "; $ (this). Append (trhtml); }); The function Delcol (_id) {$ ("#testTable tr"). each (function () {$ ("Td:eq (" +_id+) ", this). Hide ();});
</script> <body>
<table width= "487" border= "1" id= "TestTable" > <tr> <td onclick= "delcol (0)" > Serial number </td> <TD Onclick= "Delcol (1)" > Content </td> <td onclick= "Delcol (2)" > Operation </td> </tr> </table> <p > <input type= "button" Name= "Submit" value= "Add Row" onclick= "AddRow ()"/> <input type= "button" Name= "Submit2" Value= "Add column" onclick= "Addcol ()"/> </p> </body>
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> my 1% Ladies ' Shop official website | White Garden Community |4000-921001| Love hundred points </title>
<meta name= "keywords" content= "my 1%, my 1% women's shop, my 1% mall, my 1% taobao"/>
<meta name= "description" content= "My 1% Taobao three golden Crown women's Clothing shop official website 100f1.com, only for hundred cents a tasteful beauty!" My 1% Mall monthly release of the new fashion women's clothing and trendy dress matching. "/>
<script type= "Text/javascript" src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" >< /script>
<body>
<div id= "wrap" class= "wrap" >
<div class= "Fatie" id= "Fatie" >
<DL class= "Options" >
<dd> options <span>1</span>:<input type= "text" class= "text"/><a class= "Base_icon" Javascript:void (0); " > Delete </a></dd>
<dd> options <span>2</span>:<input type= "text" class= "text"/><a class= "Base_icon" Javascript:void (0); " > Delete </a></dd>
<dd> options <span>3</span>:<input type= "text" class= "text"/><a class= "Base_icon" Javascript:void (0); " > Delete </a></dd>
<dd> options <span>4</span>:<input type= "text" class= "text"/><a class= "Base_icon" Javascript:void (0); " > Delete </a></dd>
<dd> options <span>5</span>:<input type= "text" class= "text"/><a class= "Base_icon" Javascript:void (0); " > Delete </a></dd>
</dl>
<p class= "Add_opt" >
<span class= "Base_icon" > Add more Options </span>
</p>
</div>
</div>
</body>
<script type= "Text/javascript" >
$ (document). Ready (function () {//voting option or decrease control
var Fatie = $ ("#fatie");
var option = Fatie.find (". Options DD");
function List_again () {//Option reordering
Option.each (function () {
var i = $ (this). index ();
$ (this). FIND ("span"). HTML (i+1);
})
}
Fatie.find (". add_opt span"). Click (function () {//Add options
Fatie.find (". Options"). Append (' <dd> options <span>i</span>:<input type= ' text ' class= ' text '/> <a class= "Base_icon" href= "javascript:void (0);" > Delete </a></dd> ');
option = Fatie.find (". Options DD");
List_again ();
})
Option.find ("a"). Live ("Click", Function () {//delete option
$ (this). Parent (). remove ();
List_again ();
})
})
</script>
I hope this article will help you with your jquery programming.
