在按钮上添加带有附加数据的表格行点击

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'); 
     }); 
    }); 

这追加的正确数据为每个单元以及一旦创建了行继承样式。