Javascript 单击按钮添加带有附加数据的表行

这是对前一个问题的扩展，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" />

工作流程
工作流名称
标题
分配给
地位
到期日
结果
名字1
名称2
名字3
完成
进行中
残缺的

更新的JSFIDLE是。问题在于第47-64行的append函数自动追加一行

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

$（函数（）{
var rowTamplate=$（'table.tablesaw tbody tr'）.eq（0）；
变量行内容=[
'',
'',
“名称1名称2名称3”，
“完成进程不完整”，
'',
''
];
var rowToadd=rowTamplate.clone（）；
rowToadd.find（'td'）。每个（函数（索引，元素）{
$（元素）.append（行内容[索引]）；
});
rowToadd.insertAfter（'table.tablesaw tr:eq（2）'）；
对于（变量i=0；i<10；i++）{
rowToadd.clone（）.insertAfter（'table.tablesaw tr:eq（2）'）；
}

我正在寻找一种解决方案，当单击按钮时，它会添加一行附加html。不要在当前存在的行之后自动添加它。例如，如果此表为空，则单击按钮会添加一行，其中包含这6个指定列以及与每个单元格一致的输入

---

我现有脚本的第二个问题是，它没有格式化附加的html，当一行被手动添加到html文件中时，它的格式是正确的，但如果它是通过jquery附加的，它的格式就不正确。

经过修订的jquery更新的JSFIDLE是正确的，到目前为止，它将内容正确地附加到表中

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

$（文档）.ready（函数（）{
$（'#按钮'）。在（'单击'，函数（）上）{
$（'.tablesaw'）.find（'tbody'）.append（$（'-User--Name 1Name 2Name 3--Status--CompleteIn progresscomplete'）；
$（'.e1'）。选择2（）；
$（'.e2'）。在（'change'，function（）上选择2（）{
$（this.next（）
.find（“.select2 selection”）
.css（{backgroundColor:this.value}）；
}).触发（“变更”）；
});
});

---

这会将正确的数据追加到每个单元格中，并在创建行后继承样式。

这就是您问题的答案吗？