我创建了简单的html employee.html,它由同一页中的表和表单组成。
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;
}
.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;
}
<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>
<table>
<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" name="taskDone" value="yes" checked> Yes
<input type="radio" name="taskDone" value="no"> No<br> <br> Task Type:
<select>
<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>
表单布局如下。
现在我想以表单的形式输入值,当我单击提交按钮时,我想用这样的jquery将它们显示在左表中,我对jquery有了新的了解,并使用了jquery选择器的基本命令,如$(“*”)、$(“p.intro”)等。