javascript - 添加新行不起作用？

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        6年前关闭。



我创建了这个jQuery脚本来创建动态表以输入多个地址的数据，当我想添加新行而不是向表中添加新行时遇到问题，有人可以帮助我吗？我的控制台告诉我此消息

  event.returnValue已弃用。请使用标准
  改为使用event.preventDefault（）。 GET ID：1 | $ id：street_01

的HTML

<html>
<body>
    <form>
    <div class="container">
        <table id="address_table" class="table">
            <thead>
                <tr>
                    <th>Street</th>
                    <th>City</th>
                    <th>Province</th>
                    <th>PostalCode</th>
                    <th>&nbsp;</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" name="street_01" maxlength="255" required /></td>
                    <td><input type="text" name="city_01" maxlength="255" required /></td>
                    <td><input type="text" name="province_01" maxlength="255" required /></td>
                    <td><input type="text" name="postalCode_01" maxlength="7" required /></td>
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>

        <input type="button" value="Add Row" id="add_AdressRow" />
    </div> <!--/container-->
    </form><!--/form-->

    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/jquery.validate.js"></script>
    <script src="Scripts/script.js"></script>
</body>
</html>

javascript

// GET ID OF last row and increment it by one
    var $lastChar = 1, $newRow;
    $get_lastID = function () {
        var $id = $('#address_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='street_0" + $lastChar + "' maxlength='255' /></td> \
                    <td><input type='text' name='city_0" + $lastChar + "' maxlength='255' /></td> \
                    <td><input type='number' name='province_0" + $lastChar + "' maxlength='11' /></td> \
                    <td><input type='text' name='postalCode_0" + $lastChar + "' maxlength='255' /></td> \
                    <td><input type='button' value='Delete' class='del_ExpenseRow' /></td> \
                </tr>"
        return $newRow;
    }

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

    $(".del_AdressRow").bind("click", function () {
        $(this).closest('tr').remove();
        $lastChar = $lastChar - 2;
    });

最佳答案

看到javascript上的ID选择器是#expense_table，而html上的ID选择器是＃address_table.just将其更改为address_table

关于javascript - 添加新行不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21662876/