Добавить таблицу строк с добавленными данными на кнопке Нажмите

Question

Это расширение предыдущего вопроса Dynamically append html table cell, и html был слегка изменен.

<div class="docs-main"> 
<h2>Workflows</h2> 
<table class="tablesaw" data-tablesaw-mode="stack" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch> 
    <thead> 
     <tr> 
      <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Workflow Name</th> 
      <th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="1">Title</th> 
      <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Assigned To</th> 
      <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Status</th> 
      <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Due Date</th> 
      <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">Outcome</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="title"> 
       <input type="text" /> 
      </td> 
      <td> 
       <input type="text" /> 
      </td> 
      <td> 
       <select id="e1"> 
        <option value="1">Name 1</option> 
        <option value="2">Name 2</option> 
        <option value="3">Name 3</option> 
       </select> 
      </td> 
      <td> 
       <select id="e2"> 
        <option value="#00ff00">Complete</option> 
        <option value="#ffff00">In Progress</option> 
        <option value="#ff0000">Incomplete</option> 
       </select> 
      </td> 
      <td> 
       <input type="datetime" /> 
      </td> 
      <td> 
       <input type="text" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<input type="submit" value="Add Row" /> 

Обновленный jsfiddle является https://jsfiddle.net/marcwebdude/48ng08tq/13/. Проблема заключается в добавлении функции в строки 47-64, где она автоматически добавляет строку.

$(function() { 
    var rowTamplate = $('table.tablesaw tbody tr').eq(0); 
    var rowContent = [ 
     '<input type="text" value="Name" />', 
     '<input type="text" value="Title" />', 
     '<select><option>Name 1</option><option>Name 2</option><option>Name 3</option></select>', 
     '<select><option value="#00ff00">Complete</option><option value="#ffff00">In Progress</option><option value="#ff0000">Incomplete</option></select>', 
     '<input type="datetime" value="Select Date" />', 
     '<input type="text" />' 
    ]; 
    var rowToadd = rowTamplate.clone(); 
    rowToadd.find('td').each(function (index, element) { 
     $(element).append(rowContent[index]); 
    }); 
    rowToadd.insertAfter('table.tablesaw tr:eq(2)'); 
    for (var i = 0; i < 10; i++) { 
     rowToadd.clone().insertAfter('table.tablesaw tr:eq(2)'); 
} 

Я ищу решение, которое при нажатии кнопки добавляет строку с добавленным html. Не добавлять его автоматически после текущей строки. Например, если эта таблица была пустой, нажатие кнопки добавит строку с этими 6 указанными столбцами и входами, которые совпадают с каждой ячейкой.

Вторая проблема с моим существующим скриптом заключается в том, что он не форматирует добавленный html, когда строка добавляется вручную в html-файл, он правильно форматируется, но не если он добавлен через jquery.

Answer 1

Обновленный jsfiddle с пересмотренным jquery равен https://jsfiddle.net/marcwebdude/48ng08tq/73/, и до сих пор он добавляет содержимое в таблицу правильно. Вот HTML-

<div class="docs-main"> 
    <h2>Workflows</h2> 
    <table class="tablesaw" data-tablesaw-mode="stack" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch> 
     <thead> 
      <tr> 
       <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Workflow Name</th> 
       <th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="1">Title</th> 
       <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Assigned To</th> 
       <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Status</th> 
       <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Due Date</th> 
       <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="5">Outcome</th> 
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
    </table> 
    <input type="submit" value="Add Row" id="button" /> 
</div> 

и вот Jquery

$(document).ready(function() { 
    $('#button').on('click', function(){ 
     $('.tablesaw').find('tbody').append($('<tr><td><input type="text" value="Name" /></td><td class="title"><input type="text" value="Title" /></td><td><select class="e1"><option value="0">-- User --</option><option>Name 1</option><option>Name 2</option><option>Name 3</option></select></td><td><select class="e2"><option value="#fff">-- Status --</option><option value="#00ff00">Complete</option><option value="#ffff00">In Progress</option><option value="#ff0000">Incomplete</option></select></td><td><input type="datetime" value="Select Date" /></td><td><input type="text" /></td></tr>')); 
     $('.e1').select2(); 
     $('.e2').select2().on('change', function() { 
      $(this).next() 
       .find('.select2-selection') 
       .css({ backgroundColor: this.value }); 
     }).trigger('change'); 
     }); 
    }); 

Это добавляет правильные данные в каждую ячейку, а также наследует стили, как только строка создается.