要在 JavaScript 中完成插入部分的布局，而不是在 HTML 字符串中硬编码，你可以首先创建一个新的元素，构建其结构，然后将其插入到 self.form 中。下面是对你的代码进行修改的示例：
success: function(res) {
var dialogData = JSON.parse(res);
if (dialogData.success) {
let totalAmount = 0;
for (let i = 0; i < dialogData.data.loanAndCustomerList.length; i++) {
const dataInfo = dialogData.data.loanAndCustomerList[i];
console.log(dataInfo);
// 创建一个新的 div 元素并设置其样式
const rowDiv = document.createElement('div');
rowDiv.className = 'row';
rowDiv.style.marginTop = '7px';
// 创建包含 Name 的 col-md-4
const colDiv = document.createElement('div');
colDiv.className = 'col-md-4';
colDiv.style.overflowWrap = 'break-word';
// 创建标签
const label = document.createElement('label');
label.htmlFor = `name${i}`;
label.className = 'control-label col-sm-4';
label.style.display = 'inline-block';
label.style.whiteSpace = 'nowrap';
label.innerText = `Name ${i}`;
// 创建输入框
const inputContainerDiv = document.createElement('div');
inputContainerDiv.className = 'orientation col-sm-8';
inputContainerDiv.style.paddingLeft = '0px';
inputContainerDiv.style.paddingRight = '0px';
const inputField = document.createElement('input');
inputField.className = 'form-control';
inputField.type = 'text';
inputField.value = dataInfo.name || '';
inputField.disabled = true;
// 将输入框添加到容器中
inputContainerDiv.appendChild(inputField);
// 将标签和输入框容器添加到列中
colDiv.appendChild(label);
colDiv.appendChild(inputContainerDiv);
// 最后，将列添加到行中
rowDiv.appendChild(colDiv);
// 将完整的行添加到表单中
self.form.prepend(rowDiv);
}
}
}
修改点：
- 使用
document.createElement方法动态创建 HTML 元素。 - 设置所需的属性和样式。
- 将这些元素按照层级关系插入，以构建完整的布局。
- 使用
self.form.prepend(rowDiv)将构造好的行元素插入到表单中。
这样做使得代码更加清晰，并且便于维护和扩展。
内容由零声教学AI助手提供，问题来源于学员提问
