社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
私信  •  关注

ajit kumar

ajit kumar 最近创建的主题
ajit kumar 最近回复了
6 年前
回复了 ajit kumar 创建的主题 » 如何使用jquery将HTML表单数据插入HTML表?

首先从 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>