javascript - 使用 JQuery 动态生成的表中的行数

Question

我有一个带有页眉和页脚的表格，并且已经创建了一个默认行。当我动态添加更多行时，我没有得到确切的行数。如果我之前添加它们，它总是会返回正确的行数。

下面是我写的代码-

    <table id="empTable" class="table table-responsive table-striped table-bordered">
                    <thead>`enter code here`
                        <tr>
                            <td>Name of Employee</td>
                            <td>Father's Name/Husband's Name</td>
                            <td>Basic</td>
                            <td>Total attendance</td>
                            <td>Clear</td>
                        </tr>
                    </thead>
                    <tbody id="TextBoxContainer">
                        <tr>
                            <td><input id="emp_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
                            <td><input id="father_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
                            <td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
                            <td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
                            <td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>
                        </tr>              

                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="5">
                                <button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i>&nbsp; Add&nbsp;</button></th>
                        </tr>

                    </tfoot>
                </table>

<script>

            //function to add/remove rows
            $(function() {

                $("#btnAdd").bind("click", function() {
                    var div = $("<tr />");
                    div.html(GetDynamicTextBox(""));
                    $("#TextBoxContainer").append(div);
                });
                $("body").on("click", ".remove", function() {

                    $(this).closest("tr").remove();

                });
            });


            //function to return value of Dynamic content
            function GetDynamicTextBox(value) {
                return '<td><input name="DynamicTextBox" type="text" value="" class="form-control" /></td>' +
                    '<td><input name="DynamicTextBox" type="text" value="' + value + '" class="form-control" /></td>' +
                    '<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
                    '<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
                    '<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>'
            }

</script>

我正在使用这一行返回行数，但它不起作用 -

 var rowCount = document.getElementById("TextBoxContainer").rows.length;
            $('#btnSave').on('click', function() {
                alert(rowCount);

            })

我已经尝试了 stackoverflow 的所有解决方案，但不明白为什么它不适用于动态行，而我在 fiddle 中看到的相同代码却有效。

请帮忙。

Answer 1

因为您要动态创建新行，所以您需要移动这一行:

var rowCount = document.getElementById("TextBoxContainer").rows.length;

内部:

$('#btnSave').on('click', function() {

根据@charlietf 的评论，我建议更改行数:

var rowCount = $("#TextBoxContainer tr").length;

//function to return value of Dynamic content
function GetDynamicTextBox(value) {
    return '<td><input name="DynamicTextBox" type="text" value="" class="form-control" /></td>' +
            '<td><input name="DynamicTextBox" type="text" value="' + value + '" class="form-control" /></td>' +
            '<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
            '<td><input name="DynamicTextBox" type="number" value="' + value + '" class="form-control" /></td>' +
            '<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>';
}

$(function () {

    $('#btnSave').on('click', function() {
        var rowCount = $("#TextBoxContainer tr").length;
        console.log('Rows: ' + rowCount);

    })
    $("#btnAdd").bind("click", function() {
        var div = $("<tr />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
    $("body").on("click", ".remove", function() {

        $(this).closest("tr").remove();

    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table id="empTable" class="table table-responsive table-striped table-bordered">
    <thead>`enter code here`
    <tr>
        <td>Name of Employee</td>
        <td>Father's Name/Husband's Name</td>
        <td>Basic</td>
        <td>Total attendance</td>
        <td>Clear</td>
    </tr>
    </thead>
    <tbody id="TextBoxContainer">
    <tr>
        <td><input id="emp_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
        <td><input id="father_name" name="DynamicTextBox" type="text" value="" class="form-control" /></td>
        <td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
        <td><input name="DynamicTextBox" type="number" value="" class="form-control" /></td>
        <td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>
    </tr>

    </tbody>
    <tfoot>
    <tr>
        <th colspan="5">
            <button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i>&nbsp; Add&nbsp;</button>
        <button id="btnSave" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="ASavee controls"><i class="glyphicon glyphicon-plus-sign"></i>&nbsp; Save&nbsp;</button></th>
    </tr>

    </tfoot>
</table>