我设计了一个html表格，其中动态生成带有数据的表格行。在每个表格行tr中，我为html选择标签设置1个表格数据td和1用于 html 输入标记的表数据 td。所以我想将选定的选项值插入到其相邻的输入字段中。此外，我想保留删除功能来删除每个表行。
这是我的代码:
$(document).on('change', '#mySelect', function() {
if ($(this).val != 0) {
$('.amount').val($(this).val());
} 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 超链接不起作用。请帮助。
最佳答案
就像说的，您应该使用 class 而不是 id，并仔细查看我制作的更改事件处理程序，同样可以删除功能，请参阅以下代码:
$('#myTable').on('change', '.mySelect', function() {
// you can use .closest() to find
// particular input on same row with select
$(this).closest('tr').find('.amount').val($(this).val());
});
$('#myTable').on('click','.remScnt', function(e) {
e.preventDefault();
// find the tr element of remove link
// which is a parent
$(this).closest('tr').remove()
});<!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() {
var tableTr = document.getElementById("myTable").rows.length;
if ( tableTr > 1 )
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="#" class="remScnt">Remove</a>
<select class="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>关于javascript - 如何使用删除表行功能在表中的动态输入字段上插入值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35353684/