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

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

javascript jquery html

通过javascript添加下拉列表时，添加行不起作用,javascript,jquery,html,Javascript,Jquery,Html,我正在通过jquery向html添加行。当我在jquery中添加“下拉列表”时，addrow停止工作。它与输入类型“text”完美配合。谁能建议： HTML <body> <div id="page_container"> <div class="form_container"> <h3>Add and Delete rows dynamically with textboxes using jQ

我正在通过jquery向html添加行。当我在jquery中添加“下拉列表”时，addrow停止工作。它与输入类型“text”完美配合。谁能建议：

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通过文本框动态添加和删除行：
序号
模式
挑选
自动的
汽车

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;
    }); 
});

$（函数（）{
//获取最后一行的ID并将其递增1
var$lastChar=1，$newRow；
$get\u lastID=函数（）{
var$id=$（“#费用_表tr:last child td:first child input”）.attr（“name”）；
$lastChar=parseInt（$id.substr（$id.length-2），10）；
log（'GET id:'+$lastChar+'|$id:'+$id'）；
$lastChar=$lastChar+1；
$newRow=”\
\
选择汽车\
\
"
返回$newRow；
}
//******--开始添加新行
$（'#add_ExpenseRow'）。在（“单击”，function（）{
如果（$lastChar此处的字符串格式不正确：
$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，但您并没有将其放入任何内容中。+1 btw OP应该授权删除按钮单击此处的处理程序：@A.Wolff:谢谢，将其添加到我的答案中！@A Wolf.明白了，但选项仍不会出现在其他行中。
$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>"

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

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