jQuery：在静态和动态创建的表单行中抓取所有输入值，并将所有内容附加到页面

Question

我是一个相对较新的开发人员，现在已经坚持了好几天。因此，基本上，我正在制作一个营养追踪器应用程序（例如MyFitnessPal）。我有一个用于输入餐食的表格，每餐中有多个项目带有“添加行”按钮（例如，牛排，土豆和蒜蓉面包在输入表格中都是单独的行-每个都有自己的营养信息）。表单默认情况下仅包含一行（静态），但用户可以单击“添加行”按钮并在第一行下方创建动态行以添加更多项（每行获得一个新ID，每个输入字段获得一个新ID也是如此）。

所需结果：当用户单击“提交”时，应抓取每一行中的所有值，然后将其附加到表单下方的“膳食日志”卡中，并全部包含在“膳食”中。然后，该表格会自动清除并删除多余的动态行，使用户可以开始为餐2添加更多食品。

问题：我无法弄清楚如何获取多个动态创建的表单行及其动态创建的输入值。我尝试将ID和类添加到这些元素中，并且我认为我需要执行某种类型的for循环，但不确定如何做到这一点，并且无法解决这个问题。.目前，我可以获取输入值从第一行开始并追加它们，但它会忽略其他动态行。

请在下面查看我的代码：

$(document).ready(function() {

  // Submit button
  var count = 1;
  $("#submit").on("click", function(event) {

    event.preventDefault();

    var $header = $("<h5 class='text-left' style='font-weight: bold;'>Meal " + count++ + "</h5>");
    $("#meals").append($header);

    var food = $("#foodName").val().trim();
    var calories = $("#calories").val().trim();
    var protein = $("#protein").val().trim();
    var fat = $("#fat").val().trim();
    var carbs = $("#carbs").val().trim();

    var firstRow = {
      food: food,
      calories: calories,
      protein: protein,
      fat: fat,
      carbs: carbs
    };

    $("#meals").append("<tr class='row text-center'><td class='col-sm-3'>" + food + "</td><td class='col-sm-2'>" + calories + "</td><td class='col-sm-2'>" + protein + "</td><td class='col-sm-2'>" + fat + "</td><td class='col-sm-2'>" + carbs + "</td><br>");

    $("#foodName").val("");
    $("#calories").val("");
    $("#protein").val("");
    $("#fat").val("");
    $("#carbs").val("");

    $(".dynamic").val("");
    $(".dynamicRow").remove();

  });

  // database.ref().on("child_added", function (childSnapshot) {

  //     var name = childSnapshot.val().name;
  //     var dest = childSnapshot.val().dest;
  //     var fTrain = childSnapshot.val().fTrain;
  //     var freq = childSnapshot.val().freq;
  //     var freq = childSnapshot.val().freq;

  //     $("#table > tbody").prepend("<tr><td>" + name + "</td><td>" + dest + "</td><td>" + freq + "</td><td>" + nextTrain + "</td><td>" + minsToTrain + "</td></tr>");

  // });

  // Add Row Button
  var counter = 1;
  $("#addRow").on("click", function() {
    var newRow = $("<tr>");
    newRow.addClass("row dynamicRow");

    var cols = "";
    cols += '<td class="col-sm-3"><input type="text" class="form-control dynamic" id="foodName' + counter + '"/></td>';
    cols += '<td class="col-sm-2"><input type="text" class="form-control dynamic" id="calories' + counter + '"/></td>';
    cols += '<td class="col-sm-2"><input type="text" class="form-control dynamic" id="protein' + counter + '"/></td>';
    cols += '<td class="col-sm-2"><input type="text" class="form-control dynamic" id="fat' + counter + '"/></td>';
    cols += '<td class="col-sm-2"><input type="text" class="form-control dynamic" id="carbs' + counter + '"/></td>';
    cols += '<td class="col-sm-1 dynamic"><span id="clickFA"><i class="ibtnDel fas fa-trash-alt fa-2x trash"></span></td>';

    newRow.append(cols);
    $("#inputTable").append(newRow);
    counter++;
  });

  $("table.order-list").on("click", ".ibtnDel", function(event) {
    $(this).closest("tr").remove();
    counter -= 1;
  });

});

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  background: url('../styles/img/gravel.png');
}


