Javascript 动态添加的行不是可视化的HTML_Javascript_Jquery_Html_Forms

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

javascript jquery html forms

Javascript 动态添加的行不是可视化的HTML,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我尝试在一个表中，点击一个按钮，动态地添加一行和一个表单。下面是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 ac

我尝试在一个表中，点击一个按钮，动态地添加一行和一个表单。下面是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. :)');
    }
}

$（文档）.ready（函数（）{
window.can\u add\u bank\u row=true；
$（“#添加_bank_acc_btn”）。在（'click'，函数（）{
addBankAccRow（）；
});
});
/**
*添加带有字段的表行，以将银行帐户添加到用户的配置文件中。
*/
函数addBankAccRow（）{
如果（窗口。可以添加银行行）{
var warning_msg=“您即将为此用户添加一个新的银行帐户。\n\n确实要添加吗？”；
$('' +
'' +
''）.insertBefore（'bank#u accs_tbl>tbody>tr:first'）；
$（'#addNewBankAccountForm'）.html(
'' +
'' +
“国际”+
“环保总局”+
“Interac”+
“贝宝”+
'' +
'' +
'' +
'' +
'' +
“添加”
);
window.can\u add\u bank\u row=false；
}否则{
警报（'您已经有一个空行要添加银行帐户。\n请在添加新帐户之前填写并提交。：'）；
}
}

当我检查页面的源代码时，我可以在代码中看到表单及其所有元素，但它只是没有直观地显示出来。 //

如果我尝试这样做：

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

$（“”+
'' +
'' +
'' +
“国际”+
“环保总局”+
“Interac”+
“贝宝”+
'' +
'' +
'' +
'' +
'' +
'' +
“添加”+
'' +
''）.insertBefore（'bank#u accs_tbl>tbody>tr:first'）；

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

啊，我也试过这个：

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

$（“”
).insertBefore（“#bank_accs_tbl>tbody>tr:first”）；
$（'#addNewBankAccountForm'）.html(
'' +
'' +
'' +
“国际”+
“环保总局”+
“Interac”+
“贝宝”+
'' +
'' +
'' +
'' +
'' +
“添加”+
''
);

现在，行以及输入都被可视化了，但都在第一个单元格中。。。我不能处理前端，我是后端的家伙。请帮忙：D

在澄清为什么它没有添加之前，我想告诉大家，就像其他人一样由于以下原因，您的

html

将不是有效的结构：评论中提到的证据。同样，当您执行以下代码时插入全部内容后，您的

表就会变得一团糟
插入
澄清您的问题
您有insertBefore（“#bank_accs_tbl>tbody>tr:first”）中的位置
您正在尝试插入之前创建的元素
table tbody first tr在我看到的html
中没有任何tbody
本身，您只需要关闭thead
和table。所以
首先，您需要添加t车身
和一个空的tr，以便摆姿势
tbody
的第一个tr
出现在DOM
中。否则，您的选择器
对于insertBefore
，将无法在HTMLDOM中找到。下面应该是
开始时的表结构：

身份证件
银行类型
标签
通货
最小转移
经核准的


在澄清为什么它没有添加之前，我想告诉大家，就像其他人一样
由于以下原因，您的html将不是有效的结构：
评论中提到的证据。同样，当您执行以下代码时
插入全部内容后，您的表就会变得一团糟
插入
澄清您的问题
您有insertBefore（“#bank_accs_tbl>tbody>tr:first”）中的位置
您正在尝试插入之前创建的元素
table tbody first tr在我看到的html
中没有任何tbody
本身，您只需要关闭thead
和table。所以
首先，您需要添加t车身
和一个空的tr，以便摆姿势
tbody
的第一个tr
出现在DOM
中。否则，您的选择器
对于insertBefore
，将无法在HTMLDOM中找到。下面应该是
开始时的表结构：

身份证件
银行类型
标签
通货
最小转移
经核准的

好的。。。显然，正如@Satpal所说，@david发布了一个帮助链接，
不能是表
、th
或tr
的直接子项。它会自动关闭，你不想发生的事情最终会发生
我想到的解决方案是（在许多其他情况下）在表单中有隐藏的
输入字段，该字段将与提交
按钮一起包含在一个单独的self中。这些隐藏字段最终将从可见的输入字段中获取数据，然后提交
代码如下：
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');

好吧。。。显然，正如@Satpal所说，@david发布了一个帮助链接，
不能是表
、th
或tr
的直接子项。它会自动关闭，你不想发生的事情最终会发生
我想到的解决方案是（在许多其他情况下）在表单中有隐藏的输入字段，在表单一侧将包含在一个单独的se中
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');

$('#add_bank_type_dropdown_hidden').val($('#add_bank_type_dropdown_input').val());
            $('#add_bank_type_label_hidden').val($('#add_bank_type_label_input').val());
            $('#add_bank_type_currency_hidden').val($('#add_bank_type_currency_input').val());
            $('#add_bank_type_min_transfer_hidden').val($('#add_bank_type_min_transfer_input').val());
            if ($('#add_bank_type_approved_input').is('checked')) {
                $('#add_bank_type_approved_hidden').val(1);
            } else {
                $('#add_bank_type_approved_hidden').val(0);
            }
            $('#addNewBankAccountForm').submit();