javascript - jQuery如何在表中追加数据使用输入字段
问题描述
我正在使用一张桌子,我遇到了一些问题。在大多数正常情况下,我有 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>
解决方案
请试试这个:
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>