/* Navbar */

#navbar {
  box-shadow: 0px 0px 4px 1px;
}

#brand {
  background: rgb(10, 177, 93);
  padding: 3px;
  border-radius: 3px;
  font-size: 30px;
}

#navBtn {
  background: black;
}

.nav-link {
  padding: 5px 0px 0px 0px;
}

#goalCard {
  margin: 40px 0px 40px 0px;
  box-shadow: 0px 0px 2px 1px;
  border: none;
}

#dailyGoal {
  font-weight: bold;
}

li {
  float: left;
  list-style: none;
}

#userForm {
  margin-bottom: 40px;
  width: 100%;
  box-shadow: 0px 0px 2px 1px;
  border: none;
}

.trash {
  cursor: pointer;
}

#mealLog {
  margin-bottom: 40px;
  box-shadow: 0px 0px 2px 1px;
  border: none;
}

#logHeader {
  font-weight: bold;
}

#title {
  z-index: 100;
  position: relative;
}

#submit {
  float: left;
}

#addRow {
  float: right;
}

#motto {
  font-size: 20px;
  font-style: italic;
}

#form {
  box-shadow: 0px 0px 4px 2px gray;
  border: none;
  margin-bottom: 10px;
}

#addMeal {
  font-weight: bold;
  font-size: 35px !important;
}


/* Footer */

.footer {
  /* position: relative; */
  /* position: relative; */
  /* width: 100%;
    height: 70px;
    bottom: 0;
    padding: 20px; */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  /* background-color: red; */
  color: white;
  text-align: center;
  margin-top: 50px;
}

#footerSpan {
  font-weight: bold;
  font-size: 18px;
}

@media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en-us">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BiteTracker</title>
  <!-- Bootstrap CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <!-- CSS -->
  <link rel="stylesheet" href="styles/styles.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <!-- Firebase JavaScript Link -->
  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>

</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="navbar">
    <div class="container">
      <a class="navbar-brand" href="index.html" id="brand"><i class="fas fa-cookie-bite"></i> BiteTracker</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="./index.html">Home
                            <span class="sr-only">(current)</span>
                        </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./profile.html">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./signin.html">Sign-Out</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./foodapi.html">RecipeSearch</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Site Body -->
  <div class="container">

    <!-- Remaining Card -->
    <div class="row">
      <div class="card col-sm-12" id="goalCard">
        <div class="card-body">
          <ul id="dailyGoal">
            <li class="col-sm-3">Your Daily Goal:</li>
            <li class="col-sm-2">Calories: 2000</li>
            <li class="col-sm-2">Protein: 100g</li>
            <li class="col-sm-2">Fat: 75g</li>
            <li class="col-sm-2">Carbs: 200g</li>
          </ul>
          <ul id="remaining">
            <li class="col-sm-3">Remaining:</li>
            <li class="col-sm-2">Calories: 1500</li>
            <li class="col-sm-2">Protein: 50g</li>
            <li class="col-sm-2">Fat: 20g</li>
            <li class="col-sm-2">Carbs: 50g</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- User Meal Submit -->
    <div class="row text-center">
      <div class="card bg-light text-dark" id="userForm">
        <div class="card-body">
          <h2 class="text-center" id="addMeal">Add Meal</h2>
          <table id="inputTable" class="table order-list">
            <thead>
              <tr class="row text-center">
                <td class="col-sm-3">Food</td>
                <td class="col-sm-2">Calories</td>
                <td class="col-sm-2">Protein (g)</td>
                <td class="col-sm-2">Fat (g)</td>
                <td class="col-sm-2">Carbs (g)</td>
                <td class="col-sm-1"></td>
              </tr>
            </thead>
            <tbody>
              <tr class="row" id="staticRow">
                <td class="col-sm-3">
                  <input type="text" id="foodName" name="foodName" class="form-control" />
                </td>
                <td class="col-sm-2">
                  <input type="text" id="calories" name="calories" class="form-control" />
                </td>
                <td class="col-sm-2">
                  <input type="text" id="protein" name="protein" class="form-control" />
                </td>
                <td class="col-sm-2">
                  <input type="text" id="fat" name="fat" class="form-control" />
                </td>
                <td class="col-sm-2">
                  <input type="text" id="carbs" name="carbs" class="form-control" />
                </td>
                <td class="col-sm-1"></td>
              </tr>
            </tbody>
          </table>
          <button type="submit" class="btn btn-primary" id="submit">Submit</button>
          <button type="button" class="btn btn-success" id="addRow" value="Add Row">Add
                        Row</button>
        </div>
      </div>
    </div>

    <!-- Meal Log -->
    <div class="row text-center">
      <div class="card col-sm-12 bg-light text-dark" id="mealLog">
        <div class="card-body">
          <h2 class="text-center" id="logHeader">Meal Log</h2>
          <table id="logTable" class="table order-list text-center">
            <thead>
              <tr class="row text-center">
                <td class="col-sm-3" id="foodEntry">Food</td>
                <td class="col-sm-2" id="caloriesEntry">Calories</td>
                <td class="col-sm-2" id="proteinEntry">Protein (g)</td>
                <td class="col-sm-2" id="fatEntry">Fat (g)</td>
                <td class="col-sm-2" id="carbsEntry">Carbs (g)</td>
              </tr>
            </thead>
            <tbody id="meals">
              <td></td>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="footer bg-dark text-light">
    <div class="col-sm-12 text-center">
      <span id="footerSpan">BiteTracker &copy; 2018</span>
    </div>
  </footer>

  <!-- JQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <!-- JavaScript -->
  <script src="../public/js/firebase.js"></script>
