Question

我正在使用桌子，但遇到了一些问题。在大多数正常情况下，我有4个输入字段，可以在其中添加一些数据并将其发送到视图中的表中。但是，如果碰巧我有更多的4个值，并且需要添加更多，则添加了一个名为“加号” 的按钮，该按钮会清除该字段中的先前值，并等待用户输入添加新的。

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

代码：

$('.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>

Answer 2

$(document).ready(function(){
    $('.coButton').on('click', function () {
    $('.changeoverTable').show();
    var arrNumber = new Array();
    $(".add").each(function () {
		$(this).remove();
	});
    $('input[type=text]').each(function (i) {

        arrNumber.push($(this).val());
        if (arrNumber[i]) {
		
			if($(".changeoverTable > tbody > tr").hasClass("add_more")) {
				$(".changeoverTable > tbody .add_more").first().before('<tr class="add"><td>Data</td><td>' + arrNumber[i] + '</td></tr>');
			}else{
				$(".changeoverTable > tbody").append('<tr class="add"><td>Data</td><td>' + arrNumber[i] + '</td></tr>');
			}
            
        }

    })
});


$('.plusButton').on('click', function () {
    var value = $('#opBarcode').val();
	if(value){
		$(".changeoverTable > tbody").append('<tr class="add_more"><td>Data</td><td>' + value + '</td></tr>');
	}
	
});
	});

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

在jsfiddle中运行此命令，您可以不使用数组而添加尽可能多的行！

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <input type="text" id="mytext" />
</div>
<br>
<br>
<input type="submit" value="submit" onclick="appen()" id="submit" />

<br />
<br />
<table id="mytable">
    <thead>
        <tr>
            <th>name</th>
  
        </tr>
    </thead>
    <tbody></tbody>
</table>

jQuery如何在表使用输入字段处追加数据

3 个答案: