JavaScript动态表上的单个文本框的增量值

我有一个动态创建的表格，包含4个文本输入和1个下拉选择。当用户单击添加按钮时，前一行的克隆将添加到表中。这是应该的。我想要做的是增加单位ID输入1.例如第一行是1111T-01，当单击添加按钮时我希望下一行单元ID为1111T-02。谢谢。JavaScript动态表上的单个文本框的增量值

HTML代码

<h2>Please fill in the information below</h2> 
     <form action="pmUnitCreate.php" method="post"> 
      <p>Click the Add button to add a new row. Click the Delete button to Delete ALL rows.</p> 

      <input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/> 
      <input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/> 



      <br> 

      <table id="myTable" class="form"> 

       <tr id="heading"> 
       <th><b><font size="4">Job Number</font></b></th> 
       <th><b><font size="4">Job Code</font></b></th> 
       <th><b><font size="4">Unit ID</font></b></th> 
       <th><b><font size="4">Model Number</font></b></th> 
       <th><b><font size="4">Scope</font></b></th> 
       </tr> 

       <tr id="tableRow"> 
        <td> 
         <input type="text" name="JobNumber[]" required> 
        </td> 

        <td> 
         <input type="text" name="JobCode[]" required> 
        </td> 

        <td> 
         <input type="text" name="UnitID[]" required> 
        </td> 

        <td> 
         <input type="text" name="ModelNumber[]" required> 
        </td> 

        <td> 
         <select id="Scope" name="Scope[]" required> 
          <option>100OA</option> 
          <option>BTank</option> 
          <option>WSEcon</option> 
          <option>NetPkg</option> 
          <option>CstmCtrl</option> 
          <option>CstmRef</option> 
          <option>CstmSM</option> 
          <option>CstmHV</option> 
          <option>CPCtrl</option> 
          <option>DesiHW</option> 
          <option>DigScroll</option> 
          <option>DFGas</option> 
          <option>DWall</option> 
          <option>MZ-DD</option> 
          <option>DPP</option> 
          <option>Encl</option> 
          <option>PlateHX</option> 
          <option>ERW</option> 
          <option>ERWModule</option> 
          <option>ERVMod</option> 
          <option>EvapBP</option> 
          <option>PreEvap</option> 
          <option>XP</option> 
          <option>Extend</option> 
          <option>FanWall</option> 
          <option>FillStat</option> 
          <option>FFilt</option> 
          <option>PFilt</option> 
          <option>CarbFilt</option> 
          <option>CustFilt</option> 
          <option>MGH(H)</option> 
          <option>GHeat</option> 
          <option>HighStatic</option> 
          <option>HGBP</option> 
          <option>HGRH</option> 
          <option>HPConv</option> 
          <option>GFHumid</option> 
          <option>TOHumid</option> 
         </select> 
        </td> 

       </tr> 


      </table>

JS代码

  <script> 

       function addRow() { 
        var row = document.getElementById("tableRow"); // find row to copy 
        var table = document.getElementById("myTable"); // find table to append to 
        var clone = row.cloneNode(true); // copy children too 
        //clone.id = "newID"; // change id or other attributes/contents 
        table.appendChild(clone); // add new row to end of table 
       } 


       function deleteRow() { 
        document.getElementById("myTable").deleteRow(-1); 
        } 

      </script>

jsfiddle

来源

2016-08-01 elliottdan

是该单元ID总是与'XXXX-01'，'XXXX-02'格式？ – rpadovani

是单位ID将始终为XXXX-01，依此类推。 – elliottdan

如果设备ID始终xxxx-1和X从来都不是-这应该做的工作。

如果x可以是-请告诉我，我会相应地更新答案。

