Dodawanie do tabeli wierszy wraz z kolumnami z zwartością pól edycji

0

Hejka!
Mam pytanko - napisałam kod HTML zawierający 4 pola edycji, przycisk oraz tabelę z 3 kolumnami. Zasada działania powinna być taka, że po kliknięciu na przycisk, do tabeli dodawany jest wiersz z kolejnymi trzema kolumnami a w nich zawartość pól od id sklad1, sklad2 i sklad3. Problem w tym że o ile wiem jak dodawac za pomocą JS nowy wiersz o tyle nie bardzo wiem jak dodać do kolumn zawartość tych pól. Oto mój kod:

<!doctype html>
<html>
  <head>
    <title>temp</title>
    <meta charset = "UTF-8">

    <script type="text/javascript">
      function dodajWiersz()
      {
        //alert('Kliknąłeś na przycisk!');
        addRow('mojaTabela');
      }

      function addRow(tableID)
      {
        // Pobierz referencję do tabeli
        let tableRef = document.getElementById(tableID);

        // wstaw wiersz na końcu tabeli
        let newRow = tableRef.insertRow(-1);

        // wstaw komórkę w wierszu o indeksie 0
        let newCell = newRow.insertCell(0);

        // dopisz tekst do komórki
        let newText = document.createTextNode('Nowy wiersz');
        newCell.appendChild(newText);
      }
    </script>
  </head>

  <body>
    <p><label>Podaj link: </label><input type="text" name="tekscik" id="tekscik" value="abcdefghijklmnoprstuwxyz"></p>
    <p><label>Składowa 1: </label><input type="text" name="sklad1" id="sklad1"></p>
    <p><label>Składowa 2: </label><input type="text" name="sklad2" id="sklad2"></p>
    <p><label>Składowa 3: </label><input type="text" name="sklad3" id="sklad3"></p>
    <button type="button" onclick="dodajWiersz();">Dodaj wiersz</button>
    <table id="mojaTabela" border = 1>
      <tr><td>sklad1</td><td>sklad2</td><td>sklad3</td></tr>
    </table>
  </body>
</html>
1 
<!doctype html>
<html>
  <head>
    <title>temp</title>
    <meta charset = "UTF-8">

    <script type="text/javascript">
    
      function dodajKomorke(row, tdId, txt) {
        let newCell = row.insertCell(tdId);
        let newText = document.createTextNode(txt);
        newCell.appendChild(newText);
      }

      function dodajWiersz(tableID) {
        // Pobierz referencję do tabeli
        let tableRef = document.getElementById(tableID);

        // wstaw wiersz na końcu tabeli
        let newRow = tableRef.insertRow(-1);

        // wstaw komórki do wiersza
        dodajKomorke(newRow, 0, document.querySelector("#sklad1").value);
        dodajKomorke(newRow, 1, document.querySelector("#sklad2").value);
        dodajKomorke(newRow, 2, document.querySelector("#sklad3").value);
      }
      
    </script>
  </head>

  <body>
    <p><label>Podaj link: </label><input type="text" name="tekscik" id="tekscik" value="abcdefghijklmnoprstuwxyz"></p>
    <p><label>Składowa 1: </label><input type="text" name="sklad1" id="sklad1"></p>
    <p><label>Składowa 2: </label><input type="text" name="sklad2" id="sklad2"></p>
    <p><label>Składowa 3: </label><input type="text" name="sklad3" id="sklad3"></p>
    <button type="button" onclick="dodajWiersz('mojaTabela');">Dodaj wiersz</button>
    <table id="mojaTabela" border = 1>
      <tr><td>sklad1</td><td>sklad2</td><td>sklad3</td></tr>
    </table>
  </body>
</html>
0

@Freja Draco: dziękuję ślicznie :)

0

OK mam kolejne pytanko - otóż do kodu podanego przez @Freja Draco dopisałam kod PHP, w którym mam kilka funkcji. Odpowiednie funkcje zwracają wartości, które powinny być przesłane do pól sklad1, sklad2, sklad3 a te z kolei jak jest w kodzie powyżej - powinny zostać umieszczone w komórkach tabeli.

Problem w tym, że nie wiem jak zrobić, aby przesłanie danych nastąpiło BEZ przeładowania strony. Chodzi o to, że gdy za pomocą metody POST prześlę dane, wówczas strona się przeładowuje i owszem - wyciągnięte dane są, ale chciałabym zrobić tak, aby te dane zostały umieszczone w dodawanych polach tabeli. W jaki sposób mogłabym to zrobić?

Pozdrawiam!

0

Chyba żebym zrobiła to po prostu w PHP i MySQL i po temacie :D

0

https://www.w3schools.com/js/js_ajax_http_send.asp
https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_get2

1 użytkowników online, w tym zalogowanych: 0, gości: 1