JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<style type="text/css">
div{
margin: 0px auto;
border-style:solid;
}
#Button{
float: left;
}
#formTable{
visibility:hidden;
}
#Outside{
position:absolute;
left:50%;
top:50%;
margin-left: -300px;
margin-top: -200px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<script>
$(document).ready(function(){
$('#add').click(function(){
$('#formTable').css('visibility','visible');
});
$('#edit').click(function(){
$('#formTable').css('visibility','visible');
});
$('#del').click(function(){
$('#formTable').css('visibility','hidden');
});
});
</script>
<div id="Outside">
<div id="Button">
<input type="button" id="add" value="新增"/><br>
<input type="button" id="edit" value="修改"/><br>
<input type="button" id="del" value="刪除"/><br>
</div>
<div id="formTable">
<form action="/index/Add/" method="get">
{% csrf_token %}
<label>name:</label><input type="text" name="name"/><br>
<label>birthday:</label><input type="text" name="birthday"/><br>
<label>height:</label><input tpye="text" name="height"/><br>
<label>weight:</label><input tpye="text" name="weight"/><br>
<input type="submit" value="add"/>
</div>
<div id="content">
<table border="1">
<tr>
<td></td>
<td>ID</td>
<td>Name</td>
<td>Birthday</td>
<td>Height</td>
<td>Weight</td>
<td>BMI</td>
<td>State</td>
<td>Edit/Del</td>
</tr>
{% if latest_personal_list %}
{% for personal in latest_personal_list %}
<tr>
<td><input type="radio" name=checked value="{{personal.id}}" /></td>
<td class="id">{{personal.id}}</td>
<td class="name">{{ personal.name }}</td>
<td class="birthday">{{ personal.birthday }}</td>
<td class="height">{{personal.height}}</td>
<td class="weight">{{personal.weight}}</td>
<td class="heightadd">{{personal.BMI}}</td>
{% if...