jquery add row to table

Question

I am trying to get a new dynamically created row to add to a table but I can't. I found this example which has an add row and delete row feature. but it didn't work. Any idea why it wouldn't? Things look right over here...

<html> <head> <title>Test JS</title> <script src="jquery-1.7.2.js" type="text/javascript"> <!-- jQuery Code will go underneath this --> $('.add').live('click',function(){ $(this).val('Delete'); $(this).attr('class','del'); var appendTxt = "<tr><td><input type="text" name="input_box_one[]" /></td><td><input type="text" name="input_box_two[]" /></td><td><input class="add" type="button" value="Add More" /></td></tr>"; $("tr:last").after(appendTxt); }); </script> </head> <body> <table id="options-table"> <tbody> <tr> <td>Input-Box-One</td> <td>Input-Box-Two</td> <td></td> </tr> <tr> <td><input type="text" name="input_box_one[]" /></td> <td><input type="text" name="input_box_one[]" /></td> <td><input class="del" type="button" value="Delete" /></td> </tr> <tr> <td><input type="text" name="input_box_one[]" /></td> <td><input type="text" name="input_box_one[]" /></td> <td><input class="add" type="button" value="Add More" /></td> </tr> </tbody> </table> </body> </html>

Please help, I need this working to avoid cluttering the interface...I know there are many examples in the forum here but none seem to be working. I also have jquery.js file in the same folder i have the .php file containing the same code shown above

Gopesh · Accepted Answer · 2014-06-24 13:06:27Z

You are using double quotes inside the var appendTxt.Change that double quotes to single quotes will work.

var appendTxt = "<tr><td><input type='text' name='input_box_one[]' /></td><td><input type='text' name='input_box_two[]' /></td><td><input class='add' type='button' value='Add More' /></td></tr>";

Check this Fiddle http://jsfiddle.net/4LcgA/

Change ur code like this

<script src="jquery-1.7.2.js" type="text/javascript"></script> <script type="text/javascript"> $('.add').live('click',function(){ $(this).val('Delete'); $(this).attr('class','del'); var appendTxt = "<tr><td><input type='text' name='input_box_one[]' /></td><td><input type='text' name='input_box_two[]' /></td><td><input class='add' type='button' value='Add More' /></td></tr>"; $("tr:last").after(appendTxt); }); </script>

it is working on the website you provided but not on mine. I copied it exactly into my file...any idea why?
@Gopesh yes I do have the latest jquery version...<script src="jquery-1.7.2.js" type="text/javascript"> and this should work and is closed by another </script> and code is in between it. True, deleting row is not important
@sys_debug ok..Then press ctrl+shift+j for errors if u r using firefox
p.s. I wrote the above comment after changing the double quotes to single quotes in the var appendTxt. that's why I posted it still didn't work
@sys_debug Try to close the <script> tag for jquery file.and open another <script> for ur jquery code..

pranky64 · Accepted Answer · 2012-03-27 07:08:17Z

use escape sequence \" when using quotes inside quotes!!! try this,

 var appendTxt = "<tr><td><input type=\"text\" name=\"input_box_one[]\" /></td><td><input type=\"text\" name=\"input_box_two[]\" /></td><td><input class=\"add\" type=\"button\" value=\"Add More\" /></td></tr>";

Collectives™ on Stack Overflow

jquery add row to table

2 Answers 2

9 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Related