Wstawienie obiektu do tabeli

Question

Witam, moim problemem jest to, że chciałbym wstawić dane z funkcji Pacjent() do tabeli, którą tworzy dynamicznie funkcja table(), ale moje próby kończą się niepowodzeniem ( tzn. dane o pacjencie mają być w tabeli ). Mógłby ktoś pomóc ?

<form method="POST" id="registration" onsubmit="event.preventDefault(); table(Pacjent());">
    <fieldset>
        <legend>Imie</legend>
        <input type="text" name="name" id="name">
    </fieldset>
    <br>
    <fieldset>
        <legend>Nazwisko</legend>
        <input type="text" name="surename" id="surename"><br>
    </fieldset>
    <br>
    <fieldset>
        <legend>Adres</legend>
        <input type="text" name="address" id="address"><br>
    </fieldset>
    <br>
    <fieldset>
        <legend>Wiek</legend>
        <input type="text" name="age" id="age"><br>
    </fieldset>
    <br>
    <fieldset>
        <legend>Przebyte Choroby</legend>
        <input type="text" name="sick" id="sick">
    </fieldset>
    <br>
    <fieldset>
        <input type="submit" value="Wyslij">
        <input type="reset" value="Kolejny">
    </fieldset>
    <br>
</form>
<div id="div"></div>
<script>
    var i = 0;

    function Pacjent() {
        i++;
        var name = document.getElementById("name").value;
        var surename = document.getElementById("surename").value;
        var address = document.getElementById("address").value;
        var age = document.getElementById("age").value;
        var diseases = document.getElementById("sick").value;

        const pacjent = {
            imie: name,
            nazwisko: surename,
            adres: address,
            wiek: age,
            choroby: diseases,
        }

        var jsonPacjent = JSON.stringify(pacjent);

        sessionStorage.setItem("pacjent" + i, jsonPacjent);

        var fromStorage = sessionStorage.getItem("pacjent" + i);

        fromStorage = JSON.parse(fromStorage);
        console.log(fromStorage);
    }

    function table() {
        var div = document.getElementById("div");
        var rows = 5;
        var columns = 5;
        const tab = document.createElement("table");
        tab.setAttribute("border", 1);
        for (var i = 1; i <= rows; i++) {
            var tr = document.createElement("tr");
            for (var j = 1; j <= columns; j++) {
                var td = document.createElement("td");
                td.setAttribute("id", "columns" + j);
                tr.appendChild(td);
            }
            tr.setAttribute("id", "rows" + i);
            tab.appendChild(tr);
        }
        div.appendChild(tab);
    }
</script>

 

Answer 1

Wewnątrz pętli z 71 linijki powinieneś do <td> wpisywać dane dotyczące konkretnego pacjenta - nie robisz tego, więc tworzona tabela jest pusta. Dla lepszej czytelności tabeli powinieneś też na początku stworzyć i wypełnić wiersz z nagłówkami opisującymi poszczególne kolumny - możesz to zrobić na podstawie kluczy obiektu pacjent - tylko musisz wtedy, albo listę kluczy umieścić w scope wyżej, albo jakoś przekazać do funkcji table.

Comments

A mógłbyś pokazać jak to wpisać, żeby działało?

---

Próbowałeś poprawić swój kod według moich wskazówek? Napisz, czego nie rozumiesz.

---

Nie potrafie wpisać tych wartości do tabeli.

---

Użyj textContent na zmiennej td wewnątrz pętli i przypisuj poszczególne propertisy z danego pacjenta, którego zapisałeś do Storage.