所以我编写了一些javascript / jquery来动态添加和删除字段集中的表行。我的函数适用于预先存在的表行（可以正确删除它们）。但是，在添加新表行之后，在删除预先存在的行之前，我无法删除新项目。我猜这与事件绑定在javascript / jquery中的工作方式有关（即，在触发事件并重新运行绑定之前，click函数未绑定到新元素）。但是，在我的广泛搜索中，我无法找到有关此问题的任何资源，因此不知道如何修复它。
请参阅以下jsfiddle（按'+'添加新表格行和' - '删除它）：
https://jsfiddle.net/znwL8x0j/
HTML：
<fieldset class="dedupe-rate">
<legend>Workloads</legend>
<table id="workloads">
<tr>
<th>
+/-
</th>
<th>
Name
</th>
<th>
Type
</th>
<th>
%
</th>
<th>
Ratio
</th>
</tr>
<tr id="workload-1">
<td class="remove-workload">
-
</td>
<td>
<input type="text" class="workload-name" id="name-w1" name="name-w1" value="Virtual Desktop" size="20">
</td>
<td>
<select class="workload-type" id="type-w1" name="type-w1">
<option value="VDI" selected>VDI</option>
<option value="VSI">VSI</option>
<option value="Email">Email</option>
<option value="Analytics">Analytics</option>
<option value="OLTP">OLTP</option>
<option value="DW">DW</option>
<option value="Compression">Compression</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<input type="text" class="workload-percent" id="percent-w1" name="percent-w1" value="25" size="1">%
</td>
<td>
<select class="workload-ratio" id="ratio-w1" name="ratio-w1">
<option value="7">7:1</option>
<option value="8">8:1</option>
<option value="9">9:1</option>
<option value="10" selected>10:1</option>
<option value="11">11:1</option>
<option value="12">12:1</option>
</select>
</td>
</tr>
<tr id="workload-2">
<td class="remove-workload">
-
</td>
<td>
<input type="text" class="workload-name" id="name-w2" name="name-w2" value="Virtual Server" size="20">
</td>
<td>
<select class="workload-type" id="type-w2" name="type-w2">
<option value="VDI">VDI</option>
<option value="VSI" selected>VSI</option>
<option value="Email">Email</option>
<option value="Analytics">Analytics</option>
<option value="OLTP">OLTP</option>
<option value="DW">DW</option>
<option value="Compression">Compression</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<input type="text" name="percent-w2" class="workload-percent" id="percent-w2" value="15" size="1">%
</td>
<td>
<select class="workload-ratio" id="ratio-w2" name="ratio-w2">
<option value="5">5:1</option>
<option value="6">6:1</option>
<option value="7" selected>7:1</option>
<option value="8">8:1</option>
</select>
</td>
</tr>
<tr id="workload-3">
<td class="remove-workload">
-
</td>
<td>
<input type="text" class="workload-name" id="name-w3" name="name-w3" value="Email" size="20">
</td>
<td>
<select class="workload-type" id="type-w3" name="type-w3">
<option value="VDI">VDI</option>
<option value="VSI">VSI</option>
<option value="Email" selected>Email</option>
<option value="Analytics">Analytics</option>
<option value="OLTP">OLTP</option>
<option value="DW">DW</option>
<option value="Compression">Compression</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<input type="text" name="percent-w3" class="workload-percent" id="percent-w3" value="15" size="1">%
</td>
<td>
<select class="workload-ratio" id="ratio-w3" name="ratio-w3">
<option value="4">4:1</option>
<option value="5" selected>5:1</option>
<option value="6">6:1</option>
</select>
</td>
</tr>
<tr id="workload-4">
<td class="remove-workload">
-
</td>
<td>
<input type="text" class="workload-name" id="name-w4" name="name-w4" value="Analytics" size="20">
</td>
<td>
<select class="workload-type" id="type-w4" name="type-w4">
<option value="VDI">VDI</option>
<option value="VSI">VSI</option>
<option value="Email">Email</option>
<option value="Analytics" selected>Analytics</option>
<option value="OLTP">OLTP</option>
<option value="DW">DW</option>
<option value="Compression">Compression</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<input type="text" name="percent-w4" class="workload-percent" id="percent-w4" value="15" size="1">%
</td>
<td>
<select class="workload-ratio" id="ratio-w4" name="ratio-w4">
<option value="3">3:1</option>
<option value="4" selected>4:1</option>
</select>
</td>
</tr>
<tr id="workload-5">
<td class="remove-workload">
-
</td>
<td>
<input type="text" class="workload-name" id="name-w5" name="name-w5" value="Online Transaction Processing" size="20">
</td>
<td>
<select class="workload-type" id="type-w5" name="type-w5">
<option value="VDI">VDI</option>
<option value="VSI">VSI</option>
<option value="Email">Email</option>
<option value="Analytics">Analytics</option>
<option value="OLTP" selected>OLTP</option>
<option value="DW">DW</option>
<option value="Compression">Compression</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<input type="text" name="percent-w5" class="workload-percent" id="percent-w5" value="10" size="1">%
</td>
<td>
<select class="workload-ratio" id="ratio-w5" name="ratio-w5">
<option value="3">3:1</option>
<option value="4" selected>4:1</option>
</select>
</td>
</tr>
<tr id="workload-6">
<td class="remove-workload">
-
</td>
<td>
<input type="text" class="workload-name" id="name-w6" name="name-w6" value="Data Warehousing" size="20">
</td>
<td>
<select class="workload-type" id="type-w6" name="type-w6">
<option value="VDI">VDI</option>
<option value="VSI">VSI</option>
<option value="Email">Email</option>
<option value="Analytics">Analytics</option>
<option value="OLTP">OLTP</option>
<option value="DW" selected>DW</option>
<option value="Compression">Compression</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<input type="text" name="percent-w6" class="workload-percent" id="percent-w6" value="10" size="1">%
</td>
<td>
<select class="workload-ratio" id="ratio-w6" name="ratio-w6">
<option value="2">2:1</option>
<option value="3" selected>3:1</option>
<option value="4">4:1</option>
</select>
</td>
</tr>
<tr id="workload-7">
<td class="remove-workload">
-
</td>
<td>
<input type="text" class="workload-name" id="name-w7" name="name-w7" value="Media Compression" size="20">
</td>
<td>
<select class="workload-type" id="type-w7" name="type-w7">
<option value="VDI">VDI</option>
<option value="VSI">VSI</option>
<option value="Email">Email</option>
<option value="Analytics">Analytics</option>
<option value="OLTP">OLTP</option>
<option value="DW">DW</option>
<option value="Compression" selected>Compression</option>
<option value="Other">Other</option>
</select>
</td>
<td>
<input type="text" name="percent-w7" class="workload-percent" id="percent-w7" value="5" size="1">%
</td>
<td>
<select class="workload-ratio" id="ratio-w7" class="ratio-w7">
<option value="1.2">1.2:1</option>
<option value="1.3">1.3:1</option>
<option value="1.4" selected>1.4:1</option>
<option value="1.5">1.5:1</option>
</select>
</td>
</tr>
<tr id="workload-8">
<td class="remove-workload">
-
</td>
<td>
<input type="text" class="workload-name" id="name-w8" name="name-w8" value="Other" size="20">
</td>
<td>
<select class="workload-type" id="type-w8" name="type-w8">
<option value="VDI">VDI</option>
<option value="VSI">VSI</option>
<option value="Email">Email</option>
<option value="Analytics">Analytics</option>
<option value="OLTP">OLTP</option>
<option value="DW">DW</option>
<option value="Compression">Compression</option>
<option value="Other" selected>Other</option>
</select>
</td>
<td>
<input type="text" name="percent-w8" class="workload-percent" id="percent-w8" value="5" size="1">%
</td>
<td>
<input type="text" class="workload-ratio" id="ratio-w8" name="ratio-w8" value="3" size="1" style="text-align: right">:1
</td>
</tr>
<tr id="add-workload">
<td class="add-workload">
+
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr class="totals">
<td></td>
<td></td>
<td>
Total:
</td>
<td>
<p id="total-percent"></p>
</td>
<td>
<p id="average-ratio"></p>
</td>
</tr>
</table>
</fieldset>
CSS
fieldset {
margin: 0 auto 20px;
}
.dedupe-rate {
width: 440px;
}
.add-workload, .remove-workload {
cursor: pointer;
color: #A8A8A8;
}
.add-workload:hover, .remove-workload:hover {
color: #000000;
font-weight: 800;
background-color: #A8A8A8;
}
的Javascript / jQuery的：
function workload_totals_update(toUpdate) {
var totalPercent = 0;
$(".workload-percent").each(function() {
totalPercent += parseInt($(this).val());
});
var averageRatio = 0;
$(".workload-ratio").each(function() {
averageRatio += parseInt($(this).val())*$(this).closest("tr").find(".workload-percent").val()*0.01;
});
$("#total-percent").text(totalPercent.toString() + "%");
if (totalPercent == 100) {
$("#total-percent").css("color", "#00AA00");
}
else {
$("#total-percent").css("color", "#FF0000");
}
$("#average-ratio").text(averageRatio.toFixed(2) + ":1");
}
$(document).ready(function(){
workload_totals_update();
$(".workload-ratio").bind("change", function(){workload_totals_update()});
$(".workload-ratio").bind("keyup", function(){workload_totals_update()});
$(".workload-percent").bind("keyup", function(){workload_totals_update()});
//Add/Remove Workloads
$(".remove-workload").click(function() {
var currRow = $(this).closest("tr");
var nextRow = $(this).closest("tr").next("tr");
while (nextRow.attr("id") != "add-workload") {
var prevName = currRow.find(".workload-name");
var nextName = nextRow.find(".workload-name");
prevName.attr("id", nextName.attr("id"));
prevName.attr("name", nextName.attr("name"));
prevName.val(nextName.val());
var prevType = currRow.find(".workload-type");
var nextType = nextRow.find(".workload-type");
prevType.attr("id", nextType.attr("id"));
prevType.attr("name", nextType.attr("name"));
prevType.val(nextType.val());
var prevPercent = currRow.find(".workload-percent");
var nextPercent = nextRow.find(".workload-percent");
prevPercent.attr("id", nextPercent.attr("id"));
prevPercent.attr("name", nextPercent.attr("name"));
prevPercent.val(nextPercent.val());
var prevRatio = currRow.find(".workload-ratio");
var nextRatio = nextRow.find(".workload-ratio");
prevRatio.attr("id", nextRatio.attr("id"));
prevRatio.attr("name", nextRatio.attr("name"));
prevRatio.val(nextRatio.val());
currRow = nextRow;
nextRow = nextRow.next("tr");
}
currRow.remove();
});
$(".add-workload").click(function() {
var workloadCount = $("#workloads tr").length - 7;
var workloadNum = "w" + (workloadCount + 1).toString();
var trId = "workload-" + (workloadCount+1).toString();
var name = "name-" + workloadNum;
var type = "type-" + workloadNum;
var percent = "percent-" + workloadNum;
var ratio = "ratio-" + workloadNum;
var removeWorkload = '<td class="remove-workload">-</td>'
var workloadName = '<td><input type="text" class="workload-name" id="'+name+'" name="'+name+'" value="Other" size="20"></td>';
var workloadType = '<td><select class="workload-type" id="'+type+'" name="'+type+'"><option value="VDI">VDI</option><option value="VSI">VSI</option><option value="Email">Email</option><option value="Analytics">Analytics</option><option value="OLTP">OLTP</option><option value="DW">DW</option><option value="Compression">Compression</option><option value="Other" selected>Other</option></select>';
var workloadPercent = '<td><input type="text" name="'+percent+'" class="workload-percent" id="'+percent+'" value="0" size="1">%</td>';
var workloadRatio = '<td><input type="text" class="workload-ratio" id="'+ratio+'" name="'+ratio+'" value="3" size="1" style="text-align: right">:1</td>';
$(this).closest("tr").prev("tr").after('<tr id="' + trId + '">' + removeWorkload + workloadName + workloadType + workloadPercent + workloadRatio + '</tr>');
});
});
答案 0 :(得分：4)
嗨哥哥试着改变：
$arr = [4,2,1,3];
usort($arr, function ($a, $b) {
return $a <=> $b;
});
通过：
$(".remove-workload").click(function() {
这应该有效。