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

我在ejs模板中呈现了一个表。现在在模板中，我有一个引导导航选项卡。在每个选项卡中都有一个在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

添加行，而不在

中的append方法中写入

中的所有

？？有没有简单的方法可以复制一行并使用默认值并在表中的最后一行之后添加？？？

使用

EJS

和

jQuery

最实用的方法是存储一个名为default\u row的局部变量。它将包含此默认行（

tr

）内的所有

td

。喜欢

var default_row=“…”

最后，您可以使用jQuery中的任何附加函数。我建议你

---

请注意，您应该使用角度框架。这个简单的任务在angularjs中变得很容易

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

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

然后加上了表体

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

---

你试过了吗？没有。但我不需要再次给出它里面的内容吗？你可以使用最后一个函数来实现你的目标，你可以存储一个默认变量，其中有一行你想追加的内容，我不明白。我不需要在append方法中提供任何内容吗？？我不想在参数中给出整个s

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