ZBLOG

for (let i = 0; i < dialogData.data.length; i++) { self.customerName.setValue(dialogData.data[i].name); self.customerCodes.setValue(dialogData.data[i].customerId); self.idents.setValue(di...

如果你想在 JavaScript 中动态创建 HTML 的 <input> 元素并设置其值,而不依赖于外部 HTML 文件,可以使用以下代码示例。此示例会在 JavaScript 中创建多个输入框,每个输入框显示对应的数据项的值:

  1. // 模拟 dialogData.data 数组
  2. const dialogData = {
  3. data: [
  4. {
  5. name: '张三',
  6. customerId: 'C001',
  7. ident: 'ID123456',
  8. loanInfoCode: 'L001',
  9. productLine: '产品A',
  10. productName: '产品名称A',
  11. loanAmount: 100000,
  12. contractCode: 'CONTRACT001',
  13. overduePrincipal: 5000,
  14. DPD: 10,
  15. totalRemainingAmount: 95000,
  16. interestPayable: 1500,
  17. interestPenalty: 200,
  18. committedRepaymentAmount: 10000
  19. },
  20. // 可以添加更多对象以测试多个条目
  21. ]
  22. };
  23. // 创建一个新的 div 元素作为容器
  24. const container = document.createElement('div');
  25. // 遍历 dialogData.data 数组
  26. for (let i = 0; i < dialogData.data.length; i++) {
  27. // 获取当前数据项
  28. const item = dialogData.data[i];
  29. // 创建一个 div 来包裹每一组输入字段
  30. const itemContainer = document.createElement('div');
  31. // 创建并设置所有输入元素
  32. const inputs = [
  33. { label: "客户姓名", value: item.name },
  34. { label: "客户ID", value: item.customerId },
  35. { label: "身份证", value: item.ident },
  36. { label: "贷款信息代码", value: item.loanInfoCode },
  37. { label: "产品线", value: item.productLine },
  38. { label: "产品名称", value: item.productName },
  39. { label: "贷款金额", value: item.loanAmount },
  40. { label: "合同编号", value: item.contractCode },
  41. { label: "逾期本金", value: item.overduePrincipal },
  42. { label: "逾期天数", value:item.DPD },
  43. { label:"剩余总金额" ,value:item.totalRemainingAmount},
  44. {label:"应付利息" ,value:item.interestPayable},
  45. {label:"滞纳金" ,value:item.interestPenalty},
  46. {label:"承诺还款金额" ,value:item.committedRepaymentAmount}
  47. ];
  48. inputs.forEach(input => {
  49. // 创建标签和输入框
  50. const inputLabel = document.createElement('label');
  51. inputLabel.textContent = input.label + ': ';
  52. const inputField = document.createElement('input');
  53. inputField.type = 'text'; // 输入类型可以根据需要进行更改
  54. inputField.value = input.value;
  55. // 将标签和输入框添加到当前项目容器中
  56. itemContainer.appendChild(inputLabel);
  57. itemContainer.appendChild(inputField);
  58. itemContainer.appendChild(document.createElement('br')); // 换行符,便于排版
  59. });
  60. // 将每一组输入字段添加到主容器中
  61. container.appendChild(itemContainer);
  62. }
  63. // 将容器添加到 body 中,以便展示出来
  64. document.body.appendChild(container);

步骤说明:

  1. 模拟数据:定义了 dialogData 和包含数据的 data 数组。
  2. 创建容器:通过 document.createElement('div') 创建一个主要容器,用于存放所有的 <input>
  3. 遍历数组
    • 对每个数据项创建一个子容器(itemContainer),以便将相关的输入字段分组。
  4. 创建输入元素
    • 在内部循环中为每个属性生成对应的标签和输入框,并将其附加到 itemContainer
  5. 插入 DOM:最后,将这个主容器添加到文档的 body 中,这样它就会被渲染在页面上。

注意事项:

  • 每次迭代都会生成一系列文本框,方便用户查看或编辑相应的数据。
  • 所有操作都在 JavaScript 中完成,不依赖于额外的 HTML 文件。


    内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=20613

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?