首先从
form
并将其附加到
table
. 这是您的代码:
$(document).ready(function(){
$('#first_form').submit(feedTable);
function feedTable(e){
e.preventDefault();
if(!this.snNo) this.snNo = 1;
var task = $('#first_name').val(),
yes = $('#yes:checked').val(),
no = $('#no:checked').val(),
desc = $('input[name="description"]').val(),
type = $('#ttype').val();
var comp = yes?'yes':'no';
$('#record').append(
"<tr><td>"+this.snNo+"</td>"+
"<td>"+task+"</td>"+
"<td>"+desc+"</td>"+
"<td>"+comp+"</td>"+
"<td>"+type+"</td></tr>"
)
this.snNo += 1;
}
});
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #b8c6dd;
}
.right {
right: 0;
background-color: #dce0d9;
}
table {
font-family: Arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
input[type=text],
select {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="split left">
<center>
<h2>Employee Task Record</h2>
</center>
</body>
<table id='record'>
<tr>
<th>S.N</th>
<th>Task</th>
<th>Description</th>
<th>Complete</th>
<th>Type</th>
</tr>
</table>
</div>
<div class="split right">
<center>
<form id="first_form" method="post" action="">
Given Task : <input type="text" id="first_name" name="task" value="">
<br><br> Description: <input type="text" name="description" value=""><br>
<br> Complete: <input type="radio" id='yes' name="taskDone" value="yes" checked> Yes
<input type="radio" name="taskDone" id='no' value="no"> No<br> <br> Task Type:
<select id='ttype'>
<option value="regular">Regular</option>
<option value="Meeting">Meeting</option>
<option value="coding">Coding</option>
<option value="documentation">Documentation</option>
<option value="support">Support</option>
</select> <br> <br>
<input type="submit" onclick="" value="submit" button class="button">
</form>
</center>
</div>