如何为模态框表格的每行首列添加JavaScript链接？

要给表格每行的第一列添加链接，只需在遍历每一行单元格时，判断当前是否为第一列，然后为其创建<a>标签即可。修改后的完整代码如下：

document.getElementById("myBtn").addEventListener("click", function() {
var id = <?php echo json_encode($id); ?>; // 将PHP变量传递到JavaScript
var modal = document.getElementById("modalTablo"); // 定义模态窗口变量
var closeButton = document.getElementsByClassName("modal-tablo-close")[0];

if (id) { // 如果ID不为空
    fetch('ajax_table_data_fetch.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'id=' + id
    })
    .then(response => response.json())
    .then(data => {
        var table = document.getElementById("modalTabloTable");
        table.innerHTML = ""; // 清空表格
        if (data.length > 0) {
            var thead = table.createTHead();
            var row = thead.insertRow();
            Object.keys(data[0]).forEach(function(key) {
                var th = document.createElement("th");
                th.innerText = key;
                row.appendChild(th);
            });

            data.forEach(function(item) {
                var row = table.insertRow();
                // 修改为带索引的遍历，区分第一列
                Object.values(item).forEach(function(value, index) {
                    var cell = row.insertCell();
                    if (index === 0) {
                        // 创建链接元素，根据实际需求替换href目标地址
                        var link = document.createElement("a");
                        link.href = "/detail-page?id=" + value; // 示例链接，自行调整
                        link.innerText = value;
                        // 可选：添加样式优化链接显示
                        link.style.color = "#007bff";
                        link.style.textDecoration = "underline";
                        cell.appendChild(link);
                    } else {
                        cell.innerText = value;
                    }
                });
            });
        }
  
        modal.style.display = "block";
    })
})

核心修改说明： #

• 把原本的Object.values(item).forEach(function(value) { ... })改为带索引的遍历，通过index判断当前是否为第一列
• 第一列创建<a>标签，设置对应的href属性和显示文本后，插入到单元格中；其他列保持原有的文本插入逻辑
• 你可以根据业务需求，调整link.href的地址拼接规则，比如如果第一列是详情页ID，就替换成对应的详情页URL

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