javascript - 动态添加的行不是可视化的 HTML

Question

我试图通过单击按钮在表格内动态添加带有表单的行。这是 JS 代码块:

$(document).ready(function () {
    window.can_add_bank_row = true;
    $('#add_bank_acc_btn').on('click', function () {
        addBankAccRow();
    });
});
/**
 *  Adds a table row with fields to add a bank account to the user's profile.
 */
function addBankAccRow() {
    if (window.can_add_bank_row) {
        var warning_msg = "You are about to add a new bank account for this user.\n\nAre you sure?";
        $('<tr>' +
            '<form id="addNewBankAccountForm" method="POST" onsubmit=\"return confirm(\'' + warning_msg + '\');\">' +
            '</tr>').insertBefore('#bank_accs_tbl > tbody > tr:first');
        $('#addNewBankAccountForm').html(
            '<td></td>' +
            '<td><select id="bank_type_dropdown">' +
            '<option value="international">International</option>' +
            '<option value="sepa">SEPA</option>' +
            '<option value="interac">Interac</option>' +
            '<option value="paypal">PayPal</option>' +
            '</select></td>' +
            '<td><input name="add_bank_label_input" type="text"></td>' +
            '<td><input name="add_bank_currency_input" type="text" style="width: 50px;"></td>' +
            '<td><input name="add_bank_min_transfer_input" type="text" style="width: 80px;"></td>' +
            '<td><input type="checkbox" name="add_bank_approved" value="0"></td>' +
            '<td><button type="submit" class="btn btn-primary">Add</button></td>'
        );
        window.can_add_bank_row = false;
    } else {
        alert('You\'ve got one empty row to add a bank account already.\nPlease, fill and submit it before adding a new one. :)');
    }
}

当我检查页面的源代码时，我可以在代码中看到表单及其所有元素，但它只是在视觉上不显示。//jsfiddle for this ^

如果我尝试这样做:

$('<tr>' +
            '<form method="POST" onsubmit=\"return confirm(\'' + warning_msg + '\');\">' +
            '<td></td>' +
            '<td><select id="bank_type_dropdown">' +
            '<option value="international">International</option>' +
            '<option value="sepa">SEPA</option>' +
            '<option value="interac">Interac</option>' +
            '<option value="paypal">PayPal</option>' +
            '</select></td>' +
            '<td><input name="add_bank_label_input" type="text"></td>' +
            '<td><input name="add_bank_currency_input" type="text" style="width: 50px;"></td>' +
            '<td><input name="add_bank_min_transfer_input" type="text" style="width: 80px;"></td>' +
            '<td><input type="checkbox" name="add_bank_default" value="0"></td>' +
            '<td><input type="checkbox" name="add_bank_approved" value="0"></td>' +
            '<td><button type="submit" class="btn btn-primary">Add</button></td>' +
            '</form>' +
            '</tr>').insertBefore('#bank_accs_tbl > tbody > tr:first');

然后表单标签自动关闭，输入字段和提交按钮留在表单之外...

//jsfiddle for this one ^

啊啊，我也尝试过这个:

$('<form id="addNewBankAccountForm" method="POST" onsubmit=\"return confirm(\'' + warning_msg + '\');\">'
        ).insertBefore('#bank_accs_tbl > tbody > tr:first');
        $('#addNewBankAccountForm').html(
            '<tr>' +
            '<td></td>' +
            '<td><select id="bank_type_dropdown">' +
            '<option value="international">International</option>' +
            '<option value="sepa">SEPA</option>' +
            '<option value="interac">Interac</option>' +
            '<option value="paypal">PayPal</option>' +
            '</select></td>' +
            '<td><input name="add_bank_label_input" type="text"></td>' +
            '<td><input name="add_bank_currency_input" type="text" style="width: 50px;"></td>' +
            '<td><input name="add_bank_min_transfer_input" type="text" style="width: 80px;"></td>' +
            '<td><input type="checkbox" name="add_bank_approved" value="0"></td>' +
            '<td><button type="submit" class="btn btn-primary">Add</button></td>' +
            '</tr>'
        );

现在，该行以及输入都已可视化，但全部都在第一个单元格中......我无法处理前端，我是后端人员。请帮忙:D

//and its jsfiddle ^

Answer 1

Before clarifying why it isn't adding I would like to tell, as others said your html will not be valid structure then, for the reasons or proofs mentioned in comments. Also when you execute the below code of inserting the whole stuff, your table gets messed up after insertion.

澄清您的问题

You have insertBefore('#bank_accs_tbl > tbody > tr:first'); where in you are trying to insert the element created before table-tbody-first tr where in as I see your html there isn't any tbody itself and you just have thead and table closed. So first you need to add tbody and an empty tr so as to pose tbody's first tr is present in DOM. Otherwise your selector for insertBefore will not be found in HTML DOM. Below should be your table structure at beginning:

<table id="bank_accs_tbl" class="table table-striped">
     <thead>
        <th>ID</th>
        <th>Bank type</th>
        <th>Label</th>
        <th>Currency</th>
        <th>Min. transfer</th>
        <th>Approved</th>
        <th></th>
     </thead>
     <tbody><!--Add this part-->
        <tr>
        </tr>
     </tbody>
</table>

<强> DEMO