-1

I am adding rows to html through jquery. when i have added "dropdown list" in jquery, add row stopped working. it was perfectly working with input type "text". Can anyone suggest : http://jsfiddle.net/znFmc/12/

HTML

<body>
    <div id="page_container">
        <div class="form_container">
            <h3>Add and Delete rows dynamically with textboxes using jQuery:</h3>
            <table id="expense_table" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th>Sl. No</th>
                        <th>Mode</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" name="reg_no_01" maxlength="10" required /></td>
                        <td>
                        <select name="mode" maxlength="10" required />
                            <option value="Select"selected>Select</option>
                            <option value="Auto">Auto</option>
                            <option value="Car">Car</option>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                </tbody>
            </table>

            <input type="button" value="Add Row" id="add_ExpenseRow" />

        </div> <!-- END subject_marks -->
        <div class="clearfix"></div>
    </div>

    <!-- FOOTER -->
    <a class="mm" href="http://mediamilan.com/" title="Go to Media Milan.com" target="_blank"></a>
</body>

jQuery

$(function(){
    // GET ID OF last row and increment it by one
    var $lastChar =1, $newRow;
    $get_lastID = function(){
        var $id = $('#expense_table tr:last-child td:first-child input').attr("name");
        $lastChar = parseInt($id.substr($id.length - 2), 10);
        console.log('GET id: ' + $lastChar + ' | $id :'+$id);
        $lastChar = $lastChar + 1;
        $newRow = "<tr> \
                    <td><input type='text' name='reg_no_0"+$lastChar+"' maxlength='10' /></td> \
                    <td><select name='subjects_0"+$lastChar+"' maxlength='10' /><option value="Select"selected>Select</option><option value="Auto">Auto</option> <option value="Car">Car</option></td> \
                    <td><input type='button' value='Delete' class='del_ExpenseRow' /></td> \
                </tr>"
        return $newRow;
    }

    // ***** -- START ADDING NEW ROWS
    $('#add_ExpenseRow').on("click", function(){ 
        if($lastChar <= 9){
            $get_lastID();
            $('#expense_table tbody').append($newRow);
        } else {
            alert("Reached Maximum Rows!");
        };
    });

    $(".del_ExpenseRow").on("click", function(){ 
        $(this).closest('tr').remove();
        $lastChar = $lastChar-2;
    }); 
});
2
  • 1
    You could open your console...
    – A. Wolff
    Apr 16, 2014 at 11:10
  • You're returning $newRow in your function, but you aren't exactly putting it into anything. Apr 16, 2014 at 11:12

1 Answer 1

2

Your string isn't formatted properly in here:

$newRow = "<tr> \
                <td><input type='text' name='reg_no_0"+$lastChar+"' maxlength='10' /></td> \
                <td>
                    <select name='subjects_0"+$lastChar+"' maxlength='10' /> \
                        <option value="Select"selected>Select</option> \
                        <option value="Auto">Auto</option> \
                        <option value="Car">Car</option></td> \
                <td><input type='button' value='Delete' class='del_ExpenseRow' /></td> \
            </tr>"

Replace that with:

$newRow = "<tr> \
                <td><input type='text' name='reg_no_0"+$lastChar+"' maxlength='10' /></td> \
                <td>
                    <select name='subjects_0"+$lastChar+"' maxlength='10' /> \
                        <option value='Select' selected>Select</option> \
                        <option value='Auto'>Auto</option> \
                        <option value='Car'>Car</option></td> \
                <td><input type='button' value='Delete' class='del_ExpenseRow' /></td> \
            </tr>"

If you open your browser's console, you'd have seen a Uncaught SyntaxError: Unexpected identifier error, notifying you of this issue, and pointing you to that line.

Furthermore, like A. Wolff suggested, replace:

$(".del_ExpenseRow").on("click", function(){ 

With:

$(document).on("click", ".del_ExpenseRow", function(){ 

This makes sure that elements added after page load will have the event handlers you want.
(See the jQuery api for more info about delegated events)

3
  • +1 btw OP should delegate delete buttons click handler like here: jsfiddle.net/SqA9a/2
    – A. Wolff
    Apr 16, 2014 at 11:15
  • @A.Wolff: Thanks, added it to my answer!
    – Cerbrus
    Apr 16, 2014 at 11:20
  • @ A Wolf. Got it, but still options are not coming in additional rows. Apr 16, 2014 at 11:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.