<!doctype html>
<meta charset= "UTF-8" >
<title></title>
<script type= "Text/javascript" src= "Http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js" ></script >
<body>
<table id= "TB" >
<tr id= "Show" >
<td>111</td>
<td>111111</td>
</tr>
<tr id= "hidden" style= "Display:none" >
<td>111</td>
<td>111111</td>
</tr>
<tr id= "Show" >
<td>222</td>
<td>222222</td>
</tr>
<tr id= "hidden" style= "Display:none" >
<td>222</td>
<td>222222</td>
</tr>
</table>
<div><input type= "button" Name= "btn" id= "btn" value= "Point Me"/></div>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#tb tr"). each (function () {
$ (this). Bind ("click", Function () {
var $tr = $ ("#tb Tr:eq (" +$ (This). Index () + ")"). Clone (True);
Tr.appendto ("#tb tr"). EQ ($ (this). index ());
$tr. InsertAfter ($ ("#tb Tr:eq (" +$ (This). Index () + ")");
var Eventrid = $ (' #tb tr:even '). attr ("id");
$ (' #tb tr:even '). attr ("id", "hidden_" +eventrid);
});
});
});
function cli () {
Alert ($ (' #tb tr:odd '). length);
$ (' #tb tr:odd '). each (function () {
Alert ($ (this). attr ("id"));
$ (this). Remove ();
});
$ ("#tb tr"). each (function () {
var $tr = $ ("#tb Tr:eq (" +$ (This). Index () + ")"). Clone (True);
$tr. InsertAfter ($ ("#tb Tr:eq (" +$ (This). Index () + ")");
});
var Eventrid = $ (' #tb tr:odd '). attr ("id")
Eventrid = Eventrid.replace ("show", "hidden");
$ (' #tb tr:odd '). attr ("id", Eventrid);
$ (' #tb tr:odd '). Hide ();
}
</script>
</body>
This article is from the "Kick Little Rookie" blog, please make sure to keep this source http://ljt7560868.blog.51cto.com/4076512/1762433
jquery implementation Click on a row in table TR to automatically copy the line after we add to the bank click the button to revert to the initial state