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

Question

我有一个 HTML table 和一些 jinja（在 value 属性内）。

我的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 图标（在最后一个 td 中）的功能？这里 Add row 函数将在 table 内添加一个新行，也带有 blank value 属性。

之前在下面练习过。但是现在问题是这里也添加了jinja。

如果你帮我解决这个问题，我将不胜感激。

Answer 1

您可以先 clone tr 每当 Add row 按钮被点击然后使用 find("input").val("") 清空 value 属性和 find("td:eq(0)").text(length)将新的 i 值添加到第一个 td 。现在，当单击 remove 时，只需使用 .closest('tr') 这将获得最接近的 tr 并删除该 tr 。此外，您需要在 td 中再次调整 i 值，因此请使用 .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="s@gmail.com"></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>

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

Add or Remove Row in Input Table Along With Some Available Jinja

javascript

python

django

jinja2