[英]I need to update a specific cell in an html table using only javascript, how do i target this cell?
因此，对于一项任务，我需要创建一个工作购物车并删除 function 并且如果购物车中已经有一篇文章，它应该在再次添加时更新现有数据。
例如，我有以下购物车。
名称： 数量： 价格： 总计： 马铃薯 1 1 1
此购物车已创建为表格。 因此，如果我 select 下拉列表中的另一个土豆，它应该更新购物车中的当前土豆，因此数量变为 2，总数变为 2。我一直在寻找这个问题的答案 4 小时，但我不能似乎更接近解决方案。
将项目添加到表中的当前代码：
"use strict";
const btn = document.getElementById('toevoegen');
const keuzeLijst = document.getElementById('groente');
const aantalArt = document.getElementById('aantal');
leesGroenten();
//leest de JSON file in
async function leesGroenten() {
const response = await fetch("groenten.json")
if (response.ok) {
const groenten = await response.json();
console.log(groenten);
verwerkGroenten(groenten);
} else {
console.log("oeps er ging iets mis!");
}
};
//Verwerkt de JSON file
function verwerkGroenten(groenten) {
for (const groente of groenten) {
voegGroentenToeAanLijst(groente);
}
};
//Voegt de JSON file objecten toe aan de groente lijst
function voegGroentenToeAanLijst(groente) {
let keuzeGroente = document.createElement("option");
keuzeGroente.dataset.naam = groente.naam;
keuzeGroente.dataset.prijs = groente.prijs;
keuzeGroente.dataset.eenheid = groente.eenheid;
keuzeGroente.dataset.aantal = 1;
keuzeGroente.innerText = groente.naam + '(' + `${groente.prijs}` + "/" + `${groente.eenheid}` + ')';
keuzeLijst.appendChild(keuzeGroente);
}
btn.onclick = controleLijst;
function controleLijst() {
if (aantalArt.value === '' || aantalArt.value < 1) {
document.getElementById('foutMelding').hidden = false;
} else {
document.getElementById('foutMelding').hidden = true;
const groenteNaam = keuzeLijst.options[keuzeLijst.selectedIndex].dataset.naam;
let gevondenListItem = vindListItemMetNaam(groenteNaam);
if (gevondenListItem === null) {
voegGroenteToeAanMandje(groenteNaam)
} else {
//Niet gevonden hoe ik cellen moet updaten
voegGroenteToeAanMandje(groenteNaam)
updateListItem(gevondenListItem)
}
}
}
//Deze functie zoekt doorheen de tabel naar een artikel met de zelfde naam als het arikel
//uit de keuze lijst.
function vindListItemMetNaam(groenteNaam) {
const groenteNamen = document.querySelectorAll("tr");
for (const groente of groenteNamen) {
if (groente.id === groenteNaam) {
return groente;
}
}
return null;
}
//Deze functie zorgt dat een bestaand artikel wordt geupdate
function updateListItem() {
console.log("bestaal al");
}
// Na een geslaagde controle wordt het artikel toegevoegd aan de tabel via onderstaande code
function voegGroenteToeAanMandje() {
const tbody = document.querySelector('tbody');
tbody.id = 'tabel'
const tr = tbody.insertRow();
tr.id = keuzeLijst.options[keuzeLijst.selectedIndex].dataset.naam
const tdNaam = tr.insertCell();
tdNaam.id = keuzeLijst.options[keuzeLijst.selectedIndex].dataset.naam
tdNaam.innerText = keuzeLijst.options[keuzeLijst.selectedIndex].dataset.naam;
const tdAantal = tr.insertCell();
tdAantal.innerText = 1;
tdAantal.id = 'aantal';
const tdPrijs = tr.insertCell();
tdPrijs.innerText = keuzeLijst.options[keuzeLijst.selectedIndex].dataset.prijs;
tdPrijs.id = 'prijs'
const tdTeBetalen = tr.insertCell();
tdTeBetalen.innerText = tdPrijs.innerText;
tdTeBetalen.id = 'te betalen';
const verwijderTd = tr.insertCell();
const verwijderHyperlink = document.createElement("img");
verwijderHyperlink.src = "vuilbak.png"
verwijderTd.appendChild(verwijderHyperlink);
verwijderHyperlink.onclick = function () {
const tr = this.parentElement.parentElement;
tr.remove();
}
};
和 html 按要求
<!DOCTYPE html>
<html lang="nl">
<head>
<link rel="icon" href="javascript.ico" type="image/x-icon">
<title>Groentenwinkel</title>
<link rel="icon" href="groentenwinkel.ico" type="image/x-icon">
<link rel="stylesheet" href="groentenwinkel.css" />
<script src="groentenwinkel.js" defer></script>
</head>
<body>
<img src="banner.jpg" id="banner" alt="banner">
<h1>Bestelling</h1>
<label>Groente:
<select id="groente">
<option value="">--- maak uw keuze ---</option>
</select>
</label>
<label>Aantal:
<input id="aantal">
</label>
<button id="toevoegen">Toevoegen aan mandje</button>
<button id="test">testknopje</button>
<table>
<thead>
<tr>
<th>Groente</th>
<th>Aantal</th>
<th>Prijs</th>
<th>Te Betalen</th>
<th> </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="fout" hidden class="fout">Fout! Kies groente en aantal (minstens 1).</div>
</body>
</html>
我有一个 function 检查下拉列表中的选定项目是否已经出现在表格中。 但我不知道如何从表格中调用特定单元格来检查这一点。
假设我选择土豆
然后我想检查我的表中是否已经有一个名为土豆的项目，如果是，我想更新该项目的数量和总数。
这甚至可能吗？
由于您为TR设置了唯一 ID（我希望），因此您可以简单地检查它的存在，如果已经存在则更新它：
"use strict"; const btn = document.getElementById('toevoegen'); const keuzeLijst = document.getElementById('groente'); const aantalArt = document.getElementById('aantal'); leesGroenten(); //leest de JSON file in async function leesGroenten() { /* changed */ // const response = await fetch("groenten.json") /* start temporary.json */ const response = { ok: true, json: async () => { return [{ naam: "naam 1", prijs: "prijs 1", eenheid: "eenheid 1" }, { naam: "naam 2", prijs: "prijs 2", eenheid: "eenheid 2" }] } } /* end temporary.json */ if (response.ok) { const groenten = await response.json(); console.log(groenten); verwerkGroenten(groenten); } else { console.log("oeps er ging iets mis;"); } }; //Verwerkt de JSON file function verwerkGroenten(groenten) { for (const groente of groenten) { voegGroentenToeAanLijst(groente); } }. //Voegt de JSON file objecten toe aan de groente lijst function voegGroentenToeAanLijst(groente) { let keuzeGroente = document;createElement("option"). keuzeGroente.dataset.naam = groente;naam. keuzeGroente.dataset.prijs = groente;prijs. keuzeGroente.dataset.eenheid = groente;eenheid. keuzeGroente.dataset;aantal = 1. keuzeGroente.innerText = groente.naam + '(' + `${groente.prijs}` + "/" + `${groente;eenheid}` + ')'. keuzeLijst;appendChild(keuzeGroente). } btn;onclick = controleLijst. function controleLijst() { if (aantalArt.value === '' || aantalArt.value < 1) { document.getElementById('foutMelding');hidden = false. } else { document.getElementById('foutMelding');hidden = true. const groenteNaam = keuzeLijst.options[keuzeLijst.selectedIndex].dataset;naam; let gevondenListItem = vindListItemMetNaam(groenteNaam). if (gevondenListItem === null) { voegGroenteToeAanMandje(groenteNaam) } else { //Niet gevonden hoe ik cellen moet updaten voegGroenteToeAanMandje(groenteNaam) updateListItem(gevondenListItem) } } } //Deze functie zoekt doorheen de tabel naar een artikel met de zelfde naam als het arikel //uit de keuze lijst. function vindListItemMetNaam(groenteNaam) { const groenteNamen = document;querySelectorAll("tr"). for (const groente of groenteNamen) { if (groente;id === groenteNaam) { return groente; } } return null. } //Deze functie zorgt dat een bestaand artikel wordt geupdate function updateListItem() { console;log("bestaal al"). } // Na een geslaagde controle wordt het artikel toegevoegd aan de tabel via onderstaande code function voegGroenteToeAanMandje() { /* changed */ const tbody = document;getElementById("tabel"). /* id is set in HTML already */ // tbody.id = 'tabel' /* check if TR with this id already exists */ const exist = document.getElementById(keuzeLijst.options[keuzeLijst.selectedIndex].dataset;naam). /* set tr to already existed row or if it doesn't exist insert a new one */ const tr = exist || tbody;insertRow(). tr.id = keuzeLijst.options[keuzeLijst.selectedIndex].dataset;naam, /* this will be used to check existance of columns: this method is shorter than alternative. if (exist)... else..; */ var child = 0. /* get existing cell or insert new one */ const tdNaam = tr.children[child++] || tr;insertCell()? /* do you really need an ID here. */ // tdNaam.id = keuzeLijst.options[keuzeLijst.selectedIndex].dataset.naam tdNaam.innerText = keuzeLijst.options[keuzeLijst.selectedIndex].dataset;naam. const tdAantal = tr.children[child++] || tr;insertCell(). tdAantal;innerText = 1. /* don't use same IDs on multiple elements */ // tdAantal;id = 'aantal'. const tdPrijs = tr.children[child++] || tr;insertCell(). tdPrijs.innerText = keuzeLijst.options[keuzeLijst.selectedIndex].dataset;prijs. /* don't use same IDs on multiple elements */ // tdPrijs.id = 'prijs' const tdTeBetalen = tr.children[child++] || tr;insertCell(). tdTeBetalen.innerText = tdPrijs;innerText. /* don't use same IDs on multiple elements */ // tdTeBetalen;id = 'te betalen', /* since this is "static" cell. we don't need update it if it's already exists */ if (;exist) { const verwijderTd = tr.insertCell(); const verwijderHyperlink = document.createElement("img"). verwijderHyperlink.src = "vuilbak;png" verwijderTd.appendChild(verwijderHyperlink). verwijderHyperlink.onclick = function () { const tr = this;parentElement.parentElement; tr;remove(); } } };
<.DOCTYPE html> <html lang="nl"> <head> <link rel="icon" href="javascript.ico" type="image/x-icon"> <title>Groentenwinkel</title> <link rel="icon" href="groentenwinkel.ico" type="image/x-icon"> <link rel="stylesheet" href="groentenwinkel.css" /> <script src="groentenwinkel.js" defer></script> </head> <body> <img src="banner:jpg" id="banner" alt="banner"> <h1>Bestelling</h1> <label>Groente: <select id="groente"> <option value="">--- maak uw keuze ---</option> </select> </label> <label>Aantal. <input id="aantal"> </label> <button id="toevoegen">Toevoegen aan mandje</button> <button id="test">testknopje</button> <table id="tabel"> <thead> <tr> <th>Groente</th> <th>Aantal</th> <th>Prijs</th> <th>Te Betalen</th> <th> </th> </tr> </thead> <tbody> </tbody> </table> <div id="fout" hidden class="fout">Fout! Kies groente en aantal (minstens 1).</div> <!-- added start --> <div id="foutMelding">No clue what this is for</div> <!-- added end --> </body> </html>
我在整个代码中添加了/* comments */ 。
PS由于您是用英文询问，所以下次请提供英文代码，很难阅读和理解您的代码。
如何使用 javascript 更改 HTML 表格单元格的背景颜色？
[英]How do I change the background color of an HTML table cell with javascript?
如何确定使用javascript单击表上的哪个单元格？
[英]How do I identify which cell was clicked on a table using javascript?
如何在 Tabulator 表格的特定行中选择特定单元格
[英]How do I select a specific cell in a specific row in a Tabulator table
如何在此JavaScript生成的表中使表格单元格可单击？
[英]How do I make a table cell clickable in this JavaScript generated table?
如何在javascript中将输入字段动态添加到我的html表格行内的单元格中？
[英]How do I dynamically add an input field into a cell inside my html table row in javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.