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 ^

Aaaand，我也试过这个：

$('<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

在澄清为什么它没有添加之前，我想像其他人一样说表示你的html将不是有效的结构，原因或评论中提到的证据。当你执行下面的代码时插入整个内容后，table被搞砸了插入

澄清您的问题

你有insertBefore('#bank_accs_tbl > tbody > tr:first');在哪里您正在尝试插入之前创建的元素 table-tbody-first tr 在我看到你的html 任何tbody本身时，你只有thead 1}}和table已关闭。所以首先，您需要添加tbody和空tr以便摆出姿势 tbody中存在tr的第一个DOM。否则你的selector 在insertBefore中找不到HTML DOM。下面应该是您的table结构在开头：

<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> <tr> </tr> </tbody> </table>

<强> DEMO

Answer 2

好吧......显然，正如@Satpal所说，@ david发布了帮助链接，<form>不能成为table，th或tr的直接孩子。它将自动关闭，并且你不希望发生的事情最终会发生。

我的解决方案是（在许多其他情况下）在表单内部有hidden个输入字段，它们将与{{1}一起包含在一个单独的自我中}按钮。这些隐藏的字段最终将从可见的输入字段中获取数据，然后提交。

以下是代码：

submit

然后我做：

var warning_msg = "You are about to add a new bank account for this merchant.\n\nAre you sure?";
        $('<tr>' +
            '<td></td>' +
            '<td><select id="add_bank_type_dropdown_input">' +
            '<option value="international">International</option>' +
            '<option value="sepa">SEPA</option>' +
            '<option value="interac">Interac</option>' +
            '<option value="paypal">PayPal</option>' +
            '</select></td>' +
            '<td><input id="add_bank_label_input" name="add_bank_label_input" type="text"></td>' +
            '<td><input id="add_bank_currency_input" name="add_bank_currency_input" type="text" style="width: 50px;"></td>' +
            '<td><input id="add_bank_min_transfer_input" name="add_bank_min_transfer_input" type="text" style="width: 80px;"></td>' +
            '<td><input id="add_bank_approved_input" type="checkbox" name="add_bank_approved" value="0"></td>' +
            '<td>' +
            '<form method="POST" onsubmit=\"return confirm(\'' + warning_msg + '\');\">' +
            '<input id="add_bank_type_dropdown_hidden" type="hidden">' +
            '<input id="add_bank_label_hidden" type="hidden">' +
            '<input id="add_bank_currency_hidden" type="hidden">' +
            '<input id="add_bank_min_transfer_hidden" type="hidden">' +
            '<input id="add_bank_approved_hidden" type="hidden">' +
            '<button type="submit" class="btn btn-primary">Add</button>' +
            '</form>' +
            '</td>' +
            '</form>' +
            '</tr>').insertBefore('#bank_accs_tbl > tbody > tr:first');

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

2 个答案: