Question

我创建了这个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;
    });

Answer 1

在javascript上查看id选择器是#expense_table，在html上是＃address_table.just将其更改为address_table

Answer 2

改变这个：

$get_lastID();
$('#expense_table tbody').append($newRow);

到此：

$('#expense_table tbody').append($get_lastID());

对于控制台错误，只需将event.returnValue更改为event.preventDefault（）;

添加新行不起作用？

2 个答案: