从输入字段获取多个值，并将它们附加到新行中
我有一个包含多个值并用逗号分隔的输入，当单击按钮时，我尝试获取输入值，并将逗号替换为空空间，并将每个值追加到新行<tr>中。
function PostForm() {
var getVal = $("#Kundenummer").val().replace(/,/g, ''); //11548 10883
$('#tablebody').append('<tr><td>' + getVal + '</td></tr>')
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="Kundenummer" id="Kundenummer" value="11548, 10883,">
<button onclick="PostForm();" type="button">Save</button>
<table id="tablebody"></table>
但是，在获取输入值并将它们附加到表中之后，它将将这两个值放在一行中。
<table id="tablebody">
<tbody id="output">
<tr>
<td>11548 10883</td>
</tr>
</tbody>
</table>
我想要的输出：
<table id="tablebody">
<tbody id="output">
<tr>
<td>11548</td>
</tr>
<tr>
<td>10883</td>
</tr>
</tbody>
</table>
有人能帮帮我吗！
回答 5
Stack Overflow用户
发布于 2019-09-18 08:57:55
您正在用空格替换逗号，这将只返回字符串，相反，您可以用逗号分隔字符串，这将返回字符串数组，并迭代结果以创建表。
function PostForm() {
var getVal = $("#Kundenummer").val().split(',');
for(var i=0; i<getVal.length; i++) {
var val = getVal[i];
val = val.trim();
if(val!='') {
$('#tablebody').append('<tr><td>' + getVal[i] + '</td></tr>');
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="Kundenummer" id="Kundenummer" value="11548, 10883,">
<button onclick="PostForm();" type="button">Save</button>
<table border='1'>
<tbody id="tablebody">
</tbody>
</table>
Stack Overflow用户
发布于 2019-09-18 09:00:23
首先，使用split将字符串转换为数组：
var getVal = $("#Kundenummer").val().replace(/,/g, '').split(" ");
然后，循环遍历数组中的元素，并追加一行和列：
getVal.forEach((e) => $("#tablebody").append(${e}));
完整片段：
function PostForm() {
var getVal = $("#Kundenummer").val().replace(/,/g, '').split(" "); //11548 10883
getVal.forEach((e) => $("#tablebody").append(`<tr><td>${e}</tr></td>`));
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="Kundenummer" id="Kundenummer" value="11548, 10883,">
<button onclick="PostForm();" type="button">Save</button>
<table id="tablebody">
<tbody id="output">
</tbody>
</table>
Stack Overflow用户
发布于 2019-09-18 08:58:52
为了更有效地实现这一点，您需要通过split()字符将值传递到数组中。然后，您可以在数组上迭代，并为每个值构建一个新的表行，然后将内容追加到table中。
还请注意，on*属性已经过时，应尽可能避免。使用不显眼的事件处理程序。由于您已经在页面中加载了jQuery，所以可以使用on()，如下所示：
$(function() {
$('button').on('click', function() {
var values = $("#Kundenummer").val().split(',');
var html = values.map(function(value) {
return `<tr><td>${value}</td></tr>`;
});
$('#tablebody').append(html);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="Kundenummer" id="Kundenummer" value="11548, 10883">
<button type="button">Save</button>
<table>
<tbody id="tablebody"></tbody>
</table>
https://stackoverflow.com/questions/57988772
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号