Question

我正在制作一个表，使用json文件在其中插入数据。现在我的json文件有一些链接。我希望这些链接不要直接插入表格中，而应该将链接插入表格中某一列的按钮中，这样当我单击该按钮时，我将被重定向到该链接。

这是我的html代码：

set

这是json文件：

<body>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table 
From JSON" />
<p id="showData"></p>
<script type="text/javascript" src="csvjson.json"></script>
<script>
function CreateTableFromJSON() {


    // EXTRACT VALUE FOR HTML HEADER. 
    // ('Book ID', 'Book Name', 'Category' and 'Price')
    var col = [];
    for (var i = 0; i < links.length; i++) {
        for (var key in links[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }

    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

    // CREATE HTML 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 < links.length; i++) {

        tr = table.insertRow(-1);

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

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A 
    CONTAINER.
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
}
</script>

Answer 1

您可以检查属性名称以将其包装在 button 中，例如 anchor 标记：

var links=[{
"File": "1. Google",
"Direct Link": "https://www.google.com",
}];

function CreateTableFromJSON() {


    // EXTRACT VALUE FOR HTML HEADER. 
    // ('Book ID', 'Book Name', 'Category' and 'Price')
    var col = [];
    for (var i = 0; i < links.length; i++) {
        for (var key in links[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }

    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

    // CREATE HTML 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 < links.length; i++) {

        tr = table.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            if(col[j] == 'Direct Link')
              tabCell.innerHTML = `<a class=button href=${links[i][col[j]]}>${links[i][col[j]]}</a>`;
            else
              tabCell.innerHTML = links[i][col[j]];
        }
    }

    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
}

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  cursor: pointer;
}

<input type="button" onclick="CreateTableFromJSON()" value="Create Table 
From JSON" />
<p id="showData"></p>

Answer 2

添加锚元素。将tabCell.innerHTML = links[i][col[j]];更改为tabCell.innerHTML = "<a href="+ links[0]["Direct Link"] +">" + links[0]["File"] + "</a>";

如何从json文件在表的按钮中插入链接

2 个答案: