Hej,
stworzyłem tabelę, do której można dodawać kolejne wiersze i wpisywać w nie dane produktów.
Chciałbym, żeby po dodaniu wiersza, tworzyła się również klasa, do której zostaną wysłane jako parametry te wpisane w dany wiersz - a które potem będę musiał zapisać w LocalStorage (ta część jeszcze niegotowa, bo utkwiłem po stworzeniu samej tabeli :p).
Czy da się to dorobić do tego, co jest, czy potrzebuję jakiegoś nowego, osobnego przycisku (coś w stylu ,,stwórz" gdy wszystkie dane już będą wpisane [bo nie stworzy się (chyba) klasy z pustego wiersza])?
Jak to zrobić dalej, mógłbym prosić o podpowiedzi?
(Próby stworzenia klasy wrzuciłem w komentarze).
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>tabela_produktów</title>
<style>
table { width: 70%; }
table, th, td { border: solid 1px #DDD;
border-collapse: collapse; padding: 2px 3px; text-align: center;
}
</style>
</head>
<body onload="startTable()">
<p>
<input type="button" id="addRow" value="Dodaj Wiersz" onclick="addRow()"/>
</p>
<div id="container"></div>
<p><input type="button" id="submitButton" value="Zapisz" onclick="submit()"/> </p>
<script>
var arrayHead = new Array();
arrayHead = ["", "Nazwa", "Kategoria(ID)", "Wartość", "Ilość na stanie", "Opis(opcjonalnie)"];
function startTable(){
var myTable = document.createElement('table');
myTable.setAttribute('id', 'myTable');
var tr = myTable.insertRow(-1);
for (i=0; i< arrayHead.length; i++){
let th = document.createElement('th');
th.innerHTML = arrayHead[i];
tr.appendChild(th);
}
var div = document.getElementById('container');
div.appendChild(myTable);
}
function addRow(){
var myTab = document.getElementById('myTable');
var rowAm = myTab.rows.length;
var tr = myTab.insertRow(rowAm);
tr = myTab.insertRow(rowAm);
for(a=0; a<arrayHead.length; a++){
let td = document.createElement('td');
td = tr.insertCell(a);
if(a==0){
var button = document.createElement('input');
button.setAttribute('type', 'button');
button.setAttribute('value', 'Usuń');
button.setAttribute('onclick', 'removeRow(this)');
td.appendChild(button);
}
else{
var element = document.createElement('input');
element.setAttribute('type', 'text');
element.setAttribute('value', '');
td.appendChild(element);
}
}
//prodClass(name, ID, prValue, amount, descript);
}
function removeRow(oButton){
var myTab = document.getElementById('myTable');
myTab.deleteRow(oButton.parentNode.parentNode.rowIndex);
}
function submit(){
var tab = document.getElementById('myTable');
var arrValues = new Array();
for (row=1; row<tab.rows.length -1; row++){
for(m=0; m<tab.rows[row].cells.length;m++){
var ele = tab.rows.item(row).cells[m];
if(ele.childNodes[0].getAttribute('type')=='text'){
arrValues.push("'" + ele.childNodes[0].value + "'");
}
}
}
console.log(arrValues);
}
/* class Product {
constructor (name, ID, prValue, amount, descript){
this.name = name;
this.ID = ID;
this.prValue = prValue;
this.amount = amount;
this.descript = descript;
}
}
function prodClass (){
const name = document.getElementById("myTable").rows[1].getElementsByTagName('td');
const ID = document.getElementById("myTable").rows[2].getElementsByTagName('td');
const prValue = document.getElementById("myTable").rows[3].getElementsByTagName('td');
const amount = document.getElementById("myTable").rows[4].getElementsByTagName('td');
const descript = document.getElementById("myTable").rows[5].getElementsByTagName('td');
const prodInstance = new Product(name, ID, prValue, amount, descript);
productArray.push(prodInstance);
}*/
</script>
</body>
</html>