CODEWITHSUNDEEP
jqueryhtml
sys_debug
sys_debug

Reputation: 4003

jquery add row to table

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

Upvotes: 2

Views: 1687

Answers (2)

Gopesh
Gopesh

Reputation: 3950

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>

Upvotes: 4

pranky64
pranky64

Reputation: 415

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>";

Upvotes: 0

Related Questions