0
我设计了一个html表格,其中表格行中的数据是动态生成的。在每个表格行tr
中,我设置了1个表格数据td
for html select tag和1个表格数据td
为html输入标签。所以我想插入选定的选项值到其相邻的输入字段。我还想保留删除功能来删除每个表格的行。如何在表中的动态输入字段中插入值,并删除表格行功能
这里是我的代码:
$(document).on('change', '#mySelect', function() {
if ($(this).val != 0) {
$('.amount').val($(this).val()); \t \t \t
} else {
$('.amount').val('');
}
});
$('#remScnt').live('click', function() {
if(i > 2) {
$(this).parent('tr').remove();
i--;
}
return false;
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
table, th, td {
border-collapse: collapse;
margin: 10px auto;
}
</style>
<script>
function addMore() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var x = document.getElementById("myTable").rows[1].cells;
cell1.innerHTML = x[0].innerHTML;
cell2.innerHTML = x[1].innerHTML;
}
function removeLast() {
document.getElementById("myTable").deleteRow(-1);
}
function removeRowNo() {
var index = document.getElementById('value').value
document.getElementById("myTable").deleteRow(index);
}
</script>
</head>
<body>
<form action="testlist.php" method="post">
<table id="myTable">
<tr>
<th>Items</th>
<th>Amount</th>
</tr>
<tr>
<td >
<a href="#" id="remScnt">Remove</a>
<select id="mySelect" name="DESCRP[]" >
<option disabled="" selected="">Select</option>
<option value="100">Item-1</option>
<option value="200">Item-2</option>
<option value="300">Item-3</option>
<option value="400">Item-4</option>
<option value="500">Item-5</option>
</select>
</td>
<td> <input type="text" class="amount" name="ALAMT[]"></td>
</tr>
</table>
<table>
<tr>
<td><input type="submit" /> </td>
</tr>
</table>
</form>
<br>
<table>
<tr>
<td><button onclick="addMore()">Add More</button></td>
<td><button onclick="removeLast()">Remove Last Row</button></td>
</tr>
<tr>
<td><input type="text" maxlength="3" name="value" id='value'></td>
<td><button onclick="removeRowNo()">Remove By Row No.</button></td>
</tr>
</table>
</body>
</html>
所以问题是所有输入正在服用相同的选项值。我认为这是由于缺乏每个输入标签的唯一性,因为我使用class
而不是id
。另外还有Remove
超链接没有working.please帮助。
感谢@Norlihazmey加扎利。也可以请'帮助我'删除'行。谢谢 – user5005768
查看更新的答案 –
谢谢你@Norlihazmey Ghazali.It工作。你能告诉我你为什么在Remove上使用'e.preventDefault();'吗? – user5005768