Home/ Questions/Q 7700357
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T22:41:23+00:00

I am trying to get a new dynamically created row to add to a

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0