setu basak setu basak - 5 months ago 41
jQuery Question

How to add dynamically a row to a table in the ejs using jquery?

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 Add 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:

<div class="tab-content tab-content-bordered">

<%for(var i=0; i<entityName.length;i++){%>
<% if(entityName[i].entityType === "clientUpload"){ %>
<div class="tab-pane attr-detail-<%= entityName[i].displayName%> fade <% if (i === 0) { %>in active<% } %>" id="<%=entityName[i].displayName%>">
<table class="table">
<thead>
<tr>
<th>Attribute Name</th>
<th>Display Name</th>
<th>Description</th>
<th>Is Required?</th>
<th>Allow Nulls?</th>
<th>Data Type</th>
<th>Length</th>
<th>Precision</th>
<th>Scale</th>
<th><Button class="bt-add-row btn btn-primary">Add</Button></th>
</tr>
</thead>
<tbody>
<% for(var j=0; j<entityName[i].attributes.length;j++){%>
<tr class="attr-row">

<td>
<div class="form-group no-margin">
<input class="form-control input-attr-name" type="text" name="attrName" size="8" placeholder="Attribute Name" value="<%= entityName[i].attributes[j].name %>" />
</div>
</td>

<td>
<div class="form-group no-margin">
<input class="form-control input-disp-name" type="text" name="dispName" size="8" placeholder="Display Name" value="<%= entityName[i].attributes[j].displayName %>" />
</div>
</td>

<td>
<div class="form-group no-margin">
<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';"><%= entityName[i].attributes[j].description %></textarea>
</div>
</td>


<td>
<div class="form-group no-margin">
<div class="form-control checkbox valign-middle no-border" style="display:table-cell">
<label class="px-single">
<input type="checkbox" class="input-is-required px" <% if(entityName[i].attributes[j].isRequired){%> checked <%}%>/>
<span class="lbl"></span>
</label>
</div>
</div>
</td>


<td>
<div class="form-group no-margin">
<div class="form-control checkbox valign-middle no-border" style="display:table-cell">
<label class="px-single">
<input type="checkbox" class="input-allow-null px"<% if (entityName[i].attributes[j].isRequired) { %>disabled<% } %> <% if (entityName[i].attributes[j].isNullable) { %>checked<% } %> />
<span class="lbl"></span>
</label>
</div>
</div>
</td>

<td>
<div class="form-group no-margin">
<select class="selectpicker form-control select-attr-type" data-width="auto" data-container="#main-content">
<% dataTypeList.each(function(dataType, index) { %>
<option value="<%= dataType.name %>" <% if (dataType.name.toLowerCase() === entityName[i].attributes[j].attributeType) { %>selected="selected"<% } %>><%= dataType.name %></option>
<% }); %>
</select>
</div>
</td>

<td>

<div class="form-group no-margin" style="display: <% if(entityName[i].attributes[j].attributeType.toLowerCase() !== "text") {%>none<%}%> ">
<input type="text" name="length" size="5" placeholder="Length" value="<%=entityName[i].attributes.length === undefined ? settings.DEFAULT_TEXT_LENGTH : entityName[i].attributes.length %>" class="form-control input-length" />
</div>

</td>

<td>

<div class="form-group no-margin" style="display:<% if(entityName[i].attributes[j].attributeType.toLowerCase() !== "decimal") {%>none<%}%>">
<input type="text" name="precision" size="1" placeholder="Precision" value="<%= entityName[i].attributes[j].precision === undefined ? settings.DEFAULT_DECIMAL_PRECISION : entityName[i].attributes[j].precision %>" class="form-control input-precision"/>
</div>

</td>

<td>

<div class="form-group no-margin" style="display:<% if(entityName[i].attributes[j].attributeType.toLowerCase() !== "decimal") {%>none<%}%>">
<input type="text" name="scale" size="1" placeholder="Scale" value="<%= entityName[i].attributes[j].scale === undefined ? settings.DEFAULT_DECIMAL_SCALE : entityName[i].attributes[j].scale %>" class="form-control input-scale" />
</div>

</td>

<td>
<div class="form-group no-margin">
<Button class="bt-remove-row btn">Remove</Button>
</div>
</td>
</tr>
<%}%>
</tbody>
</table>
</div>
<%}%>
<%}%>
</div>


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.

How can i add a row using
jquery
without writing the all
<td>
s in the
<tr>
in the append method?? Is there any simple way to just copy a row and use default value and add after the last row in the table??

Answer

I have used canJs. It's very much easy using canJs. At first i seperated out the row part in another ejs and then store it in a variable by below code:

 var rowItem = can.view.render("templates/attr-tab-row.ejs",{});

And then added with the table body.

var table_body = $(el).closest('div').find('tbody');
table_body.append(rowItem);
Comments