如果你想在 JavaScript 中动态创建 HTML 的 <input>
元素并设置其值,而不依赖于外部 HTML 文件,可以使用以下代码示例。此示例会在 JavaScript 中创建多个输入框,每个输入框显示对应的数据项的值:
// 模拟 dialogData.data 数组
const dialogData = {
data: [
{
name: '张三',
customerId: 'C001',
ident: 'ID123456',
loanInfoCode: 'L001',
productLine: '产品A',
productName: '产品名称A',
loanAmount: 100000,
contractCode: 'CONTRACT001',
overduePrincipal: 5000,
DPD: 10,
totalRemainingAmount: 95000,
interestPayable: 1500,
interestPenalty: 200,
committedRepaymentAmount: 10000
},
// 可以添加更多对象以测试多个条目
]
};
// 创建一个新的 div 元素作为容器
const container = document.createElement('div');
// 遍历 dialogData.data 数组
for (let i = 0; i < dialogData.data.length; i++) {
// 获取当前数据项
const item = dialogData.data[i];
// 创建一个 div 来包裹每一组输入字段
const itemContainer = document.createElement('div');
// 创建并设置所有输入元素
const inputs = [
{ label: "客户姓名", value: item.name },
{ label: "客户ID", value: item.customerId },
{ label: "身份证", value: item.ident },
{ label: "贷款信息代码", value: item.loanInfoCode },
{ label: "产品线", value: item.productLine },
{ label: "产品名称", value: item.productName },
{ label: "贷款金额", value: item.loanAmount },
{ label: "合同编号", value: item.contractCode },
{ label: "逾期本金", value: item.overduePrincipal },
{ label: "逾期天数", value:item.DPD },
{ label:"剩余总金额" ,value:item.totalRemainingAmount},
{label:"应付利息" ,value:item.interestPayable},
{label:"滞纳金" ,value:item.interestPenalty},
{label:"承诺还款金额" ,value:item.committedRepaymentAmount}
];
inputs.forEach(input => {
// 创建标签和输入框
const inputLabel = document.createElement('label');
inputLabel.textContent = input.label + ': ';
const inputField = document.createElement('input');
inputField.type = 'text'; // 输入类型可以根据需要进行更改
inputField.value = input.value;
// 将标签和输入框添加到当前项目容器中
itemContainer.appendChild(inputLabel);
itemContainer.appendChild(inputField);
itemContainer.appendChild(document.createElement('br')); // 换行符,便于排版
});
// 将每一组输入字段添加到主容器中
container.appendChild(itemContainer);
}
// 将容器添加到 body 中,以便展示出来
document.body.appendChild(container);
步骤说明:
- 模拟数据:定义了
dialogData
和包含数据的data
数组。 - 创建容器:通过
document.createElement('div')
创建一个主要容器,用于存放所有的<input>
。 - 遍历数组:
- 对每个数据项创建一个子容器(
itemContainer
),以便将相关的输入字段分组。
- 对每个数据项创建一个子容器(
- 创建输入元素:
- 在内部循环中为每个属性生成对应的标签和输入框,并将其附加到
itemContainer
。
- 在内部循环中为每个属性生成对应的标签和输入框,并将其附加到
- 插入 DOM:最后,将这个主容器添加到文档的
body
中,这样它就会被渲染在页面上。
注意事项:
- 每次迭代都会生成一系列文本框,方便用户查看或编辑相应的数据。
- 所有操作都在 JavaScript 中完成,不依赖于额外的 HTML 文件。
内容由零声教学AI助手提供,问题来源于学员提问