PivotTable jquery clone () remove () ..
Then leave one example of a table where you add and delete rows dynamically, with the help of jquery:
jquery.js = http: //code.jquery.com/jquery-1.9.1.js
jqueryui.js = http://code.jquery.com/ui/1.10.2/jquery-ui.js
copies the contents of such links and save them in the folder with the same name endicado before above (=) sign now we see with our html code or can download the complete example from: https://copy.com/iKMBz8EoHUNU ):
at the end of this entry is the functional demo of the table ...
html
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
<Title> Untitled Document </ title>
</ Head>
<Body>
</ Body>
</ Html>
<Html>
<Head>
<Script src = "jquery.js"> </ script>
<Script src = "jqueryui.js"> </ script>
<Script>
$ (Function () {
$ ( "#tabs") .tabs ();
});
$ (Function () {
// Clone the hidden row that has the base camps, and added to the end of the table
$ ( "# Add"). On ( 'click', function () {
$ ( "# Tbody table tr: eq ()") clone () append ( '<td class = "delete"> <input class = "a" type = "button" value = "-" /> </.. td> ') appendTo ( "# table.");
});
// Event to select the row and deletes
$ (Document) .on ( "click". "Delete" function () {
var parent = $ (this) .parent ();
$ (Parent) .remove ();
});
});
</ Script>
<H1> Example </ h1>
<Table border = "1" id = "table">
<- Header table ->
<Thead>
<Tr>
<Th> Value </ th>
<Th> Name </ th>
<Th> </ th>
<Th> & nbsp; </ th>
</ Tr>
</ Thead>
<! - Body of the table with fields ->
<Tbody>
<! - Row basis to clone and added to the end ->
<Tr id = "row-based">
<Td> <input id = "value" name = "value []" type = "text" /> </ td>
<Td> <select id = "" name = "name []">
<Option value = "" disabled = "disabled" selected = "selected"> Select ... </ option>
<Option value = "FR"> FR </ option>
<Option value = "FR"> FC </ option>
<Option value = "PA"> PA </ option>
<Option value = "Glisemia"> Glisemia </ option>
</ Select>
</ Td>
</ Tr>
<- Order code: Base Row ->
</ Tbody>
</ Table>
<! - Button to add rows ->
<Input type = "button" class = "a" id = "add" value = "+" />
</ Body>
</ Html>
Then leave one example of a table where you add and delete rows dynamically, with the help of jquery:
jquery.js = http: //code.jquery.com/jquery-1.9.1.js
jqueryui.js = http://code.jquery.com/ui/1.10.2/jquery-ui.js
copies the contents of such links and save them in the folder with the same name endicado before above (=) sign now we see with our html code or can download the complete example from: https://copy.com/iKMBz8EoHUNU ):
at the end of this entry is the functional demo of the table ...
html
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
<Title> Untitled Document </ title>
</ Head>
<Body>
</ Body>
</ Html>
<Html>
<Head>
<Script src = "jquery.js"> </ script>
<Script src = "jqueryui.js"> </ script>
<Script>
$ (Function () {
$ ( "#tabs") .tabs ();
});
$ (Function () {
// Clone the hidden row that has the base camps, and added to the end of the table
$ ( "# Add"). On ( 'click', function () {
$ ( "# Tbody table tr: eq ()") clone () append ( '<td class = "delete"> <input class = "a" type = "button" value = "-" /> </.. td> ') appendTo ( "# table.");
});
// Event to select the row and deletes
$ (Document) .on ( "click". "Delete" function () {
var parent = $ (this) .parent ();
$ (Parent) .remove ();
});
});
</ Script>
<H1> Example </ h1>
<Table border = "1" id = "table">
<- Header table ->
<Thead>
<Tr>
<Th> Value </ th>
<Th> Name </ th>
<Th> </ th>
<Th> & nbsp; </ th>
</ Tr>
</ Thead>
<! - Body of the table with fields ->
<Tbody>
<! - Row basis to clone and added to the end ->
<Tr id = "row-based">
<Td> <input id = "value" name = "value []" type = "text" /> </ td>
<Td> <select id = "" name = "name []">
<Option value = "" disabled = "disabled" selected = "selected"> Select ... </ option>
<Option value = "FR"> FR </ option>
<Option value = "FR"> FC </ option>
<Option value = "PA"> PA </ option>
<Option value = "Glisemia"> Glisemia </ option>
</ Select>
</ Td>
</ Tr>
<- Order code: Base Row ->
</ Tbody>
</ Table>
<! - Button to add rows ->
<Input type = "button" class = "a" id = "add" value = "+" />
</ Body>
</ Html>
