ejs动态表单具有所有相同的数据

Question

我正在学习 ejs，但我很难让某些东西正常工作。当用户单击修改时，我正在尝试填写表单，具体取决于它是哪一行，但表单显示所有相同的数据，我不知道为什么。

例如，如果我在表格的第二行单击“修改”，它应该采用第二行的内容并用数据填充表格。但它总是使用第一行数据填充它，无论我点击哪里. 这是代码：

<% if(data.length){ 
    for(var i = 0;i < data.length;i++) { %>
<tr>
  <td><%=data[i].ID%></td>
  <td><%=data[i].NOM%></td>
  <td><%=data[i].EMPLACEMENT%></td>
  <td><%=data[i].UTILITE%></td>
  <td><%=data[i].MARQUE%></td>
  <td><%=data[i].MODELE%></td>
  <td><%=data[i].NUMEROSERIE%></td>
  <td><%=data[i].PROCESSEUR%></td>
  <td><%=data[i].MEMOIRE%></td>
  <td><%=data[i].OS%></td>
  <td><%=data[i].CATEGORIE%></td>
  <td><%=data[i].VALEUR%></td>
  <td>
      <div class="container">

          <!-- Trigger the modal with a button -->
          <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>

          <!-- Modal -->
          <div class="modal fade" id="myModal1" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modifier serveur</h5>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                  <form name="form1m" action="/update" method="post">
                    <div class="form-group">
                        <label for="Inputm">ID</label>
                        <input type="text" class="form-control" id="Inputm5" placeholder="ID" name="<%=data[i].ID%>" value="<%=data[i].ID%>" readonly>
                      </div>
                    <div class="form-group">
                      <label for="Inputm">Nom</label>
                      <input type="text" class="form-control" id="Inputm" placeholder="Nom" name="<%=data[i].NOM%>" value="<%=data[i].NOM%>">
                    </div>
                    <div class="form-group">
                      <label for="Input2m">Emplacement</label>
                      <input type="text" class="form-control" id="Input2m" placeholder="Emplacement" name="EMPLACEMENT" value="<%=data[i].EMPLACEMENT%>">
                    </div>
                    <div class="form-group">
                      <label for="Input3m">Utilité</label>
                      <input type="text" class="form-control" id="Input3m" placeholder="Utilité" name="UTILITE" value="<%=data[i].UTILITE%>">
                    </div>
                    <div class="form-group">
                      <label for="Input4m">Marque</label>
                      <input type="text" class="form-control" id="Input4m" placeholder="Marque" name="MARQUE" value="<%=data[i].MARQUE%>">
                    </div>
                    <div class="form-group">
                      <label for="Input5m">Modèle</label>
                      <input type="text" class="form-control" id="Input5m" placeholder="Modèle" name="MODELE" value="<%=data[i].MODELE%>">
                    </div>
                    <div class="form-group">
                      <label for="Input6m">Numéro de série</label>
                      <input type="text" class="form-control" id="Input6m" placeholder="Numéro de série" name="NUMEROSERIE" value="<%=data[i].NUMEROSERIE%>">
                    </div>
                    <div class="form-group">
                      <label for="Input7m">Processeur</label>
                      <input type="text" class="form-control" id="Input7m" placeholder="Processeur" name="PROCESSEUR" value="<%=data[i].PROCESSEUR%>">
                    </div>
                    <div class="form-group">
                      <label for="Input8m">Mémoire</label>
                      <input type="text" class="form-control" id="Input8m" placeholder="Mémoire" name="MEMOIRE" value="<%=data[i].MEMOIRE%>">
                    </div>
                    <div class="form-group">
                      <label for="Input9m">OS</label>
                      <input type="text" class="form-control" id="Input9m" placeholder="OS" name="OS" value="<%=data[i].OS%>">
                    </div>
                    <div class="form-group">
                      <label for="Input10m">Catégorie</label>
                      <input type="text" class="form-control" id="Input10m" placeholder="Catégorie" name="CATEGORIE" value="<%=data[i].CATEGORIE%>">
                    </div>
                    <div class="form-group">
                      <label for="Input11m">Valeur</label>
                      <input type="text" class="form-control" id="Input11m" placeholder="Valeur" name="VALEUR" value="<%=data[i].VALEUR%>">
                    </div>
                    <input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
                  </form>
                </div>
                </div>
              </div>

            </div>
          </div>

数据如下所示：

数据不同，但是当我点击编辑时，它只显示第一行的数据。

这里是渲染的 HTML（对于我上一个屏幕截图中的两行）：

 <tr>
  <td>20</td>
  <td>test</td>
  <td>1</td>
  <td>S</td>
  <td>HP</td>
  <td>EWE</td>
  <td>DFERu</td>
  <td>weWE</td>
  <td>wesdf</td>
  <td>ESFDdddddddddddddddddddddddddddd</td>
  <td>Cdeqawed</td>
  <td>989</td>
  <td>
      <div class="container">

          <!-- Trigger the modal with a button -->
          <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>

          <!-- Modal -->

          <div class="modal fade" id="myModal1" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modifier serveur</h5>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                  <form name="form1m" action="/update" method="post">
                    <div class="form-group">
                        <label for="Inputm">ID</label>
                        <input type="text" class="form-control" id="Inputm5-7" placeholder="ID" name="ID" value="20" readonly>
                      </div>
                    <div class="form-group">
                      <label for="Inputm">Nom</label>
                      <input type="text" class="form-control" id="Inputm-7" placeholder="Nom" name="NOM" value="test">
                    </div>
                    <div class="form-group">
                      <label for="Input2m">Emplacement</label>
                      <input type="text" class="form-control" id="Input2m-7" placeholder="Emplacement" name="EMPLACEMENT" value="1">
                    </div>
                    <div class="form-group">
                      <label for="Input3m">Utilité</label>
                      <input type="text" class="form-control" id="Input3m-7" placeholder="Utilité" name="UTILITE" value="S">
                    </div>
                    <div class="form-group">
                      <label for="Input4m">Marque</label>
                      <input type="text" class="form-control" id="Input4m-7" placeholder="Marque" name="MARQUE" value="HP">
                    </div>
                    <div class="form-group">
                      <label for="Input5m">Modèle</label>
                      <input type="text" class="form-control" id="Input5m-7" placeholder="Modèle" name="MODELE" value="EWE">
                    </div>
                    <div class="form-group">
                      <label for="Input6m">Numéro de série</label>
                      <input type="text" class="form-control" id="Input6m-7" placeholder="Numéro de série" name="NUMEROSERIE" value="DFERu">
                    </div>
                    <div class="form-group">
                      <label for="Input7m">Processeur</label>
                      <input type="text" class="form-control" id="Input7m-7" placeholder="Processeur" name="PROCESSEUR" value="weWE">
                    </div>
                    <div class="form-group">
                      <label for="Input8m">Mémoire</label>
                      <input type="text" class="form-control" id="Input8m-7" placeholder="Mémoire" name="MEMOIRE" value="wesdf">
                    </div>
                    <div class="form-group">
                      <label for="Input9m">OS</label>
                      <input type="text" class="form-control" id="Input9m-7" placeholder="OS" name="OS" value="ESFDdddddddddddddddddddddddddddd">
                    </div>
                    <div class="form-group">
                      <label for="Input10m">Catégorie</label>
                      <input type="text" class="form-control" id="Input10m-7" placeholder="Catégorie" name="CATEGORIE" value="Cdeqawed">
                    </div>
                    <div class="form-group">
                      <label for="Input11m">Valeur</label>
                      <input type="text" class="form-control" id="Input11m-7" placeholder="Valeur" name="VALEUR" value="989">
                    </div>
                    <input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
                  </form>
                </div>
                </div>
              </div>

            </div>
          </div>





    <form name = form2 action="/delete" method="post">
      <input type="submit" name="20" value="Delete" class="btn btn-outline-danger" />
    </form>



    <!--20-->
    <!--<form action="/update" method="put">
      <input type="submit" name="20" value="Update" class="btn btn-outline-primary" />
    </form>
    <form action="" method="post">
      <input type="submit" name="Delete" value="Delete" class="btn btn-outline-danger" />
    </form>-->
  </td>
  <!--20-->
</tr>

<tr>
  <td>21</td>
  <td>r5y</td>
  <td>5ry</td>
  <td>r5y</td>
  <td>y5r</td>
  <td>w3</td>
  <td>ww3</td>
  <td>w3</td>
  <td>55</td>
  <td>6</td>
  <td>7</td>
  <td>677</td>
  <td>
      <div class="container">

          <!-- Trigger the modal with a button -->
          <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>

          <!-- Modal -->

          <div class="modal fade" id="myModal1" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modifier serveur</h5>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                  <form name="form1m" action="/update" method="post">
                    <div class="form-group">
                        <label for="Inputm">ID</label>
                        <input type="text" class="form-control" id="Inputm5-8" placeholder="ID" name="ID" value="21" readonly>
                      </div>
                    <div class="form-group">
                      <label for="Inputm">Nom</label>
                      <input type="text" class="form-control" id="Inputm-8" placeholder="Nom" name="NOM" value="r5y">
                    </div>
                    <div class="form-group">
                      <label for="Input2m">Emplacement</label>
                      <input type="text" class="form-control" id="Input2m-8" placeholder="Emplacement" name="EMPLACEMENT" value="5ry">
                    </div>
                    <div class="form-group">
                      <label for="Input3m">Utilité</label>
                      <input type="text" class="form-control" id="Input3m-8" placeholder="Utilité" name="UTILITE" value="r5y">
                    </div>
                    <div class="form-group">
                      <label for="Input4m">Marque</label>
                      <input type="text" class="form-control" id="Input4m-8" placeholder="Marque" name="MARQUE" value="y5r">
                    </div>
                    <div class="form-group">
                      <label for="Input5m">Modèle</label>
                      <input type="text" class="form-control" id="Input5m-8" placeholder="Modèle" name="MODELE" value="w3">
                    </div>
                    <div class="form-group">
                      <label for="Input6m">Numéro de série</label>
                      <input type="text" class="form-control" id="Input6m-8" placeholder="Numéro de série" name="NUMEROSERIE" value="ww3">
                    </div>
                    <div class="form-group">
                      <label for="Input7m">Processeur</label>
                      <input type="text" class="form-control" id="Input7m-8" placeholder="Processeur" name="PROCESSEUR" value="w3">
                    </div>
                    <div class="form-group">
                      <label for="Input8m">Mémoire</label>
                      <input type="text" class="form-control" id="Input8m-8" placeholder="Mémoire" name="MEMOIRE" value="55">
                    </div>
                    <div class="form-group">
                      <label for="Input9m">OS</label>
                      <input type="text" class="form-control" id="Input9m-8" placeholder="OS" name="OS" value="6">
                    </div>
                    <div class="form-group">
                      <label for="Input10m">Catégorie</label>
                      <input type="text" class="form-control" id="Input10m-8" placeholder="Catégorie" name="CATEGORIE" value="7">
                    </div>
                    <div class="form-group">
                      <label for="Input11m">Valeur</label>
                      <input type="text" class="form-control" id="Input11m-8" placeholder="Valeur" name="VALEUR" value="677">
                    </div>
                    <input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
                  </form>
                </div>
                </div>
              </div>

            </div>
          </div>

你能帮帮我吗？

谢谢

Answer 1

嗯，我的第一个赌注是，ids 必须是唯一的。 您是否尝试将id="Input2m" 替换为id="Input2m-<%=i%>"？ （即为其添加循环索引）。

Answer 2

我解决了我的问题，我修改了这些：

id="myModal1"
data-target="#myModal1"

到这里：

data-target="#myModal1-<%=i%>"
id="myModal1-<%=i%>"