将html表格中的单元格从简单文本更改为超链接答案

【问题标题】：Changing cell in html table from simple text to hyperlink将html表格中的单元格从简单文本更改为超链接
【发布时间】：2020-09-24 12:12:25
【问题描述】：

我正在做一个简单的自我项目，以便在表格中显示 JSON 数组。该表包含：“进程名”、“文件名”、“链接”和一个名为“已通过”的布尔标志。主要问题是我想将链接下的单元格更改为 hyperlink 并且可以按下并引导我进入其他路径。

当前表状态：

附加 HTML & JS 代码：

<!DOCTYPE html>
<html>
<head>
    <title>test report</title>
    <style>
        th, td, p, input, h3 {
            font:15px 'Segoe UI';
        }
        table, th, td {
            border: solid 1px #ddd;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <p id='showData'></p>
    
</body>

<script>

tableFromJson();

    function tableFromJson() {
        // the json data. (you can change the values for output.)
        var myFiles = 
[
  {
    "process_name":"Process1",
    "file_name":"file1",
    "link":"/compared_text/Process1/file1.html",
    is_passed:true
  },
  {
    "process_name":"Process1",
    "file_name":"file2",
    "link":"/compared_text/Process1/file2.html",
    is_passed:true
  },
  {
    "process_name":"Process2",
    "file_name":"file1",
    "link":"/compared_text/Process2/file1.html",
    is_passed:true
  },
  {
    "process_name":"Process2",
    "file_name":"file2",
    "link":"/compared_text/Process2/file2.html",
    is_passed:true
  }
]

        var col = [];
        for (var i = 0; i < myFiles.length; i++) {
            for (var key in myFiles[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // Create a table.
        var table = document.createElement("table");

        // Create table header row using the extracted headers above.
        var tr = table.insertRow(-1);                   // table row.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // table header.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // add json data to the table as rows.
        for (var i = 0; i < myFiles.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myFiles[i][col[j]];
            }
        }

        // Now, add the newly created table with json data, to a container.
        var divShowData = document.getElementById('showData');
        divShowData.innerHTML = "";
        divShowData.appendChild(table);
        
    }
    
    

</script>
</html>

【问题讨论】：

标签： javascript java html json

【解决方案1】：

你可以创建这样的链接

我认为你应该用类似的东西替换tabCell.innerHTML = myFiles[i][col[j]];（当它是你要添加的链接时）：

var a = document.createElement('a');
a.title = "my title text";
a.href = "http://example.com";
tabCell.appencChild(a);

【讨论】：

【解决方案2】：

你可以试试这样的：

for (var i = 0; i < myFiles.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        if (j === 2) {
            tabCell.innerHTML = `<a href="${myFiles[i][col[j]]}">${myFiles[i][col[j]]}</a>"`;
        } else {
            tabCell.innerHTML = myFiles[i][col[j]];
        }
    }
}

它检查它是否是一个链接（在你的情况下链接是 J=2）并放入<a href="></a>

【讨论】：

【解决方案3】：

您可以按如下方式更改数据添加部分。

if(new String(myFiles[i][col[j]]).indexOf('.html')>-1){
                tabCell.innerHTML = '<a href="' + myFiles[i][col[j]] + '">Click For Details</a>';
            }else{
                tabCell.innerHTML = myFiles[i][col[j]];
            }

【讨论】：

【解决方案4】：

测试您正在写入的单元格是否在link 列中，并相应地调整您传递给innerHTML 的值。

for (var j = 0; j < col.length; j++) {
    var tabCell = tr.insertCell(-1);
    let content = myFiles[i][col[j]];
    tabCell.innerHTML = col[j] === 'link' ? 
        `<a href="${content}">${content}</a>` : content;
}

<!DOCTYPE html>
<html>
<head>
    <title>test report</title>
    <style>
        th, td, p, input, h3 {
            font:15px 'Segoe UI';
        }
        table, th, td {
            border: solid 1px #ddd;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <p id='showData'></p>
    
</body>

<script>

tableFromJson();

    function tableFromJson() {
        // the json data. (you can change the values for output.)
        var myFiles = 
[
  {
    "process_name":"Process1",
    "file_name":"file1",
    "link":"/compared_text/Process1/file1.html",
    is_passed:true
  },
  {
    "process_name":"Process1",
    "file_name":"file2",
    "link":"/compared_text/Process1/file2.html",
    is_passed:true
  },
  {
    "process_name":"Process2",
    "file_name":"file1",
    "link":"/compared_text/Process2/file1.html",
    is_passed:true
  },
  {
    "process_name":"Process2",
    "file_name":"file2",
    "link":"/compared_text/Process2/file2.html",
    is_passed:true
  }
]

        var col = [];
        for (var i = 0; i < myFiles.length; i++) {
            for (var key in myFiles[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // Create a table.
        var table = document.createElement("table");

        // Create table header row using the extracted headers above.
        var tr = table.insertRow(-1);                   // table row.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // table header.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // add json data to the table as rows.
        for (var i = 0; i < myFiles.length; i++) {

            tr = table.insertRow(-1);
            
            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                let content = myFiles[i][col[j]];
                tabCell.innerHTML = col[j] === 'link' ? `<a href="${content}">${content}</a>` : content;
            }
        }

        // Now, add the newly created table with json data, to a container.
        var divShowData = document.getElementById('showData');
        divShowData.innerHTML = "";
        divShowData.appendChild(table);
        
    }
    
    

</script>
</html>

【讨论】：

很高兴为您提供帮助，如果您能接受这个答案，那就太好了。