在输入表中添加或删除行以及一些可用的Jinja

debugcn 发表于 Dev

Kanchon Gharami

我有一个带有一些jinja（value属性内）的HTML表。

我的template：

<form class="" method="POST">
{% csrf_token %}
  <table class="table table-hover my-5">
    <thead class="">
        <tr>
            <th>No</th>
            <th>Name</th>
            <th>rank</th>
            <th>gmail</th>
            <th>Delete?</th>
        </tr>
    </thead>
    <tbody class="my_dynamic_table">
      {% for i in report_tableA %}
      <tr>
        <td>i</td>
        <td><input type="text" name="name" value="{{ i.name }}"></td>
        <td><input type="text" name="rank" value="{{ i.rank }}"></td>
        <td><input type="email" name="gmail" value="{{ i.gmail }}"></td>
        <td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <div class="row mx-5">
    <button class="btn btn-warning">Add row</button>
    <button type="Submit" class="btn btn-primary ml-auto">Submit</button>
  </div>
</form>

现在我的问题是如何实现Add row按钮和Delete图标（在last里面td）的功能？这里的Add row函数将在表内添加一个新行，并带有一个blank value属性。

我之前通过以下stackoverflow链接进行了练习。但现在的问题是在这里也添加了Jinja。

如果您能帮助我解决此问题，我将不胜感激。

斯瓦蒂

clone每当Add row单击按钮时，您都可以先tr，然后使用find("input").val("")来清空value属性并向firstfind("td:eq(0)").text(length)添加新i值td。现在，当单击remove时，只需使用.closest('tr')它将获得最接近的tr并将其删除。同样，您需要在i内部再次调整值，td以便使用.each循环遍历trs并更改它。

演示代码：

$(".add").on("click", function() {
  //get length of tr 
  var length = $(".my_dynamic_table tr").length + 1
  console.log(length)
  //clone first tr
  var cloned = $(".my_dynamic_table tr:first").clone();
  $(cloned).find("input").val(""); //empty values of all cloned inputs
  $(cloned).find("td:eq(0)").text(length); //add `i` value 
  $(cloned).appendTo($(".my_dynamic_table")) //append to tbody
})
//onclick of remove button
$(document).on("click", ".remove", function() {
  $(this).closest("tr").remove(); //remove tr
  //loop through tr
  $(".my_dynamic_table tr").each(function(i) {
    $(this).find("td:eq(0)").text((i + 1)) //change `i` value
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="" method="POST">
  <table class="table table-hover my-5">
    <thead class="">
      <tr>
        <th>No</th>
        <th>Name</th>
        <th>rank</th>
        <th>gmail</th>
        <th>Delete?</th>
      </tr>
    </thead>
    <tbody class="my_dynamic_table">
      <tr>
        <td>1</td>
        <td><input type="text" name="name" value="{{ i.name }}"></td>
        <td><input type="text" name="rank" value="{{ i.rank }}"></td>
        <td><input type="email" name="gmail" value="[email protected]"></td>
        <td><i class="fa fa-times-circle remove" style="font-size: 22px; color: red;">x</i></td>
      </tr>
    </tbody>
  </table>
  <div class="row mx-5">
    <button class="btn btn-warning add" type="button">Add row</button>
    <button type="Submit" class="btn btn-primary ml-auto">Submit</button>
  </div>
</form>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。