个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在编写这段代码。我希望为每一行启用删除和添加行。对于添加行按钮，我希望将行添加到所选行的正下方...有人知道该怎么做吗？如果有人可以提供帮助，我们将不胜感激。
<html>
<head>
<script src= 'http://code.jquery.com/jquery-2.1.1.min.js'></script>
<script>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var counter = $('#myTable tr').length - 2;
$("#ibtnDel").on("click", function () {
counter = -1
});
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="name' + counter + '"/></td>';
cols += '<td><input type="text" name="price' + counter + '"/></td>';
cols += '<td><input type="button" id="ibtnDel" value="Delete"></td>';
cols += '<td colspan="5" style="text-align: left;"><input type="button" id="addrow" value="Add Row" /></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("change", 'input[name^="price"]', function (event) {
calculateRow($(this).closest("tr"));
calculateGrandTotal();
});
$("table.order-list").on("click", "#ibtnDel", function (event) {
$(this).closest("tr").remove();
calculateGrandTotal();
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
</script>
</head>
<body>
<table id="myTable" class="order-list">
<thead>
<tr>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="name" />
</td>
<td>
<input type="text" name="price1" />
</td>
<td><input type="button" id="ibtnDel" value="Delete"></td>
<td colspan="5" style="text-align: left;">
<input type="button" id="addrow" value="Add Row" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="">Grand Total: $<span id="grandtotal"></span>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
最佳答案
您正在尝试创建 ids 并插入到 html DOM 中，它们是相似的，并尝试在 ids 上添加点击事件，这实际上是一个不好的做法并且违反了 HTML 规则!因此，我通过监听 class 并将 class 添加到每个按钮来更改您的点击事件，下面将是您的更改:
<强> DEMO HERE
$("#myTable").on("click",".addRow", function () {
var counter = $('#myTable tr').length - 2;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" name="name' + counter + '"/></td>';
cols += '<td><input type="text" name="price' + counter + '"/></td>';
cols += '<td><input type="button" id="ibtnDel" class="dele" value="Delete"></td>';
cols += '<td colspan="5" style="text-align: left;"><input type="button" class="addRow" value="Add Row" /></td>';
newRow.append(cols);
newRow.insertAfter($(this).parents().closest('tr'));
counter++;
});
$("#myTable").on("click",".dele", function () {
counter = -1
});
删除功能将是:
$("table.order-list").on("click", ".dele", function (event) {
$(this).closest("tr").remove();
calculateGrandTotal();
});
使用.insertAfter在单击的行之后插入。
关于Jquery 在所选行的正下方添加行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30192423/
24
4
0
我正在尝试用 Swift 编写这段 JavaScript 代码:k_combinations 到目前为止，我在 Swift 中有这个: import Foundation import Cocoa e
我是一名优秀的程序员,十分优秀！