使用循环在选择列表中动态更改ID

时间：2022-11-27 19:36:57

I currently have a form that can add new entries on click using javascript. However, I would like to change the id of each subsequent "add-on": e.g. The first tbody has an id of "participant1", but the next one will have an id of "participant2", the eighth "participant8", and so forth.

我目前有一个表单,可以使用javascript添加新的条目点击。但是,我想更改每个后续“附加组件”的ID:例如第一个tbody的id为“participant1”,但下一个t的id为“participant2”,第八个为“participant8”,依此类推。

Here is the main file:

这是主文件:

<body>    
    <form action="process" class="register" method="POST">
        <h1>Add Participants</h1>

        <fieldset class="row2">
            <legend>List of Participants</legend>
            <p> 
                <input type="button" value="Add Participant" onClick="addRow('dataTable')" /> 
                <input type="button" value="Clear Participants" onClick="deleteRow('dataTable')"  /> 
                <p>(All acions apply only to entries with check marked check boxes only.)</p>
            </p>
           <table id="dataTable" class="form" border="1">
              <tbody>
                <tr>
                  <p>
                    <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
                    <td>
                        <div>Participant: </div>
                        <select name="participant1" id="participant1">
                            <option>Person A</option>
                        <option>Person B</option>
                        <option>Person C</option>
                            </select>
                     </td>
          </p>
                </tr>
                </tbody>
            </table>
            <div class="clear"></div>
        </fieldset>


        <input class="submit" type="submit" value="Confirm &raquo;" />
        <div class="clear"></div>
    </form>

</body>

And here is the JS Function:

这是JS函数:

function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 50){                          
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i<colCount; i++) {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
}else{
     alert("More than 50 Participants? Are you sure?");

}
}

1 个解决方案

#1

HTML Code

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <title>test</title>
</head>
<body>  
      <form action="process" class="register" method="POST">
          <h1>Add Participants</h1>

          <fieldset class="row2">
              <legend>List of Participants</legend>
              <p> 
                  <input type="button" value="Add Participant" onClick="addRow('dataTable')" /> 
                  <input type="button" value="Clear Participants" onClick="deleteRow('dataTable')"  /> 
                  <p>(All acions apply only to entries with check marked check boxes only.)</p>
              </p>
             <table id="dataTable" class="form" border="1">
                <tbody>
                  <tr>
                    <p>
                      <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
                      <td>
                          <div>Participant: </div>
                          <select name="participant1" id="participant1">
                              <option>Person A</option>
                          <option>Person B</option>
                          <option>Person C</option>
                              </select>
                       </td>
            </p>
                  </tr>
                  </tbody>
              </table>
              <div class="clear"></div>
          </fieldset>


          <input class="submit" type="submit" value="Confirm &raquo;" />
          <div class="clear"></div>
      </form>

      <script>
      var j=1;
      function addRow(tableID) {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      if(rowCount < 50){                          
          var row = table.insertRow(rowCount);
          var colCount = table.rows[0].cells.length;
          for(var i=0; i<colCount; i++) {
              var newcell = row.insertCell(i);
              newcell.id="participant"+ j;
              newcell.innerHTML = table.rows[0].cells[i].innerHTML;
              j++;
          }
      }else{
           alert("More than 50 Participants? Are you sure?");

      }
      }

      </script>
</body>
</html>

#1

HTML Code

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <title>test</title>
</head>
<body>  
      <form action="process" class="register" method="POST">
          <h1>Add Participants</h1>

          <fieldset class="row2">
              <legend>List of Participants</legend>
              <p> 
                  <input type="button" value="Add Participant" onClick="addRow('dataTable')" /> 
                  <input type="button" value="Clear Participants" onClick="deleteRow('dataTable')"  /> 
                  <p>(All acions apply only to entries with check marked check boxes only.)</p>
              </p>
             <table id="dataTable" class="form" border="1">
                <tbody>
                  <tr>
                    <p>
                      <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
                      <td>
                          <div>Participant: </div>
                          <select name="participant1" id="participant1">
                              <option>Person A</option>
                          <option>Person B</option>
                          <option>Person C</option>
                              </select>
                       </td>
            </p>
                  </tr>
                  </tbody>
              </table>
              <div class="clear"></div>
          </fieldset>


          <input class="submit" type="submit" value="Confirm &raquo;" />
          <div class="clear"></div>
      </form>

      <script>
      var j=1;
      function addRow(tableID) {
      var table = document.getElementById(tableID);
      var rowCount = table.rows.length;
      if(rowCount < 50){                          
          var row = table.insertRow(rowCount);
          var colCount = table.rows[0].cells.length;
          for(var i=0; i<colCount; i++) {
              var newcell = row.insertCell(i);
              newcell.id="participant"+ j;
              newcell.innerHTML = table.rows[0].cells[i].innerHTML;
              j++;
          }
      }else{
           alert("More than 50 Participants? Are you sure?");

      }
      }

      </script>
</body>
</html>
标签：

相关文章