Cara Menambahkan Baris Baru Pada Tabel Dengan CSS Dan JS

Halo, ketemu lagi dengan saya 🙂 apa kabarnya ? semoga sehat yah, amin.

Pada kesempatan kali ini saya akan berbagi tutorial mengenai Cara Menambahkan Baris Baru Pada Tabel Dengan CSS Dan JS, bagaimana cara membuat nya, yuk simak langkahnya berikut ini.

Pertama silahkan kalian ketikan struktur HTML berikut.

<div style="text-align:center;">
  <h2>A Table</h2>
  <h5>Click "New Row" Untuk menambahkan baris pada table</h5>
  <table id="myTable">
    <tr>
      <th>No.</th>
      <th>Input</th>
    </tr>
    <tr>
      <td>1.</td>
      <td>
        <input type="text" />
      </td>
    </tr>
  </table>
  <br>
  <input type="button" value="New Row" onclick="addRow()">
  <template id="rowTemplate">
    <tr>
      <td></td>
      <td>
        <input type="text" />
      </td>
    </tr>
  </template>
</div>

Kalo sudah, lanjutkan untuk kode CSS untuk sedikit mempercantik tampilan tabel, berikut kode CSS.

body,
input[type="button"] {
  font-family: bookman old style;
  font-size: 12pt;
}

table {
  border-collapse: collapse;
  margin: auto;
}

th,
input[type="button"],
h2 {
  color: indianred;
}

th,
td {
  border: 1px solid indianred;
  padding: 6px;
}

input[type="text"] {
  border: 1px dashed indianred;
}

input[type="button"] {
  border: 2px solid indianred;
  background: antiquewhite;
  cursor: pointer;
}

input[type="button"]:hover {
  background: indianred;
  color: antiquewhite;
}

Nah sekarang ketikan kode Js untuk membuat fungsi menambah baris baru pada tabelnya, berikut kode Js nya.

function addRow() {

  var template = document.querySelector('#rowTemplate'),
    tbl = document.querySelector('#myTable'),
    td_slNo = template.content.querySelectorAll("td")[0],
    tr_count = tbl.rows.length;

  td_slNo.textContent = tr_count;
  var clone = document.importNode(template.content, true);
  tbl.appendChild(clone);

}

Kalo sudah semua diketikan, jangan lupa disimpan kemudian jalankan dibrowser nya masing-masing dan lihat hasilnya.

Baik sampai disini artikel mengenai Cara Menambahkan Baris Baru Pada Tabel Dengan CSS Dan JS, semoga bermanfaat amin.

Selamat mencoba.

DEMO