从表中动态创建的输入中获取值答案

【问题标题】：Getting the values from dynamicly created input(s) from a table从表中动态创建的输入中获取值
【发布时间】：2020-08-24 22:42:39
【问题描述】：

我有一张桌子

   <form id="project-form">
                    <table id="project-table" class="table table-striped table-inverse table-responsive">
                        <caption>Projects</caption>
                        <thead class="thead-inverse">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Project name</th>
                                <th scope="col">Description</th>
                                <th scope="col">Estimated time (min)</th>
                                <th scope="col">Actual time (min)</th>
                                <th scope="col">Add task</th>
                                <th scope="col">Delete project</th>
                            </tr>
                        </thead>
                        <tbody id="project-body">


                        </tbody>
                    </table>
                </form>

此表填充了来自 AJAX GET 请求的数据

function getProjects() {
  $.ajax({
    method: 'GET',
    dataType: 'json',
    data: {
      functionToCall: 'project',
    },
    url: 'http://localhost/WBS/php/api/requests/get.php',
    success: (response) => {
      $.each(response, function () {
        $.each(this, function (index, value) {
          $('#project-body').append(
            `
            <tr>
                <td>
                  <input class="form-control" type="hidden" name="projectid" id="projectid"  value="${value.projectid}">
                </td>
                <td>
                  <input class="form-control" type="text" name="projectName" id="projectName" value="${value.title}">
                </td>
                <td>
                  <input class="form-control" type="text" name="description" id="description"  value="${value.description}">
                </td>
                <td>
                  <input class="form-control" type="text" name="estimatedTime" id="estimatedTime"  value="${value.Estimated_time}">
                </td>
                <td>
                  <input class="form-control" type="text" name="actualTime" id="actualTime"  value="${value.Actual_time}">
                </td>
                <td>
                  <a id="addTask" class="btn btn-info" href="Overview.html?id=${value.projectid}" role="button">
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
                  </a>
                </td>
                <td>
                  <button type="button" id="deleteProject" name="deleteProject" class="btn btn-danger">
                    <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
                  </button>
                </td>
            </tr>

            `
          );
        });
      });
    },
    error: () => {
      console.error('Something went wrong with the getProjects function');
    },
  });
}

还可以选择动态地将新的输入行添加到表中

function addProject() {
  event.preventDefault();

  $('#project-body').append(

    `
        <tr>
            <td>
              <input class="form-control" type="hidden" name="projectid" id="projectid" >
            </td>
            <td>
              <input class="form-control" type="text" name="projectName" id="projectName">
            </td>
            <td>
              <input class="form-control" type="text" name="description" id="description">
            </td>
            <td>
              <input class="form-control" type="text" name="estimatedTime" id="estimatedTime">
            </td>
            <td>
              <input class="form-control" type="text" name="actualTime" id="actualTime">
            </td>
            <td>
              <a id="addTask" class="btn btn-info" href="Overview.php" role="button">
                <i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
              </a>
            </td>
            <td>
              <button type="button" id="deleteProject" name="deleteProject" class="btn btn-danger">
                <i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
              </button>
            </td>
        </tr>

        `
  );
}

我在此按钮上提交我的所有数据

<button id="saveProjects" form="project-form" class="btn btn-info" type="button"><i class="fa fa-angle-right" aria-hidden="true"></i> Save changes</button>

在准备好的文档中，我处理所有的 onclick 事件

$(document).ready(() => {

  $('#saveProjects').on('click', () => {
    uploadProjects();
  });

  $('#addProject').on('click', () => {
    addProject();
  });
});

在我的 PHP 方面，我有一个类来处理我所有的 POST 请求，在这个类内部是一个处理新项目上传的函数

    public function uploadProject()
    {
        try {
            $title = $_POST["projectName"];
            $description = $_POST["description"];
            $estimatedTime = $_POST["estimatedTime"];
            $actualTime = $_POST["actualTime"];

            $stm = $this->pdo->getCon();

            $PDOStatement = $stm->prepare("INSERT INTO projects (title,description,Estimated_time,Actual_time) VALUES(:title,:description,:Estimated_time,:Actual_time)");

            $PDOStatement->bindParam(':title', $title, PDO::PARAM_STR);
            $PDOStatement->bindParam(':description', $description, PDO::PARAM_STR);
            $PDOStatement->bindParam(':Estimated_time', $estimatedTime, PDO::PARAM_STR);
            $PDOStatement->bindParam(':Actual_time', $actualTime, PDO::PARAM_STR);

            $PDOStatement->execute();

            header('HTTP/1.1 200 OK');
        } catch (Exception  $th) {
            header("HTTP/1.0 404 Not Found");
            throw $th->getMessage();
        }
    }

现在调试我的PHP代码，我在POST数组中收到的所有数据都会一直对应表格的第一行，例如：

假设我的表中有一个现有行，其值为：项目名称 = Hello |描述 = World。

我点击添加项目按钮并在表中添加了一个新行，我在行内填写如下内容：项目名称 = Second table row |描述 = Second description。

在后端，我将始终收到 Hello 和 World 的值，而不是表格中最新添加的行的值。

我用谷歌搜索了一下，只看到了有关如何动态添加 SINGLE 的值而不是新行的示例。

【问题讨论】：

在 Jquery 中记住一件事。每当您添加元素或输入并且想要将它们全部放在后端时，您必须使用此[] 设置名称。例如name='description[]'。这样，您将始终在后端获得一个数组。

标签： javascript php html jquery

【解决方案1】：

我认为您可以将输入重命名为：

 name="projectid[]"

然后 PHP 将接收这些值的数组：

$total = count($_POST["projectid"]);
for ($i = 0; $i < $total; $i++) {
    $title = $_POST["projectName"][$i];
    $description = $_POST["description"][$i];
    $estimatedTime = $_POST["estimatedTime"][$i];
    $actualTime = $_POST["actualTime"][$i];

    // Your INSERT query is performed here
}

【讨论】：