时间戳

首页 > 解决方案 > 动态创建的输入表中的数据未传递到后端

javascript - 动态创建的输入表中的数据未传递到后端

问题描述

我正在尝试从后端的输入表（带有行添加选项）传递多个数据，以将它们保存在我的数据库中。在这里，我尝试使用Django和MongoDB。

我的前端JS和HTML代码是：

let i = 1;
function rowTemplate(i) {
  return `<tr data-index=${i}>
      <td>${i}</td>
      <td><input type="text" name="name-${i}"></td>
      <td><input type="text" name="roll-${i}"></td>
      <td><input type="email" name="email-${i}"></td>
      <td><input type="text" name="password-${i}"></td>
      <td><input type="text" name="address-${i}"></td>
      <td><i class="fa fa-times-circle" style="font-size: 22px; color: red;" onclick="removeRow(${i})"></i></td>
    </tr>`
}

for (i = 1; i <= 4; i ++) {
  $('.my_dynamic_table').append(rowTemplate(i));
}

function removeRow(i) {
  $(".my_dynamic_table").find(`tr[data-index='${i}']`).remove();
}

function addRow() {
  $('.my_dynamic_table').append(rowTemplate(i));
  i++;
}
<body>
  <div class="container my-5">
    <h2>Welcome to dynamic input table with row adding option</h2>

    <form class="" method="POST">
      {% csrf_token %}
      <table class="table table-hover my-5">
          <thead class="">
              <tr>
                  <th>No</th>
                  <th>Name</th>
                  <th>Roll</th>
                  <th>Email</th>
                  <th>Password</th>
                  <th>Address</th>
                  <th>Remove?</th>
              </tr>
          </thead>
          <tbody class="my_dynamic_table">
          </tbody>
        </table>
        <div class="row m-0">
          <button class="btn btn-warning" onclick="addRow()">Add row</button>
          <button type="Submit" class="btn btn-primary ml-auto">Submit</button>
        </div>
    </form>

  </div>
</body>
  
<head>
    <title></title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

    <!-- animated css link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>

    <!-- font awsome css link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- custom css link -->
    <link rel="stylesheet" type="text/css" href="#">

</head>

views.py现在我怎样才能在Django中编写我的来接收所有数据以将它们保存在数据库中？您也可以查看我的项目文件：链接。我试图避免使用ajax或其他复杂的东西。如果可以通过如下简单的方法完成，对我将非常有帮助：

def row_addable_table_view(request):
        if request.method == 'POST':
            this_name = request.POST['name']
            ...............

这里this_name = request.POST['name-1']可能只适用于第一列。但我需要所有这些。

标签： javascripthtmldjangomongodb

解决方案

推荐阅读