我设计了一个html表,其中包含数据的表行是动态生成的。在每个表行tr
中,我为html select标记和1个表数据{{1}设置了1个表数据td
对于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
超链接也不起作用。请帮助。
答案 0 :(得分:1)
如上所述,您应该使用INSERT INTO production.spend_fact (date, client_id, show_name,
network_name, media_type, spend, load_id, note)
SELECT date, client_id, show_name, network_name, media_type, spend,
l.load_id, note
FROM staging.spend_fact CROSS JOIN
(SELECT MAX(load_id) AS load_id
FROM production.load_dim
) l;
而不是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()
});