javascript - Clone last column and add it to the same table - jquery -
i want create new column in html table @ end different header name , empty cells. table haa alternate rows colored.
i trying :
<!doctype html> <html> <head> <title>testing</title> <script type="text/javascript" src="jquery-1.11.2.js"></script> <script type="text/javascript"> function add() { $('#tableid tr').clone().appendto('#tableid'); } </script> </head> <body> <table id="tableid"> <tr> <th>one</th> <th>two</th> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> <button onclick="add()">add</button> </body> </html>
what changes need make achieve while keeping alternate colors? td
elements have meta data them keep too.
if mean cloning row
, that's pretty straightforward:
$("#add").on("click", function(){ $('#tableid tr:last').clone().appendto('#tableid'); });
if want add column
, requires bit more work, have append <td></td>
each <tr>
in table, so:
$("#clone").on("click", function(){ $("#tableid tr").each(function(){ $(this).append("<td>test</td>"); }); });
see jsfiddle see how both work.
keep in mind example. have determine if row contains <th>
, change content accordingly, idea.
Comments
Post a Comment