Question

我通过jquery向html添加行。当我在jquery中添加“下拉列表”时，添加行停止工作。它完全适用于输入类型“文本”。谁能建议： 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;
    }); 
});

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

将其替换为：

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

如果您打开浏览器的控制台，则发现Uncaught SyntaxError: Unexpected identifier错误，通知您此问题，并指向该行。

此外，与A. Wolff建议一样，请替换：

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

使用：

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

这可以确保在页面加载后添加的元素将具有您想要的事件处理程序（有关委派事件的详细信息，请参阅jQuery api）

通过javascript添加下拉列表添加行不起作用

1 个答案: