javascript - 从输入字段中获取多个值并将其附加到新行

我有一个包含多个值的输入，并用逗号分隔，当单击按钮时，我尝试获取输入的值并将逗号替换为空白，并将每个值附加到新行<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>

谁能帮帮我吗 ！

最佳答案

您将逗号替换为仅返回字符串的空格，而是可以使用逗号分割字符串，以返回字符串数组并迭代结果以创建表

    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>

关于javascript - 从输入字段中获取多个值并将其附加到新行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57988772/