我正在嘗試創建一個發票系統。我有以下代碼：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 關注
- 166 瀏覽
添加回答
舉報
0/150
提交
取消