title: How to add dynamically a row to a table in the ejs using jquery?
body: <p>I have a table that i am rendering in the ejs template. Now in the template, i have a bootstrap nav tabs. In each tab there is a table which is being rendered in the ejs. Now there is <strong>Add</strong> button in the table head and if i click it, it will simply add a new row to the table. My template code for the tab content is:</p>
  
  <pre><code>&lt;div class="tab-content tab-content-bordered"&gt;
  
   &lt;%for(var i=0; i&lt;entityName.length;i++){%&gt;
     &lt;% if(entityName[i].entityType === "clientUpload"){ %&gt;
      &lt;div class="tab-pane attr-detail-&lt;%= entityName[i].displayName%&gt; fade &lt;% if (i === 0) { %&gt;in active&lt;% } %&gt;" id="&lt;%=entityName[i].displayName%&gt;"&gt;
          &lt;table class="table"&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Attribute Name&lt;/th&gt;
                  &lt;th&gt;Display Name&lt;/th&gt;
                  &lt;th&gt;Description&lt;/th&gt;
                  &lt;th&gt;Is Required?&lt;/th&gt;
                  &lt;th&gt;Allow Nulls?&lt;/th&gt;
                  &lt;th&gt;Data Type&lt;/th&gt;
                  &lt;th&gt;Length&lt;/th&gt;
                  &lt;th&gt;Precision&lt;/th&gt;
                  &lt;th&gt;Scale&lt;/th&gt;
                  &lt;th&gt;&lt;Button class="bt-add-row btn btn-primary"&gt;Add&lt;/Button&gt;&lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;% for(var j=0; j&lt;entityName[i].attributes.length;j++){%&gt;
                &lt;tr class="attr-row"&gt;
  
                    &lt;td&gt;
                    &lt;div class="form-group no-margin"&gt;
                        &lt;input class="form-control input-attr-name" type="text" name="attrName" size="8" placeholder="Attribute Name" value="&lt;%= entityName[i].attributes[j].name %&gt;" /&gt;
                    &lt;/div&gt;
                    &lt;/td&gt;
  
                    &lt;td&gt;
                        &lt;div class="form-group no-margin"&gt;
                            &lt;input class="form-control input-disp-name" type="text" name="dispName" size="8" placeholder="Display Name" value="&lt;%= entityName[i].attributes[j].displayName %&gt;" /&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
  
                    &lt;td&gt;
                        &lt;div class="form-group no-margin"&gt;
                            &lt;textarea class="form-control input-description expand" rows="1" cols="15" name="description" placeholder="Description" style="resize:none;overflow:hidden" onfocus="this.rows=3;this.style.overflow='auto'" onfocusout="this.rows=1;this.style.overflow='hidden';"&gt;&lt;%= entityName[i].attributes[j].description %&gt;&lt;/textarea&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
  
  
                    &lt;td&gt;
                        &lt;div class="form-group no-margin"&gt;
                            &lt;div class="form-control checkbox valign-middle no-border" style="display:table-cell"&gt;
                                &lt;label class="px-single"&gt;
                                    &lt;input type="checkbox" class="input-is-required px" &lt;% if(entityName[i].attributes[j].isRequired){%&gt; checked &lt;%}%&gt;/&gt;
                                    &lt;span class="lbl"&gt;&lt;/span&gt;
                                &lt;/label&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
  
  
                    &lt;td&gt;
                        &lt;div class="form-group no-margin"&gt;
                            &lt;div class="form-control checkbox valign-middle no-border" style="display:table-cell"&gt;
                                &lt;label class="px-single"&gt;
                                    &lt;input type="checkbox" class="input-allow-null px"&lt;% if (entityName[i].attributes[j].isRequired) { %&gt;disabled&lt;% } %&gt; &lt;% if (entityName[i].attributes[j].isNullable) { %&gt;checked&lt;% } %&gt; /&gt;
                                    &lt;span class="lbl"&gt;&lt;/span&gt;
                                &lt;/label&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
  
                    &lt;td&gt;
                        &lt;div class="form-group no-margin"&gt;
                            &lt;select class="selectpicker form-control select-attr-type" data-width="auto" data-container="#main-content"&gt;
                                &lt;% dataTypeList.each(function(dataType, index) { %&gt;
                                &lt;option value="&lt;%= dataType.name %&gt;" &lt;% if (dataType.name.toLowerCase() === entityName[i].attributes[j].attributeType) { %&gt;selected="selected"&lt;% } %&gt;&gt;&lt;%= dataType.name %&gt;&lt;/option&gt;
                                &lt;% }); %&gt;
                            &lt;/select&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
  
                &lt;td&gt;
  
                        &lt;div class="form-group no-margin" style="display: &lt;% if(entityName[i].attributes[j].attributeType.toLowerCase() !== "text") {%&gt;none&lt;%}%&gt; "&gt;
                            &lt;input type="text" name="length" size="5" placeholder="Length" value="&lt;%=entityName[i].attributes.length === undefined ? settings.DEFAULT_TEXT_LENGTH : entityName[i].attributes.length %&gt;"  class="form-control input-length"  /&gt;
                        &lt;/div&gt;
  
                 &lt;/td&gt;
  
                    &lt;td&gt;
  
                        &lt;div class="form-group no-margin" style="display:&lt;% if(entityName[i].attributes[j].attributeType.toLowerCase() !== "decimal") {%&gt;none&lt;%}%&gt;"&gt;
                            &lt;input type="text" name="precision" size="1" placeholder="Precision" value="&lt;%= entityName[i].attributes[j].precision === undefined ? settings.DEFAULT_DECIMAL_PRECISION : entityName[i].attributes[j].precision %&gt;"  class="form-control input-precision"/&gt;
                        &lt;/div&gt;
  
                    &lt;/td&gt;
  
                    &lt;td&gt;
  
                        &lt;div class="form-group no-margin" style="display:&lt;% if(entityName[i].attributes[j].attributeType.toLowerCase() !== "decimal") {%&gt;none&lt;%}%&gt;"&gt;
                            &lt;input type="text" name="scale" size="1" placeholder="Scale" value="&lt;%= entityName[i].attributes[j].scale === undefined ? settings.DEFAULT_DECIMAL_SCALE : entityName[i].attributes[j].scale %&gt;"  class="form-control input-scale" /&gt;
                        &lt;/div&gt;
  
                    &lt;/td&gt;
  
                    &lt;td&gt;
                        &lt;div class="form-group no-margin"&gt;
                            &lt;Button class="bt-remove-row btn"&gt;Remove&lt;/Button&gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
              &lt;%}%&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;%}%&gt;
      &lt;%}%&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here i just want to add a row to the table. But this time the default values will be there in the row and user will edit it.<br><br> How can i add a row using <code>jquery</code> without writing the all <code>&lt;td&gt;</code>s in the <code>&lt;tr&gt;</code> in the <strong>append</strong> method?? Is there any simple way to just copy a row and use default value and add after the last row in the table??</p>