Динамически добавленная строка не визуализируется 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 ^

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

Хорошо ... По-видимому, как сказал @Satpal и @David разместил ссылку справки, <form> не может быть прямым потомком от table, th или tr. Он будет автоматически закрываться, и вещи, которые вы не хотите, в конечном итоге произойдут.

Решение, которое я хотя это (как и во многих других случаях) имеют hidden поля ввода внутри формы, который на своей стороне будет заключен в один отдельный сам, вместе с кнопкой 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'); 

, а затем я:

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

Answer 2

Перед разъяснения, почему он не добавляет я хотел бы сказать, как и другие сказали, что ваши html не будет действовать структура, то, по причинам или доказательств упомянутых в комментариях. Также, когда вы выполняете приведенный ниже код , вставляя весь материал, ваш table перепутался после вставки.

Разъяснение для вашего вопроса

Вы insertBefore('#bank_accs_tbl > tbody > tr:first'); где вы пытаетесь вставить элемент создан до таблицы TBODY первой тр, где, как я вижу свой html там не любой tbody сам и у вас только есть thead и table закрыт. Поэтому сначала вам нужно добавить tbody и пустым tr так, чтобы позиционировать первый 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><!--Add this part--> 
     <tr> 
     </tr> 
    </tbody> 
</table> 

DEMO