Stwórz sobie obiekt powiedzmy, nazwijmy go Entity:
public class Entity{
constructor(nameProduct,stockProduct,prize){
this.name = nameProduct;
this.stockProduct = stockProduct;
this.prize = prize;
}
}
On będzie przechowywał produkty. Następnie koło tworzenia elementu, dodaj obiekt ProductRepository. W nim będą dokonywane obliczenia.
public class ProductRepository {
{
this.DOMList = querySelector("[data-rowList"];
this.productList = new Array();
}
insert(){
this.DOMList.forEach( (node) => {
var name = node.item(0).value;
itd...
var Product = (name,stock, itd...);
});
}
update(){
this.DomList.forEach((node) =>{
var name = node.item(0).value;
itd...
var productGettingList = this.productList.get(new Number(node.dataset.rowList));
product.setName(name)
itd...
});
}
}
Nasz productCalculator pobiera listę węzłów (z poziomu tr), które pasują do wzorca(szukanego atrybutu) data-rowList, choć dla lepszego działania(czytelności) wypadałoby by zbudować faktorkę, a calculator otrzymuje gotowy Produkt z tej fraktorki. Następnie uruchamiam foreach na kolekcji , z każdego węzła pytam o ich kolejne węzły (dzieci) , można by tu użyć również nextSibling, musiałbym stworzyć kolejną pętle do iteracji po nim. Następnie pobieram wartość pakuje do jakieś zmiennej (w sumie może to być obiekt Produkt ale tu wypadałoby zmienić konstruktor, w js-ie nie da się overload konstruktora, da się przeciążyć obiekt ,po prostu tworząc kolejny prototyp, ale nie o to nam chodzi) , na koniec pakuje do obiektu a następnie go do tablicy. Done.
Gdy następuje zdarzenie click, uruchamia się metoda update i updatuje po kolei wynika (dla zwiększenia wydajności wypadałoby powiedzieć naszemu API, co się właściwie zaktualizowało sprawdzajać zdarzenie focus na kontrolkach).
Pobieram listę znowu , pobieram obiekt z tablicy. i podmieniam wartości używając getter/setter. KONIEC.
Trochę to skomplikowane, ale myśle sobie poradzisz. Znajdziesz pewnie odpowiedniki z jq.