如何使用jquery将HTML表单数据插入HTML表?

Suman Basnet • 4 年前 • 374 次点击

我创建了简单的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”)等。

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/38649

374 次点击

文章 [ 3 ] | 最新文章 4 年前

• 1 楼

suresh bambhaniya 5 年前

这是完整的例子

<!DOCTYPE html>
<html>
<head>
<title>Try update table</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

function addData(){
    $("#resultTable tr:last").after('<tr><td>'+$('input[name="taskDone"]:checked').val()+'</td><td>'+$('#description').val()+'</td><td>'+$('#taskType').children("option:selected").val()+'</td></tr>');
    return false;
}

</script>

</head>
<body>

    <table id="resultTable">
    <tr>
      <th>S.N</th>
      <th>Task</th>
      <th>Description</th>
      <th>Complete</th>
      <th>Type</th>
    </tr>
  </table>

    <form id="first_form" method="post" onsubmit="return addData();">
      Given Task : <input type="text" id="first_name" name="task" value="">
      <br><br> Description: <input type="text" id="description" 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 id="taskType">
        <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"  value="submit" button class="button">
    </form>

</body>
</html>

• 2 楼

ajit kumar 5 年前

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

• 3 楼

Vins4nity 5 年前

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>
<script>

$('.btn').on('click', function(event) {
    var firstName = $.trim($('#first_name').val());
    var description = $.trim($('#description').val());
    var taskDone = $('input[name=taskDone]:checked').val();
    var taskType = $('#taskType option:selected').val();
    var numRows = $('#tableBody').find('tr').length;
    var newRow = $('<tr><td></td><td></td><td></td><td></td><td></td></tr>');
    var cols = newRow.children();
    cols.eq(0).text(numRows + 1);
    cols.eq(1).text(firstName);
    cols.eq(2).text(description);
    cols.eq(3).text(taskDone);
    cols.eq(4).text(taskType);
    newRow.appendTo('#tableBody');

});

</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>

登录后回复