如何使用 jquery 向 ejs 中的 table 动态添加一行？

Question

我有一个 table 正在 ejs 模板中呈现。现在在模板中，我有一个 bootstrap 导航选项卡。在每个选项卡中都有一个 table 正在 ejs 中呈现。现在 table 头部有 Add 按钮，如果我单击它，它只会向 table 添加一个新行。我的标签内容模板代码是：

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

这里我只想在 table 中添加一行。但是这次默认值将存在于该行中，用户将对其进行编辑。

我如何使用 jquery 添加一行而不写入所有 <td>s在 <tr> 在 append 方法中？有什么简单的方法可以复制一行并使用默认值并在 table 的最后一行之后添加？？

Answer 1

使用EJS和jQuery最实用的方法是存储一个名为default_row的局部变量。它将包含此默认行 (tr) 内的所有 td。像。

var default_row = "<tr> <td> ... <\td> <\tr>"

您终于可以使用 jQuery 中的任何追加函数了。我建议你 last().

Ps。你应该使用 angular 框架。这个简单的任务在 angularjs 中变得容易。

Answer 2

我用过canJs。使用 canJs 非常容易。起初我在另一个 ejs 中分离出行部分，然后通过下面的代码将它存储在一个变量中：

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

然后加上table正文。

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

如何使用 jquery 向 ejs 中的 table 动态添加一行？

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

javascript

jquery

twitter-bootstrap

canjs