</body>

</html>

因此，如您所见，如果您运行代码，则添加第二行并将数据输入到两行的输入字段中，然后提交，则仅将第一行追加到“膳食1”下的“膳食日志”中。需要获取所有行（静态+所有动态行），然后附加。在这方面的任何帮助将不胜感激！

Answer 1

只需在行上添加一个类，然后在输入上添加类。 然后按类遍历所有行，并按类获取输入。 我添加了您可能要重命名的类。

$(document).ready(function() {

  // Submit button
  var count = 1;
  $("#submit").on("click", function(event) {

    event.preventDefault();

    var $header = $("<h5 class='text-left' style='font-weight: bold;'>Meal " + count++ + "</h5>");
    $("#meals").append($header);

    $(".food").each(function(index) {

      var food = $(this).find( ".a" ).val().trim();
      var calories = $(this).find( ".b" ).val().trim();
      var protein = $(this).find( ".c" ).val().trim();
      var fat = $(this).find( ".d" ).val().trim();
      var carbs = $(this).find( ".e" ).val().trim();

      var firstRow = {
        food: food,
        calories: calories,
        protein: protein,
        fat: fat,
        carbs: carbs
      };

      $("#meals").append("<tr class='row text-center'><td class='col-sm-3'>" + food + "</td><td class='col-sm-2'>" + calories + "</td><td class='col-sm-2'>" + protein + "</td><td class='col-sm-2'>" + fat + "</td><td class='col-sm-2'>" + carbs + "</td><br>");

    });

    $("#foodName").val("");
    $("#calories").val("");
    $("#protein").val("");
    $("#fat").val("");
    $("#carbs").val("");

    $(".dynamic").val("");
    $(".dynamicRow").remove();

  });

  // database.ref().on("child_added", function (childSnapshot) {

  //     var name = childSnapshot.val().name;
  //     var dest = childSnapshot.val().dest;
  //     var fTrain = childSnapshot.val().fTrain;
  //     var freq = childSnapshot.val().freq;
  //     var freq = childSnapshot.val().freq;

  //     $("#table > tbody").prepend("<tr><td>" + name + "</td><td>" + dest + "</td><td>" + freq + "</td><td>" + nextTrain + "</td><td>" + minsToTrain + "</td></tr>");

  // });

  // Add Row Button
  var counter = 1;
  $("#addRow").on("click", function() {
    var newRow = $("<tr>");
    newRow.addClass("row dynamicRow food");

    var cols = "";
    cols += '<td class="col-sm-3"><input type="text" class="form-control a dynamic" id="foodName' + counter + '"/></td>';
    cols += '<td class="col-sm-2"><input type="text" class="form-control b dynamic" id="calories' + counter + '"/></td>';
    cols += '<td class="col-sm-2"><input type="text" class="form-control c dynamic" id="protein' + counter + '"/></td>';
    cols += '<td class="col-sm-2"><input type="text" class="form-control d dynamic" id="fat' + counter + '"/></td>';
    cols += '<td class="col-sm-2"><input type="text" class="form-control e dynamic" id="carbs' + counter + '"/></td>';
    cols += '<td class="col-sm-1 dynamic"><span id="clickFA"><i class="ibtnDel fas fa-trash-alt fa-2x trash"></span></td>';

    newRow.append(cols);
    $("#inputTable").append(newRow);
    counter++;
  });

  $("table.order-list").on("click", ".ibtnDel", function(event) {
    $(this).closest("tr").remove();
    counter -= 1;
  });

});

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  background: url('../styles/img/gravel.png');
}


