每次单击该按钮时,将根据用户输入添加表格行。我想知道如果用户犯了错误或改变了主意,是否有任何方法可以重置(撤消)添加表行操作。提前致谢
$('#add-row').click(function() {
var $tbody, $row, additionalRows;
var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);
if (isNaN(numNewRows) || numNewRows <= 0) {
alert('Please enter number of injection');
} else {
$tbody = $('table#one tbody ');
$row = $tbody.find('tr:last');
var lastRowIndex=($row.index()==-1? 0:$row.index()) +1 ;
additionalRows = new Array(numNewRows);
for(i=0;i<numNewRows;i++)
{
additionalRows[i]=` <tr>
<td>${lastRowIndex}</td>
<td>
<input type="text" style="width: 100px" name="vaccineid[]"></td>
<td><input type="text" style="width:160px"name="vaccinename1[]"> </td>
</tr>`
lastRowIndex=lastRowIndex+1;
}
$tbody.append(additionalRows.join());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">Add</button>
<button type="reset" name="reset" >Reset</button>
<table id="one">
<tbody>
</tbody>
</table>
最佳答案
您可以在单击重置按钮时使用 remove()
来删除添加的行。
$('#add-row').click(function() {
var $tbody, $row, additionalRows;
var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);
if (isNaN(numNewRows) || numNewRows <= 0) {
alert('Please enter number of injection');
} else {
$tbody = $('table#one tbody ');
$row = $tbody.find('tr:last');
var lastRowIndex=($row.index()==-1? 0:$row.index()) +1 ;
additionalRows = new Array(numNewRows);
for(i=0;i<numNewRows;i++)
{
additionalRows[i]=` <tr>
<td>${lastRowIndex}</td>
<td>
<input type="text" style="width: 100px" name="vaccineid[]"></td>
<td><input type="text" style="width:160px"name="vaccinename1[]"> </td>
</tr>`
lastRowIndex=lastRowIndex+1;
}
$tbody.append(additionalRows.join());
}
});
$('[name="reset"]').click(function() {
$('#one tr').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">Add</button>
<button type="reset" name="reset" >Reset</button>
<table id="one">
<tbody>
</tbody>
</table>
关于javascript - 重置(撤消)添加表行操作 JQUERY,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45071215/