如何使用javascript或html按鈕刪除選定的表格行？
[英]How to delete selected table row with javascript or html button?
問題描述
新手來了...
如何添加可以刪除特定表格行的函數？ 在最后幾個小時.. 我所能做的就是通過使用 table.deleteRow() 制作一個輸出結果，該結果不斷刪除所有行（不僅僅是 1 行。就像清除表中的所有輸入一樣），無論是通過創建html 按鈕並創建刪除功能。
有沒有辦法可以通過在突出顯示功能中選擇特定行來刪除它？
謝謝
var entryButton = document.getElementById('inputButton') const tbodyEl = document.querySelector("tbody"); var row = 1; entryButton.addEventListener('click', tableDisplay); function tableDisplay (e) { e.preventDefault() var name = document.getElementById('inputName').value; var amount = document.getElementById('inputAmount').value; var date = document.getElementById('inputDate').value; var remarks = document.getElementById('inputRemarks').value; if(!name || !amount || !date || !remarks) { alert("Please fill all the blanks") return; } var table = document.getElementById('displayTable'); var newRow = table.insertRow(row); var cell1 = newRow.insertCell(0); var cell2 = newRow.insertCell(1); var cell3 = newRow.insertCell(2); var cell4 = newRow.insertCell(3); cell1.innerHTML= name cell2.innerHTML= date cell3.innerHTML= amount cell4.innerHTML= remarks selectedRow() deselectedRow() row++; } //highlighting the row function selectedRow(){ var table = document.getElementById('displayTable'); for (var i=0;i < table.rows.length;i++){ table.rows[i].onclick= function () { if(!this.selected){ deselectedRow(); this.origColor=this.style.backgroundColor; this.style.backgroundColor='#90EE90'; this.selected = true; } else{ this.style.backgroundColor=this.origColor; this.selected = false; } } } } function deselectedRow(){ var table = document.getElementById('displayTable'); for (var i=0;i < table.rows.length;i++){ var row = table.rows[i]; row.style.backgroundColor=this.origColor; row.selected = false; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" ></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" /> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> <title>Expense Tracker </title> </head> <body> <h1 class="d-flex justify-content-center mb-5 mt-5">Expense Tracker V2</h1> <form class="form d-flex justify-content-center mb-5"> <span class="fw-bolder m-1" >Name: <input class="m-1" id="inputName" type="text" /></span> <span class="fw-bolder m-1" >Date: <input class="m-1" id="inputDate" type="date" /></span> <span class="fw-bolder m-1" >Amount: <input class="m-1" id="inputAmount" type="number" /></span> <span class="fw-bolder m-1" >Remarks <input class="m-1" id="inputRemarks" type="text" /></span> <button class="m-1" id="inputButton"> <i class="icon-level-down fs-4"></i> </button> <!-- How to delete specific row --> <button class="m-1" value="Delete Row" submit="delete"> <i class="icon-remove-sign fs-4"></i> </button> </form> <table class="table m-5" id="displayTable"> <thead> <tr> <th scope="col"> <i class="icon-file-text fw-bolder fs-3"></i> Description </th> <th scope="col"><i class="icon-calendar fw-bolder fs-3"></i> Date</th> <th scope="col"><i class="icon-usd fw-bolder fs-3"></i> Amount</th> <th scope="col"><i class="icon-pencil fs-3"></i> Remarks</th> </tr> </thead> <tbody></tbody> </table> <script src="script.js"></script> </body> </html>
2 個解決方案
解決方案1
2 已采納 2021-11-03 10:30:08
您可以使用以下代碼，我通過在所選行上設置類而不是背景顏色來更改您的代碼，然后在您的情況下 deselectedRow 是無用的。
那么發生了什么，單擊時我將添加到行selected-row類，如果再次單擊該類將被刪除，然后在“deleteSelection”按鈕上我添加了一個執行deleteSelections函數的單擊處理程序，它將刪除所有具有selected-row類selected-row 。
這是代碼：
var entryButton = document.getElementById('inputButton') const tbodyEl = document.querySelector("tbody"); var row = 1; entryButton.addEventListener('click', tableDisplay); function tableDisplay(e) { e.preventDefault() var name = document.getElementById('inputName').value; var amount = document.getElementById('inputAmount').value; var date = document.getElementById('inputDate').value; var remarks = document.getElementById('inputRemarks').value; if (!name || !amount || !date || !remarks) { alert("Please fill all the blanks") return; } var table = document.getElementById('displayTable'); var newRow = table.insertRow(row); var cell1 = newRow.insertCell(0); var cell2 = newRow.insertCell(1); var cell3 = newRow.insertCell(2); var cell4 = newRow.insertCell(3); cell1.innerHTML = name cell2.innerHTML = date cell3.innerHTML = amount cell4.innerHTML = remarks selectedRow() row++; } //highlighting the row document.getElementById('deleteSelection').addEventListener('click', deleteSelections); function deleteSelections() { let selectedRows = document.getElementsByClassName("selected-row "); while(selectedRows.length > 0){ selectedRows[0].parentNode.removeChild(selectedRows[0]); } } function selectedRow() { var table = document.getElementById('displayTable'); for (var i = 0; i < table.rows.length; i++) { if (i > 0) { table.rows[i].onclick = function() { if (!this.selected) { this.classList.add('selected-row') this.selected = true; } else { this.classList.remove('selected-row') this.selected = false; } } } } }
.selected-row { background-color: #90EE90; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" ></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" /> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> <title>Expense Tracker </title> </head> <body> <h1 class="d-flex justify-content-center mb-5 mt-5">Expense Tracker V2</h1> <form class="form d-flex justify-content-center mb-5"> <span class="fw-bolder m-1" >Name: <input class="m-1" id="inputName" type="text" /></span> <span class="fw-bolder m-1" >Date: <input class="m-1" id="inputDate" type="date" /></span> <span class="fw-bolder m-1" >Amount: <input class="m-1" id="inputAmount" type="number" /></span> <span class="fw-bolder m-1" >Remarks <input class="m-1" id="inputRemarks" type="text" /></span> <button class="m-1" id="inputButton"> <i class="icon-level-down fs-4"></i> </button> <!-- How to delete specific row --> <button class="m-1" value="Delete Row" submit="delete"> <i class="icon-remove-sign fs-4"></i> </button> <button type="button" id="deleteSelection"> Delete selected </button> </form> <table class="table m-5" id="displayTable"> <thead> <tr> <th scope="col"> <i class="icon-file-text fw-bolder fs-3"></i> Description </th> <th scope="col"><i class="icon-calendar fw-bolder fs-3"></i> Date</th> <th scope="col"><i class="icon-usd fw-bolder fs-3"></i> Amount</th> <th scope="col"><i class="icon-pencil fs-3"></i> Remarks</th> </tr> </thead> <tbody></tbody> </table> <script src="script.js"></script> </body> </html>
然后我在 selectedRow 中添加了i > 0以防止單擊表標題
解決方案2
1 2021-11-03 10:28:13
你可以這樣做：
- 選擇一條線時，將數據傳遞給輸入。
- 單擊刪除按鈕將激活將在表中搜索輸入數據並刪除該行的功能。
片段：
var entryButton = document.getElementById('inputButton') const tbodyEl = document.querySelector("tbody"); var row = 1; entryButton.addEventListener('click', tableDisplay); function tableDisplay (e) { e.preventDefault() var name = document.getElementById('inputName').value; var amount = document.getElementById('inputAmount').value; var date = document.getElementById('inputDate').value; var remarks = document.getElementById('inputRemarks').value; if(!name || !amount || !date || !remarks) { alert("Please fill all the blanks") return; } var table = document.getElementById('displayTable'); var newRow = table.insertRow(row); var cell1 = newRow.insertCell(0); var cell2 = newRow.insertCell(1); var cell3 = newRow.insertCell(2); var cell4 = newRow.insertCell(3); cell1.innerHTML= name cell2.innerHTML= date cell3.innerHTML= amount cell4.innerHTML= remarks selectedRow() deselectedRow() row++; } //highlighting the row function selectedRow(){ var table = document.getElementById('displayTable'); for (var i=0;i < table.rows.length;i++){ table.rows[i].onclick= function () { if(!this.selected){ deselectedRow(); this.origColor=this.style.backgroundColor; this.style.backgroundColor='#90EE90'; this.selected = true; // add the data of the selected row on inputs: document.querySelector('#inputName').value = this.querySelectorAll('td')[0].textContent; document.querySelector('#inputDate').value = this.querySelectorAll('td')[1].textContent; document.querySelector('#inputAmount').value = this.querySelectorAll('td')[2].textContent; document.querySelector('#inputRemarks').value = this.querySelectorAll('td')[3].textContent; } else{ this.style.backgroundColor=this.origColor; this.selected = false; } } } } function deselectedRow(){ var table = document.getElementById('displayTable'); for (var i=0;i < table.rows.length;i++){ var row = table.rows[i]; row.style.backgroundColor=this.origColor; row.selected = false; } } function deleteRow() { const tRows = document.querySelectorAll('#displayTable tr'); tRows.forEach(element => { if (element.querySelectorAll('td')[0] && ( element.querySelectorAll('td')[0].textContent === document.querySelector('#inputName').value && element.querySelectorAll('td')[1].textContent === document.querySelector('#inputDate').value && element.querySelectorAll('td')[0].textContent === document.querySelector('#inputName').value && element.querySelectorAll('td')[1].textContent === document.querySelector('#inputDate').value )) { element.remove(); } }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" ></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" /> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> <title>Expense Tracker </title> </head> <body> <h1 class="d-flex justify-content-center mb-5 mt-5">Expense Tracker V2</h1> <form class="form d-flex justify-content-center mb-5"> <span class="fw-bolder m-1" >Name: <input class="m-1" id="inputName" type="text" /></span> <span class="fw-bolder m-1" >Date: <input class="m-1" id="inputDate" type="date" /></span> <span class="fw-bolder m-1" >Amount: <input class="m-1" id="inputAmount" type="number" /></span> <span class="fw-bolder m-1" >Remarks <input class="m-1" id="inputRemarks" type="text" /></span> <button class="m-1" id="inputButton"> <i class="icon-level-down fs-4"></i> </button> <!-- How to delete specific row --> <button class="m-1" value="Delete Row" type="button" onclick="deleteRow();"> <i class="icon-remove-sign fs-4"></i> </button> </form> <table class="table m-5" id="displayTable"> <thead> <tr> <th scope="col"> <i class="icon-file-text fw-bolder fs-3"></i> Description </th> <th scope="col"><i class="icon-calendar fw-bolder fs-3"></i> Date</th> <th scope="col"><i class="icon-usd fw-bolder fs-3"></i> Amount</th> <th scope="col"><i class="icon-pencil fs-3"></i> Remarks</th> </tr> </thead> <tbody></tbody> </table> <script src="script.js"></script> </body> </html>
如何獲取選定的表行並在jquery/javascript中重寫單元格html
[英]How to get the selected table row and rewrite the cells html in jquery/javascript
單擊按鈕時如何刪除表格中的行？ 使用Javascript
[英]How to delete a row in the table when I click on a button? Using Javascript
如何使用 javaScript 在按鈕單擊時從表中刪除特定行
[英]how to delete specific row from table on button click using javaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.