JSFiddle - React, Tailwind, and code Playground
by Alimin
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Date example</title>
<script src="jquery-2.0.3.min.js"></script>
</head>
<body>
<h1><!--Pemanfaatan DOM Dan Jquery Untuk Membuat Grid Bantu--></h1>
<div id='form_input' style="width:400px; height:auto; border:solid 1px red;">
<h3>Tambah Kontak</h3>
<form>
<table border=0>
<tr>
<td>
Nama
</td>
<td>
Alamat
</td>
</tr>
<tr>
<td>
<input type="text" name="nama">
</td>
<td>
<input type="text" name="no_telepon">
</td>
</tr>
</table>
</form>
<button onclick="save_biodata()">Save</button><button onclick="cancel()">Cancel</button>
</div>
<div id="tbl_grid">
<table style="border: 1px solid black"; >
<tr style="border: 1px solid black";>
<td style="border: 1px solid black";>Nama</td>
<td style="border: 1px solid black ";>No Telepon</td>
<td style="border: 1px solid black ";><form><input type="radio" id="rdo1" name='group1' value="all" onclick="checkall()"/>all<input type="radio" id="rdo2" name='group1' value="all" onclick="uncheckall()" />none</form></td>
</tr>
</table>
<button id="btn_add">Add New</button>
<button id="btn_add" onclick="deletedata()" >Delete</button>
</div>
</body>
<script>
$(document).ready(function(){
$("#btn_add").click(function(){
$("#form_input").show();
$("#tbl_grid").hide();
});
});
$("#form_input").hide();
function cancel(){
$("#form_input").hide();
$("#tbl_grid").show();
}
var i=0;
function save_biodata(){
i=i+1;
var newrow=document.createElement('tr');
newrow.style.border.color = "red";
var newtd=document.createElement('td');
newtd.style.border.color = "red";
var newtd2=document.createElement('td');
newtd2.style.border.color = "red";
var newtd3=document.createElement('td');
newtd3.style.border.color = "red";
var...