javascript - jQuery 如何在表中使用输入字段追加数据

Question

我在处理表格时遇到了一些问题。在大多数正常情况下，我有 4 个输入字段，我可以在其中添加一些数据并将其发送到我 View 中的表。但是如果碰巧我有更多的 4 个值，并且我需要添加更多，我添加了一个名为 "Plus" 的按钮，它从字段中清除以前的值，并等待用户添加新的。

因此按钮“加号”将数据添加到表中，但在按下按钮发送到表后所有数据都消失了。

代码:

$('.coButton').on('click', function() {
  $('.changeoverTable').show();
  var arrNumber = new Array();
  $(".changeoverTable > tbody").html('');
  $('input[type=text]').each(function(i) {

    arrNumber.push($(this).val());
    if (arrNumber[i]) {
      $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + arrNumber[i] + '</td></tr>');
    }

  })
});


$('.plusButton').on('click', function() {
  var value = $('#opBarcode').val()
  console.log(value);
  $(".changeoverTable > tbody").append('<tr><td>Data</td><td>' + value + '</td></tr>');
  $("#opBarcode").val('');
});

body {
  background: #f5f5f5;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<center><input type="text" placeholder="Enter number of data"></center>
<center><button class="coButton">Send to table</button></center>
<center><input type="text" id="opBarcode" placeholder="Enter number of layers"><button class="plusButton">Plus</button></center>
<center><button class="coButton">Send to table</button></center>
<center><input type="text" placeholder="Enter number of nest"></center>
<center><button class="coButton">Send to table</button></center>
<center><input type="text" placeholder="Enter number of layers"></center>
<center><button class="coButton">Send to table</button></center>
<table class="changeoverTable hide">
  <thead>
    <tr>
      <th colspan="3">Table</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Answer 1

请试试这个:

function appen() {
  var a = $("#mytext").val();
  var b = $("#lastname").val();
  var c = $("#any").val();
  $("#mytable tbody").append("<tr><td>" + a + "</td><td>" + b + "</td><td>" + c + "</td></tr>");
  $("#mytext").val('');
  $("#lastname").val('');
  $("#any").val('');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="mytext" />
<input type="text" id="lastname" />
<input type="text" id="any" />
<br />
<br />
<input type="submit" value="submit" onclick="appen()" id="submit" />
<br />
<br />
<table id="mytable">
  <thead>
    <tr>
      <th>name</th>
      <th>lastname</th>
      <th>anything</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>