/* Navbar */

#navbar {
  box-shadow: 0px 0px 4px 1px;
}

#brand {
  background: rgb(10, 177, 93);
  padding: 3px;
  border-radius: 3px;
  font-size: 30px;
}

#navBtn {
  background: black;
}

.nav-link {
  padding: 5px 0px 0px 0px;
}

#goalCard {
  margin: 40px 0px 40px 0px;
  box-shadow: 0px 0px 2px 1px;
  border: none;
}

#dailyGoal {
  font-weight: bold;
}

li {
  float: left;
  list-style: none;
}

#userForm {
  margin-bottom: 40px;
  width: 100%;
  box-shadow: 0px 0px 2px 1px;
  border: none;
}

.trash {
  cursor: pointer;
}

#mealLog {
  margin-bottom: 40px;
  box-shadow: 0px 0px 2px 1px;
  border: none;
}

#logHeader {
  font-weight: bold;
}

#title {
  z-index: 100;
  position: relative;
}

#submit {
  float: left;
}

#addRow {
  float: right;
}

#motto {
  font-size: 20px;
  font-style: italic;
}

#form {
  box-shadow: 0px 0px 4px 2px gray;
  border: none;
  margin-bottom: 10px;
}

#addMeal {
  font-weight: bold;
  font-size: 35px !important;
}


/* Footer */

.footer {
  /* position: relative; */
  /* position: relative; */
  /* width: 100%;
    height: 70px;
    bottom: 0;
    padding: 20px; */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  /* background-color: red; */
  color: white;
  text-align: center;
  margin-top: 50px;
}

#footerSpan {
  font-weight: bold;
  font-size: 18px;
}

@media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en-us">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BiteTracker</title>
  <!-- Bootstrap CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <!-- CSS -->
  <link rel="stylesheet" href="styles/styles.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
  <!-- Firebase JavaScript Link -->
  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>

