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

Question

应该将输入中写入的内容作为一行添加到表中。我该怎么做呢?请帮帮我。

单击保存按钮时，必须将在下面输入中输入的值​​放在表中的相应位置。

我对css框架使用了tailwindcss。

所使用的javascript框架并不重要。

​

<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

这是一个最小的工作示例，您必须适应您的用例。

​

<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>

​

请查看以下链接以了解更多信息：

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