新手來了...
如何添加可以洗掉特定表格行的函式?在最后幾個小時.. 我所能做的就是通過使用 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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/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>
uj5u.com熱心網友回復:
您可以使用以下代碼,我通過在所選行上設定類而不是背景顏色來更改您的代碼,然后在您的情況下 deselectedRow 是無用的。
那么發生了什么,單擊時我將添加到行selected-row類,如果再次單擊該類將被洗掉,然后在“deleteSelection”按鈕上我添加了一個執行該deleteSelections函式的單擊處理程式,它將洗掉所有帶有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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/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>
然后我添加i > 0了 selectedRow 以防止單擊表標題
uj5u.com熱心網友回復:
你可以這樣做:
- 選擇一條線時,將資料傳遞給輸入。
- 單擊洗掉按鈕將激活將在表中搜索輸入資料并洗掉該行的功能。
片段:
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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/346434.html
標籤:javascript html-table 数据表 排 删除行