function incrementUnitId(unitId) { 
 
    var arr = unitId.split('-'); 
 
    if (arr.length === 1) {return;} // The unit id is not valid; 
 
    var number = parseInt(arr[1]) + 1; 
 
    return arr[0] + '-' + (number < 10 ? 0 : '') + number; 
 
} 
 

 
function addRow() {     
 
    var row = document.getElementById("tableRow"); // find row to copy 
 
    var table = document.getElementById("myTable"); // find table to append to 
 
    var clone = row.cloneNode(true); // copy children too 
 
    row.id = "oldRow"; // We want to take the last value inserted 
 
    clone.cells[2].childNodes[1].value = incrementUnitId(clone.cells[2].childNodes[1].value) 
 
    table.appendChild(clone); // add new row to end of table 
 
} 
 

 

 
function deleteRow() { 
 
    document.getElementById("myTable").deleteRow(-1); 
 
}

<h2>Please fill in the information below</h2> 
 
     <form action="pmUnitCreate.php" method="post"> 
 
      <p>Click the Add button to add a new row. Click the Delete button to Delete ALL rows.</p> 
 

 
      <input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/> 
 
      <input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/> 
 

 

 

 
      <br> 
 

 
      <table id="myTable" class="form"> 
 

 
       <tr id="heading"> 
 
       <th><b><font size="4">Job Number</font></b></th> 
 
       <th><b><font size="4">Job Code</font></b></th> 
 
       <th><b><font size="4">Unit ID</font></b></th> 
 
       <th><b><font size="4">Model Number</font></b></th> 
 
       <th><b><font size="4">Scope</font></b></th> 
 
       </tr> 
 

 
       <tr id="tableRow"> 
 
        <td> 
 
         <input type="text" name="JobNumber[]" required> 
 
        </td> 
 

 
        <td> 
 
         <input type="text" name="JobCode[]" required> 
 
        </td> 
 

 
        <td> 
 
         <input type="text" name="UnitID[]" required> 
 
        </td> 
 

 
        <td> 
 
         <input type="text" name="ModelNumber[]" required> 
 
        </td> 
 

 
        <td> 
 
         <select id="Scope" name="Scope[]" required> 
 
          <option>100OA</option> 
 
          <option>BTank</option> 
 
          <option>WSEcon</option> 
 
          <option>NetPkg</option> 
 
          <option>CstmCtrl</option> 
 
          <option>CstmRef</option> 
 
          <option>CstmSM</option> 
 
          <option>CstmHV</option> 
 
          <option>CPCtrl</option> 
 
          <option>DesiHW</option> 
 
          <option>DigScroll</option> 
 
          <option>DFGas</option> 
 
          <option>DWall</option> 
 
          <option>MZ-DD</option> 
 
          <option>DPP</option> 
 
          <option>Encl</option> 
 
          <option>PlateHX</option> 
 
          <option>ERW</option> 
 
          <option>ERWModule</option> 
 
          <option>ERVMod</option> 
 
          <option>EvapBP</option> 
 
          <option>PreEvap</option> 
 
          <option>XP</option> 
 
          <option>Extend</option> 
 
          <option>FanWall</option> 
 
          <option>FillStat</option> 
 
          <option>FFilt</option> 
 
          <option>PFilt</option> 
 
          <option>CarbFilt</option> 
 
          <option>CustFilt</option> 
 
          <option>MGH(H)</option> 
 
          <option>GHeat</option> 
 
          <option>HighStatic</option> 
 
          <option>HGBP</option> 
 
          <option>HGRH</option> 
 
          <option>HPConv</option> 
 
          <option>GFHumid</option> 
 
          <option>TOHumid</option> 
 
         </select> 
 
        </td> 
 

 
       </tr> 
 

 

 
</table>

来源

2016-08-02 09:29:43 rpadovani

这是应该的，因为它应该谢谢。只有一个问题，有没有办法使它成为2位数字。那么它将是xxxxT-01，而下一行将是02等等？ – elliottdan

@elliottdan完成 – rpadovani

非常感谢。 – elliottdan

JavaScript动态表上的单个文本框的增量值

回答

相关问题