如何将输入内容作为行添加到表中

Question

What is written in the inputs should be added to the table as a row. How can I do this please help me.

The values entered in the inputs below When the save button is clicked, it must be placed in their places in the table.

i used tailwindcss for css framework

the javascript framework used does not matter

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="w-full py-2 border"> <div class="w-full overflow-x-scroll"> <table class="border border-collapse text-sm w-full"> <thead> <th class="border col-musteri-id py-4 px-1">Müşteri ID</th> <th class="border col-sirket-id py-4 px-2">Şirket ID</th> <th class="border col-musteri-adi py-4 px-2">Müşteri Adı</th> <th class="border col-ulke py-4 px-2">Ülke</th> <th class="border col-sehir py-4 px-2">Şehir</th> <th class="border col-ilce py-4 px-2">İlçe</th> <th class="border col-sektor-id py-4 px-1">Sektör ID</th> <th class="border col-urun-id py-4 px-2">Ürün ID</th> <th class="border col-siparis-tarihi py-4 px-2">Sipariş tarihi</th> <th class="border col-toplam-fiyat py-4 px-2">Toplam Fiyat</th> <th class="border col-musteri-tipi py-4 px-2">Müşteri Tipi</th> <th class="border col-mail py-4 px-2">Mail</th> <th class="border col-davet-kodu py-4 px-2">Davet Kodu</th> <th class="border col-davet-durumu py-4 px-2">Davet Durumu</th> <th class="border col-musteri-durumu py-4 px-2">Müşteri Durumu</th> </thead> <tbody> <tr> <td class="border col-musteri-id p-4">345345</td> <td class="border col-sirket-id p-4">02.11.2021</td> <td class="border col-musteri-adi p-4">Tshirt Reklamı</td> <td class="border col-ulke p-4">En Düşük Bütçe</td> <td class="border col-sehir p-4">7 Gün</td> <td class="border col-ilce p-4">Taslakta</td> <td class="border col-sektor-id p-4">300TL</td> <td class="border col-urun-id p-4">100k-250k</td> <td class="border col-siparis-tarihi p-4">09.11.2021</td> <td class="border col-toplam-fiyat p-4">09.11.2021</td> <td class="border col-musteri-tipi p-4">09.11.2021</td> <td class="border col-mail p-4">09.11.2021</td> <td class="border col-davet-kodu p-4">09.11.2021</td> <td class="border col-davet-durumu p-4">09.11.2021</td> <td class="border col-musteri-durumu p-4">09.11.2021</td> </tr> </tbody> </table> </div> </div> <div class="w-full flex gap-2 mt-2"> <div class="w-2/12 flex flex-col gap-2"> <h1>Müşteri ID</h1> <h1>Şirket ID</h1> <h1>Müşteri Adı</h1> <h1>Ülke</h1> <h1>Şehir</h1> <h1>İlçe</h1> <h1>Sektör ID</h1> <h1>Ürün ID</h1> <h1>Sipariş tarihi</h1> <h1>Toplam Fiyat</h1> <h1>Müşteri Tipi</h1> <h1>Mail</h1> <h1>Davet Kodu</h1> <h1>Davet Durumu</h1> <h1>Müşteri Durumu</h1> </div> <div class="w-10/12 flex flex-col gap-2"> <input type="text" class="focus:outline-none musteri-id border w-2/12"> <input type="text" class="focus:outline-none sirket-id border w-2/12"> <input type="text" class="focus:outline-none musteri-adi border w-2/12"> <input type="text" class="focus:outline-none ulke border w-2/12"> <input type="text" class="focus:outline-none sehir border w-2/12"> <input type="text" class="focus:outline-none ilce border w-2/12"> <input type="text" class="focus:outline-none sektor-id border w-2/12"> <input type="text" class="focus:outline-none urun-id border w-2/12"> <input type="text" class="focus:outline-none siparis-tarihi border w-2/12"> <input type="text" class="focus:outline-none toplam-fiyat border w-2/12"> <input type="text" class="focus:outline-none musteri-tipi border w-2/12"> <input type="text" class="focus:outline-none mail border w-2/12"> <input type="text" class="focus:outline-none davet-kodu border w-2/12"> <input type="text" class="focus:outline-none davet-durumu border w-2/12"> <input type="text" class="focus:outline-none musteri-durumu border w-2/12"> </div> </div> <div class="w-full flex justify-center"> <button class="focus:outline-none border px-2 py-1 bg-red-500 rounded-md text-white"> Kaydet </button> </div>

Answer 1

Here is a minimal working example that you would have to adapt to your use case.

 <link href="https://unpkg.com//tailwindcss@2.1.1/dist/tailwind.min.css" rel="stylesheet" /> <div class="flex flex-col items-center min-h-screen p-4"> <table id="table" class="w-full p-2"> <thead> <tr> <th class="p-1 bg-gray-100 border">Name</th> <th class="p-1 bg-gray-100 border">ID</th> </tr> </thead> <tbody> <tr> <td class="p-1 border">test</td> <td class="p-1 border">100</td> </tr> </tbody> </table> <form id="add-form" class="flex flex mt-6 space-x-3"> <input name="name" class="px-5 py-2 border border-gray-100 rounded bg-gray-50" type="text" placeholder="Name" /> <input name="id" class="px-5 py-2 border border-gray-100 rounded bg-gray-50" type="text" placeholder="ID" /> <button type="submit" id="add-button" class="px-5 py-1 text-white bg-blue-500 rounded">Add</button> </form> </div> <script> const form = document.getElementById("add-form"); form.addEventListener("submit", function (event) { event.preventDefault(); const data = new FormData(event.target); var row = table.insertRow(-1); // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element: var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); // Add some text to the new cells: cell1.innerHTML = data.get("name"); cell1.className = "p-1 border"; cell2.innerHTML = data.get("id"); cell2.className = "p-1 border"; form.reset() }); </script>

Check out the following links to learn more:

https://developer.mozilla.org/en-US/docs/Web/API/FormData/get

https://www.w3schools.com/jsref/met_table_insertrow.asp

How to insert a row in an HTML table body in JavaScript

Adding css class to a dynamically created row using java script