Question

我有一个动态创建的表，有4个文本输入和1个下拉选择。当用户单击“添加”按钮时，会将上一行的克隆添加到表中。这应该是有效的。我要做的是将Unit ID输入增加1.例如，当单击添加按钮时，第一行是1111T-01我希望下一行Unit ID为1111T-02。谢谢。

HTML CODE

<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 CODE

            <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

Answer 1

如果单位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>

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

1 个答案: