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>
如果设备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>
这是应该的,因为它应该谢谢。只有一个问题,有没有办法使它成为2位数字。那么它将是xxxxT-01,而下一行将是02等等? – elliottdan
@elliottdan完成 – rpadovani
非常感谢。 – elliottdan
是该单元ID总是与'XXXX-01','XXXX-02'格式? – rpadovani
是单位ID将始终为XXXX-01,依此类推。 – elliottdan