Question

如何从外部分隔的＆＃34; |＆＃34;填充50个html5输入字段？文本文件（＆＃34; players.txt＆＃34;）：

Smith, Bob|Jones, James|Cavanaugh, Harvey|

我有这样的输入字段：

<input type="text" name = "N01" id = "I01">
<input type="text" name = "N02" id = "I02">

<script>
$jQuery.get('assets/players.txt', function(data) {
splitString = dataString.split("|");

$('#I01').val(splitString[0]);
$('#I02').val(splitString[1]);
$('#I03').val(splitString[2]);

});

</script>

Answer 1

尝试使用jquery $符号来获取html元素，例如

$('#I01').val(splitString[0]);
$('#I02').val(splitString[1]);
$('#I03').val(splitString[2]);

Answer 2

您目前正在引用错误的数据变量is returned, concluding the construction of，而不是引用dataString。此外，如果您知道您的ID是连续的，您可以避免编写50行不同的JS并运行for循环，例如：

data

Answer 3

不要单独设置每个元素的值，使用forEach循环。

请务必考虑字符串填充。

splitString.forEach((str, i) => {
  document.querySelector('#I' + String(i).padStart(2, '0'))
    .value = str;
});

Answer 4

let dataString = "Smith, Bob|Jones, James|Cavanaugh, Harvey|";
let splitString = dataString.split("|");

for (let i = 0; i < splitString.length; i++) {
  $("#I0" + i).val(splitString[i]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="N01" id="I01">
<input type="text" name="N02" id="I02">

Answer 5

没有ajax的示例：

$(function(){
  var splitString = 'Smith, Bob|Jones, James|Cavanaugh, Harvey';
  splitString = splitString.split("|");
  $('#playersInputs').empty();
  $.each(splitString, function(i,v){
    $('<input type="text" />')
        .attr('name', 'N'+("0"+(i+1)).slice(-2))
        .attr('id', 'I'+("0"+(i+1)).slice(-2))
        .val(v)
        .appendTo('#playersInputs');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='playersInputs'>
</div>

使用ajax的示例：

您必须将/path/to/your/text-file替换为actual url

$(function(){
  $.get('/path/to/your/text-file', function(data) {
    var splitString = data.split("|");
    $('#playersInputs').empty();
    $.each(splitString, function(i,v){
      $('<input type="text" />')
          .attr('name', 'N'+("0"+(i+1)).slice(-2))
          .attr('id', 'I'+("0"+(i+1)).slice(-2))
          .val(v)
          .appendTo('#playersInputs');
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='playersInputs'>
</div>

从php / javascript填充输入字段

5 个答案: