Question

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

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

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

如何使用jquery添加行而无需编写所有<td> 追加方法中的<tr>？有没有简单的方法可以复制一行并使用默认值并在表格的最后一行之后添加？

Answer 1

使用4 1 4 2 3 5 1 4 2 -1 6 10 1 2 3 4 5 6 7 8 9 10 10 1 2 4 7 11 16 22 29 37 46 10 -1 -2 -4 -7 -11 -16 -22 -29 -37 -46 10 -1 -1 -4 -7 -11 -16 -22 -29 -37 -46 1 1 2 1 2 2 2 1 4 0 4 2 3 4 1 3 2 4 1 2 6 1 4 3 7 5 10 olly Not jolly Not jolly Jolly Jolly Not jolly Jolly Jolly Jolly Not jolly Not jolly Jolly Jolly和EJS最实用的方法是存储名为 default_row 的局部变量。它将包含此默认行（jQuery）内的所有td。喜欢。

tr

最后，你可以使用jQuery中的任何append函数。我建议你last().

聚苯乙烯。您应该使用 angular 框架。这个简单的任务在 angularjs 中变得容易。

Answer 2

我使用过 canJs 。使用canJs非常容易。首先，我将另一个 ejs 中的行部分分开，然后通过以下代码将其存储在变量中：

***

然后加入表体。

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

如何使用jquery动态地将行添加到ejs中的表？

2 个答案: