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

Question

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

谁能帮帮我吗？

Answer 1

首先，使用 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>