JSFiddle - React, Tailwind, and code Playground

by Anov Siradj

HTML

<form>
  <button type=button data-action=mk>tambah</button>
  <input name=a>
  <input name=b>
  <input name=c>
  <input type=submit>
</form>

<template>
  <tr data-for="default">
    <td data-id="a">(kosong)</td>
    <td data-id="b">(kosong)</td>
    <td data-id="c">(kosong)</td>
    <td><button type=button data-action=edit>edit</button></td>
  </tr>
</template>

<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
    </tr>
  </thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

JavaScript

var trow;
var $form = $(document.forms[0]);
var $table = $('table:first');
var $tbody = $($table.prop('tBodies')[0]);
trow = $('template').prop('content').querySelector('tr[data-for=default]');

$table.on('mk-row', (event, entry, i) => {
  $(trow.cloneNode(true)).appendTo($tbody).each((i, trow_current) => {
    $(trow_current).data(entry);
    $(trow_current).find('[data-id]').each(function() {
      $(this).text(entry[this.dataset.id] || this.innerText);
    });
    $(trow_current).find('[data-action=edit]').on('click', event => {

    });
  });
});
$table.on('rm-row', (event, index_or_trow) => {
  if ($.isNumeric(index_or_trow)) {
    $tbody[0].deleteRow(index_or_trow);
  }
});

var entries = [{
    a: 1,
    b: 2,
    c: 3
  },
  {
    a: 10,
    b: 20,
    c: 30
  },
  {
    a: 100,
    b: 200,
    c: 300
  },
  {
    a: 9999
  },
];

$.each(entries, (i, entry) => {
  $table.trigger('mk-row', [entry, i]);
});

$table.trigger('mk-row', [{
  a: 7,
  b: 8,
  c: 9,
}]);
$table.trigger('rm-row', [1]);

$form.on('submit', event => {
  event.preventDefault();

  var entry = {},
    entry_array = $form.serializeArray();
  entry_array.forEach(e => {
    entry[e.name] = e.value;
  });
  $table.trigger('mk-row', [entry]);
});

/*
var trow;
var table = document.querySelector('table');
var tbody = table.tBodies[0];
trow = document.querySelector('template').content.querySelector('tr');

var entries = [
	{a:1,b:2,c:3},
  {a:10,b:20,c:30},
  {a:100,b:200,c:300},
];

entries.forEach(entry => {
	var trow_current = trow.cloneNode(true);
	tbody.appendChild(trow_current);
  trow_current.querySelectorAll('[data-id]').forEach(trcel => {
  	trcel.innerText = entry[trcel.dataset.id];
  });
});
*/