</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="navbar">
    <div class="container">
      <a class="navbar-brand" href="index.html" id="brand"><i class="fas fa-cookie-bite"></i> BiteTracker</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="./index.html">Home
                            <span class="sr-only">(current)</span>
                        </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./profile.html">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./signin.html">Sign-Out</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="./foodapi.html">RecipeSearch</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Site Body -->
  <div class="container">

    <!-- Remaining Card -->
    <div class="row">
      <div class="card col-sm-12" id="goalCard">
        <div class="card-body">
          <ul id="dailyGoal">
            <li class="col-sm-3">Your Daily Goal:</li>
            <li class="col-sm-2">Calories: 2000</li>
            <li class="col-sm-2">Protein: 100g</li>
            <li class="col-sm-2">Fat: 75g</li>
            <li class="col-sm-2">Carbs: 200g</li>
          </ul>
          <ul id="remaining">
            <li class="col-sm-3">Remaining:</li>
            <li class="col-sm-2">Calories: 1500</li>
            <li class="col-sm-2">Protein: 50g</li>
            <li class="col-sm-2">Fat: 20g</li>
            <li class="col-sm-2">Carbs: 50g</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- User Meal Submit -->
    <div class="row text-center">
      <div class="card bg-light text-dark" id="userForm">
        <div class="card-body">
          <h2 class="text-center" id="addMeal">Add Meal</h2>
          <table id="inputTable" class="table order-list">
            <thead>
              <tr class="row text-center">
                <td class="col-sm-3">Food</td>
                <td class="col-sm-2">Calories</td>
                <td class="col-sm-2">Protein (g)</td>
                <td class="col-sm-2">Fat (g)</td>
                <td class="col-sm-2">Carbs (g)</td>
                <td class="col-sm-1"></td>
              </tr>
            </thead>
            <tbody>
              <tr class="row food" id="staticRow">
                <td class="col-sm-3">
                  <input type="text" id="foodName" name="foodName" class="a form-control" />
                </td>
                <td class="col-sm-2">
                  <input type="text" id="calories" name="calories" class="b form-control" />
                </td>
                <td class="col-sm-2">
                  <input type="text" id="protein" name="protein" class="c form-control" />
                </td>
                <td class="col-sm-2">
                  <input type="text" id="fat" name="fat" class="d form-control" />
                </td>
                <td class="col-sm-2">
                  <input type="text" id="carbs" name="carbs" class="e form-control" />
                </td>
                <td class="col-sm-1"></td>
              </tr>
            </tbody>
          </table>
          <button type="submit" class="btn btn-primary" id="submit">Submit</button>
          <button type="button" class="btn btn-success" id="addRow" value="Add Row">Add
                        Row</button>
        </div>
      </div>
    </div>

    <!-- Meal Log -->
    <div class="row text-center">
      <div class="card col-sm-12 bg-light text-dark" id="mealLog">
        <div class="card-body">
          <h2 class="text-center" id="logHeader">Meal Log</h2>
          <table id="logTable" class="table order-list text-center">
            <thead>
              <tr class="row text-center">
                <td class="col-sm-3" id="foodEntry">Food</td>
                <td class="col-sm-2" id="caloriesEntry">Calories</td>
                <td class="col-sm-2" id="proteinEntry">Protein (g)</td>
                <td class="col-sm-2" id="fatEntry">Fat (g)</td>
                <td class="col-sm-2" id="carbsEntry">Carbs (g)</td>
              </tr>
            </thead>
            <tbody id="meals">
              <td></td>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="footer bg-dark text-light">
    <div class="col-sm-12 text-center">
      <span id="footerSpan">BiteTracker &copy; 2018</span>
    </div>
  </footer>

  <!-- JQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <!-- JavaScript -->
  <script src="../public/js/firebase.js"></script>
</body>

</html>

Answer 2

我立即看到的最大问题之一是，您动态创建的表单字段正在使用ID属性作为标识符而不是类。 ID属性在整个页面上应该是唯一的。

这里有一些小js更改的笔，希望能使您立足：https://codepen.io/anon/pen/pxQEdY

有问题的循环：

  $('.inputRow').each(function(i, row) {
      var food = $(row).find(".foodName").val().trim();
      var calories = $(row).find(".calories").val().trim();
      var protein = $(row).find(".protein").val().trim();
      var fat = $(row).find(".fat").val().trim();
      var carbs = $(row).find(".carbs").val().trim();

      $("#meals").append("<tr class='row text-center'><td class='col-sm-3'>" + food + "</td><td class='col-sm-2'>" + calories + "</td><td class='col-sm-2'>" + protein + "</td><td class='col-sm-2'>" + fat + "</td><td class='col-sm-2'>" + carbs + "</td><br>");
    });