我正在尝试创建一个发票系统。我有以下代码：function addRow() { var table = document.getElementById("invoiceTable"), rIndex, cIndex; for (var i = 0; i < table.rows.length; i++) { for (var j = 0; j < table.rows[i].cells.length; j++) { table.rows[i].cells[j].onclick = function() { rIndex = this.parentElement.rowIndex + 1; cIndex = this.cellindex + 1; document.getElementById("invoiceTable").insertRow(rIndex).innerHTML = `<tr> <td><div contenteditable></div></td> <td><div contenteditable></div></td> <td><div contenteditable></div></td> <td><div contenteditable></div></td> <td><div contenteditable></div></td> <td> <div> <button type="button" name="button" onclick="addRow()" style="background-color: Transparent; border: none; color: green;" > <i class="fas fa-plus-circle"></i> </button> </div> </td> </tr>`; } } }}<!-- Font Awesome CDN --><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><!-- Bootstrap CSS/CDN --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><main role="main"> <div class="container"> <div class="row"> <div class="col-md-12 mt-5"> <table class="table thead-dark table-hover border-bottom" id="invoiceTable">现在这工作正常，但在我单击按钮添加行后出现问题。单击按钮后，只需单击按钮所在的行即可添加另一行。此外，单击标题会在单击按钮后添加行。我很确定我需要告诉脚本停止做事，但就 JS 而言，我充其量是个新手，所以我不知道如何做。有任何想法吗？
2 回答
撒科打诨
TA贡献1934条经验 获得超2个赞
invoiceTableHTML 是相同的，但如果您愿意，可以删除id 。
JS：
function addRow() {
var tbody = document.querySelector("tbody")
tbody.innerHTML +=
'<tr>' +
'<td><div contenteditable></div></td>' +
'<td><div contenteditable></div></td>' +
'<td><div contenteditable></div></td>' +
'<td><div contenteditable></div></td>' +
'<td><div contenteditable></div></td>' +
'<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'; +
'</tr>';
}
因为我没有看到循环每个元素的意义，所以我只是直接扩展了新行。+ 按钮仍会在最后创建一行，但其他任何操作都不会。这是想要的吗？
泛舟湖上清波郎朗
TA贡献1818条经验 获得超3个赞
table.rows.length将选择所有内容rows，包括具有 的行th。相反，仅选择tbody trs.
function addRow() {
var table = document.querySelector("tbody"),
rIndex, cIndex;
for (var i = 0; i < table.rows.length; i++) {
// console.log(table.rows[i].cells);
for (var j = 0; j < table.rows[i].cells.length; j++) {
table.rows[i].cells[j].onclick = function() {
rIndex = this.parentElement.rowIndex + 1;
cIndex = this.cellindex + 1;
document.getElementById("invoiceTable").insertRow(rIndex).innerHTML = '' +
'<tr>' +
'<td><div contenteditable></div></td>' +
'<td><div contenteditable></div></td>' +
'<td><div contenteditable></div></td>' +
'<td><div contenteditable></div></td>' +
'<td><div contenteditable></div></td>' +
'<td><div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i class="fas fa-plus-circle"></i></button></div></td>'; +
'</tr>'
}
}
}
}
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<main role="main">
<div class="container">
<div class="row">
<div class="col-md-12 mt-5">
<table class="table thead-dark table-hover border-bottom" id="invoiceTable">
<thead>
<tr>
<th style="width: 10%">Item</th>
<th style="width: 50%">Description</th>
<th style="width: 5%">Qty</th>
<th style="width: 10%">Price</th>
<th style="width: 10%">Amount</th>
<th style=>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div contenteditable></div>
</td>
<td>
<div contenteditable></div>
</td>
<td>
<div contenteditable></div>
</td>
<td>
<div contenteditable></div>
</td>
<td>
<div contenteditable></div>
</td>
<td>
<div><button type="button" name="button" onclick="addRow()" style="background-color:Transparent; border:none; color:green;"><i
class="fas fa-plus-circle"></i></button></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
<!-- /role main -->
- 2 回答
- 0 关注
- 61 浏览
添加回答
举报
0/150
提交
取消