如何将JavaScript获取的数据渲染到HTML模态框表单中

问题排查&修复方案 #

你代码的问题出在赋值逻辑完全没有关联到模态框的输入框元素，具体错误和修复代码如下：

错误点说明

• 初始定义的namaToko、alamatToko仅存储了页面加载时输入框的innerHTML静态值，不是输入框的DOM引用，后续修改变量完全不会同步到页面
• 你拿到的nama、alamat是表格<td>节点对象，没有提取文本内容就直接赋值
• input输入框的内容赋值需要修改value属性，不是修改innerHTML

修正后的JavaScript代码

<script> 
let buttonDetail = document.querySelectorAll('.view-detail');
buttonDetail.forEach(function(_el)  {
  _el.addEventListener('click', function(e) {
    jQuery('#modalUpdate').modal('show');
    let row = document.querySelector(`[data-row-id="${e.target.dataset.id}"]`);
    // 提取表格单元格的文本内容
    let nama = row.querySelector('td:nth-child(2)').textContent.trim();
    let alamat = row.querySelector('td:nth-child(3)').textContent.trim();
    
    // 直接给模态框的输入框赋值
    document.getElementById('namaToko').value = nama;
    document.getElementById('alamatToko').value = alamat;
  });
});
</script>

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