我需要仅使用javascript更新html表中的特定单元格，如何定位此单元格？

因此，对于一个任务，我需要创建一个具有删除功能的工作购物车，如果购物车中已经有一篇文章，那么当再次添加时，它应该更新现有数据

例如，我有下面的购物车

名称：数量：价格：总计： 马铃薯1

此购物车已创建为表。因此，如果我从下拉列表中选择另一个土豆，它应该更新购物车中的当前土豆，使数量变为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();
    }
};

“严格使用”；
const btn=document.getElementById（'toevoegen'）；
const keuzeLijst=document.getElementById（'groente'）；
const aantalArt=document.getElementById（'aantal'）；
leesGroenten（）；
//中的leest de JSON文件
异步函数leesGroenten（）{
const response=wait fetch（“groenten.json”）
if（response.ok）{
const groenten=wait response.json（）；
控制台日志（groenten）；
verwerkGroenten（groenten）；
}否则{
日志（“oeps er INGINGINGIETS mis！”）；
}
};
//Verwerkt de JSON文件
功能verwerkGroenten（groenten）{
对于（groente的const groente）{
Voeggroenenteoanlijst（格罗恩特）；
}
};
//Voegt de JSON文件objecten toe aan de groente lijst
功能Voeggroenteoaanlijst（groente）{
让keuzeGroente=document.createElement（“选项”）；
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.eenhide}+'）；
基泽利杰斯特·阿佩奇尔德（基泽格洛恩特）；
}
btn.onclick=controleLijst；
函数controleLijst（）{
如果（aantalArt.value==''| | aantalArt.value<1）{
document.getElementById（'foutMelding'）。hidden=false；
}否则{
document.getElementById（'foutMelding'）。hidden=true；
const groenteNaam=keuzeLijst.options[keuzeLijst.selectedIndex].dataset.naam；
设gevondenListItem=vindListItemMetNaam（groenteNaam）；
if（gevondenListItem===null）{
Voeggroenteoeanmandje（groenteNaam）
}否则{
//尼特·格沃登·霍伊·塞伦·莫特·阿登
Voeggroenteoeanmandje（groenteNaam）
updateListItem（gevondenListItem）
}
}
}
//在阿蒂克尔和泽尔夫德·纳姆·阿利克尔的会面中，佐克特·多尔赫发挥了重要作用
//基兹街。
功能VindListeMetnaam（groenteNaam）{
const groenteNamen=document.queryselectoral（“tr”）；
对于（groenteNamen的const groente）{
如果（groente.id==groenteNaam）{
返回格罗恩特；
}
}
返回null；
}
//最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新最新
函数updateListItem（）{
控制台日志（“bestaal al”）；
}
//通过onderstaande代码，将控制文字输入到表格中
函数voeggroenteoaanmandje（）{
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=函数（）{
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>

格伦滕温克尔
贝斯特林
格罗恩特：
---maak uw keuze---
安塔尔：
托沃根·安曼杰
testknopje
格罗恩特
安塔尔
普里斯
特贝塔伦
福特！基斯·格伦特·恩安塔尔（第1分钟）。

我有一个函数，用于检查下拉列表中的选定项是否已出现在表中。但我不知道如何从表中调用特定的单元格来检查这一点

假设我选择土豆

然后我想检查我的表中是否已经有一个名为potato的项目，如果是，我想更新该项目的数量和总数

---

这可能吗？

因为您为

TR

设置了一个唯一的ID（我希望如此），所以您只需检查它是否存在，并在已经存在时更新它：

“严格使用”；
const btn=document.getElementById（'toevoegen'）；
const keuzeLijst=document.getElementById（'groente'）；
const aantalArt=document.getElementById（'aantal'）；
leesGroenten（）；
//中的leest de JSON文件
异步函数leesGroenten（）{
/*改变*/
//const response=wait fetch（“groenten.json”）
/*启动temporary.json*/
常数响应={
好的，没错，
json:async（）=>{
返回[{
纳姆：“纳姆一号”，
prijs：“prijs 1”，
伊恩海德：“伊恩海德1”
},
{
纳姆：“纳姆2号”，
prijs：“prijs 2”，
伊恩海德：“伊恩海德2”
}]
}
}
/*endtemporary.json*/
if（response.ok）{
const groenten=wait response.json（）；
控制台日志（groenten）；
verwerkGroenten（groenten）；
}否则{
console.log（“o