如何用PHP/JavaScript从外部|分隔文本文件填充50个HTML5输入框

首先得指出你原代码里的一个小bug：回调函数拿到的参数是data，但你写了dataString，这会直接导致变量未定义的错误哦。另外，手动给50个输入框挨个赋值也太麻烦了，咱们用循环来高效解决这个事儿！

完整实现方案 #

先确认你的HTML结构

假设你已经手动写好了50个输入框，ID是I01到I50，就像这样：

<input type="text" name="N01" id="I01">
<input type="text" name="N02" id="I02">
<!-- 中间的I03到I49就不一一写啦 -->
<input type="text" name="N50" id="I50">

完善后的jQuery代码

<script>
// 怕$和其他库冲突的话就用jQuery.get，没问题的话直接用$.get也行
jQuery.get('assets/players.txt', function(data) {
    // 分割字符串，顺便把空项过滤掉（比如文件末尾的|会多出一个空字符串）
    const playerList = data.split('|').filter(item => item.trim() !== '');
    
    // 循环处理50个输入框
    for (let i = 1; i <= 50; i++) {
        // 把数字转成两位数的后缀，比如1变成"01"，10就是"10"
        const idSuffix = i.toString().padStart(2, '0');
        const inputSelector = `#I${idSuffix}`;
        // 数组索引从0开始，所以用i-1取对应的数据，没有的话就设为空
        const playerName = playerList[i - 1] || '';
        $(inputSelector).val(playerName);
    }
});
</script>

代码里的关键点解释 #

• 修正变量名：把dataString改成data，这是回调函数里拿到的文件内容，之前写错了肯定跑不起来。
• 过滤空字符串：用filter方法去掉分割后可能出现的空项，避免输入框里出现空白内容。
• 循环批量赋值：用for循环从1到50，通过padStart把数字补成两位数，完美匹配你输入框的ID格式。
• 容错处理：如果你的players.txt里的玩家数量不够50，剩下的输入框会自动显示空字符串，不会报错。

额外小技巧：自动生成输入框 #

要是你还没手动写50个输入框，也可以用jQuery动态生成，省得一个个敲：

// 先在页面加个容器，比如<div id="inputContainer"></div>
const inputContainer = $('#inputContainer');
for (let i = 1; i <= 50; i++) {
    const idSuffix = i.toString().padStart(2, '0');
    // 动态创建输入框元素
    const newInput = $(`<input type="text" name="N${idSuffix}" id="I${idSuffix}">`);
    // 把输入框加到容器里
    inputContainer.append(newInput);
}

这样连输入框都不用手动写，直接生成+填充一步到位！

内容的提问来源于stack exchange，提问作者verlager