Dynamically append html table cell

Question

I am creating a responsive table:

<h2>Workflows</h2>

    <table class="tablesaw" data-tablesaw-mode="columntoggle" data-tablesaw-minimap>
        <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-priority="1">Title</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-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="3">Due Date</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Button Status</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1">Created</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Description</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Modified</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Pedecessors</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Priority</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Related Items</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Start Date</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Task Group</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Created By</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Modified By</th>
                <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">% Complete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="title"><a href="#"></a></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

While appending specific inputs, I am cycling through the table cells with this script:

$(document).ready(function(){
$('table.tablesaw tbody tr').each(function(){
    $('tr td').each(function(){
        $('.title').append().html('<input type="text" />')
          .next().append().html('<input type="text" />')
          .next().append().html('<select><option></option><option></option><option></option></select>')
          .next().append().html('<select><option></option><option></option><option></option></select>')
          .next().append().html('<input type="datetime" value="Select Date" />')
          .next().append().html('<select><option></option><option></option><option></option></select>')
          .next().append().html('<input type="datetime" value="Select Date" />')
          .next().append().html('<input type="text" />')
          .next().append().html('<input type="datetime" value="Date" />')
          .next().append().html('<input type="text" />')
          .next().append().html('<select><option></option><option></option><option></option></select>')
          .next().append().html('<input type="text" />')
          .next().append().html('<input type="datetime" value="Date" />')
          .next().append().html('<input type="text" />')
          .next().append().html('<input type="text" />')
          .next().append().html('<input type="text" />')
          .next().append().html('<input type="range" />');
    });
});

});

My question: Is this essentially the most effective and efficient method to accomplish dynamically modifying the cells whenever table rows are added?

Answer 1

My proposal is:

$(function () {
  var rowTamplate = $('table.tablesaw tbody tr').eq(0);
  var rowContent = ['<input type="text" />','<input type="text" />','<select><option></option><option></option><option></option></select>',
                    '<select><option></option><option></option><option></option></select>', '<input type="datetime" value="Select Date" />',
                    '<select><option></option><option></option><option></option></select>', '<input type="datetime" value="Select Date" />',
                    '<input type="text" />', '<input type="datetime" value="Date" />', '<input type="text" />', '<select><option></option><option></option><option></option></select>',
                    '<input type="text" />', '<input type="datetime" value="Date" />', '<input type="text" />', '<input type="text" />', '<input type="text" />', '<input type="range" />'];
  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)');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Workflows</h2>

<table class="tablesaw" data-tablesaw-mode="columntoggle" data-tablesaw-minimap>
    <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-priority="1">Title</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-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="3">Due Date</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Button Status</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1">Created</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Description</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Modified</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Pedecessors</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Priority</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Related Items</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Start Date</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Task Group</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Created By</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Modified By</th>
        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">% Complete</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="title"><a href="#"></a></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="title"><a href="#"></a><input type="text" value="1"></td>
        <td><input type="text" value="1"></td>
        <td><select><option></option><option></option><option></option></select></td>
        <td><select><option></option><option></option><option></option></select></td>
        <td><input type="datetime" value="Select Date"></td>
        <td><select><option></option><option></option><option></option></select></td>
        <td><input type="datetime" value="Select Date"></td>
        <td><input type="text"></td>
        <td><input type="datetime" value="Date"></td>
        <td><input type="text"></td>
        <td><select><option></option><option></option><option></option></select></td>
        <td><input type="text"></td>
        <td><input type="datetime" value="Date"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="range"></td>
    </tr>
    <tr>
        <td class="title"><a href="#"></a><input type="text" value="2"></td>
        <td><input type="text" value="2"></td>
        <td><select><option></option><option></option><option></option></select></td>
        <td><select><option></option><option></option><option></option></select></td>
        <td><input type="datetime" value="Select Date"></td>
        <td><select><option></option><option></option><option></option></select></td>
        <td><input type="datetime" value="Select Date"></td>
        <td><input type="text"></td>
        <td><input type="datetime" value="Date"></td>
        <td><input type="text"></td>
        <td><select><option></option><option></option><option></option></select></td>
        <td><input type="text"></td>
        <td><input type="datetime" value="Date"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="range"></td>
    </tr>
    <tr>
        <td class="title"><a href="#"></a><input type="text" value="3"></td>
        <td><input type="text" value="3"></td>
        <td><select><option></option><option></option><option></option></select></td>
        <td><select><option></option><option></option><option></option></select></td>
        <td><input type="datetime" value="Select Date"></td>
        <td><select><option></option><option></option><option></option></select></td>
        <td><input type="datetime" value="Select Date"></td>
        <td><input type="text"></td>
        <td><input type="datetime" value="Date"></td>
        <td><input type="text"></td>
        <td><select><option></option><option></option><option></option></select></td>
        <td><input type="text"></td>
        <td><input type="datetime" value="Date"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="range"></td>
    </tr>
    </tbody>
</table>