Question

我已经为Web目录使用JS数组创建了一个表。我希望URL单元实际上是指向目录中另一个页面的链接。

这是创建表的功能：

<script>
function TableofStars()
{
  var Stars= [
    {
      "Name": "Orion",
      "Category": "Modern",
      "Main-Stars": "7",
      "Sub-Stars": "81",
      "Symbol": "The Hunter",
      "Area": "594",
      "B-Star": "Rigel",
      "URL": "http://set09103.napier.ac.uk:9111/constellations/Orion/"
    },
    {
      "Name": "Ursa Major",
      "Category": "Modern",
      "Main-Stars": "20",
      "Sub-Stars": "93",
      "Symbol": "The Great Bear",
      "Area": "1280",
      "B-Star": "UMa",
      "URL": "http://set09103.napier.ac.uk:9111/constellations/Ursa_Major/"
    },
    {
      "Name": "Ursa Major",
      "Category": "Modern",
      "Main-Stars": "20",
      "Sub-Stars": "93",
      "Symbol": "The Great Bear",
      "Area": "1280",
      "B-Star": "UMa",
      "URL": "http://set09103.napier.ac.uk:9111/constellations/Ursa_Major/"
    }
  ]
var col = [];
  for (var i=0; i < Stars.length; i++){
    for (var key in Stars[i]){
      if (col.indexOf(key) === -1)
      {
        col.push(key);
      }
    }
  }

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

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

var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}
</script>

这也是创建表的最佳方法吗？我从另一个堆栈溢出线程中获得了总体思路，但我可能以为这是实现此目标的最佳方法而错了。

让我知道是否需要更多信息，谢谢。

Answer 1

您可以使用该表格格式。

此代码将为您提供指向对象中提供的URL的链接。

附加部分仅检查放入单元格中的值是否是对象中的第8个项目，如果是，则将<a>标记的href设置为url。如果您的数据结构发生更改，则可以更改此设置，并且显然可以更改链接的文本。最后，我调用该函数只是为了让事情顺利进行。

function TableofStars()
{
  var Stars= [
    {
      "Name": "Orion",
      "Category": "Modern",
      "Main-Stars": "7",
      "Sub-Stars": "81",
      "Symbol": "The Hunter",
      "Area": "594",
      "B-Star": "Rigel",
      "URL": "http://set09103.napier.ac.uk:9111/constellations/Orion/"
    },
    {
      "Name": "Ursa Major",
      "Category": "Modern",
      "Main-Stars": "20",
      "Sub-Stars": "93",
      "Symbol": "The Great Bear",
      "Area": "1280",
      "B-Star": "UMa",
      "URL": "http://set09103.napier.ac.uk:9111/constellations/Ursa_Major/"
    },
    {
      "Name": "Ursa Major",
      "Category": "Modern",
      "Main-Stars": "20",
      "Sub-Stars": "93",
      "Symbol": "The Great Bear",
      "Area": "1280",
      "B-Star": "UMa",
      "URL": "http://set09103.napier.ac.uk:9111/constellations/Ursa_Major/"
    }
  ]
var col = [];
  for (var i=0; i < Stars.length; i++){
    for (var key in Stars[i]){
      if (col.indexOf(key) === -1)
      {
        col.push(key);
      }
    }
  }

var table = document.createElement("table");
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++)
{
  var th = document.createElement("th");
  th.innerHTML = col[i];
  tr.appendChild(th);
}

for (var i = 0; i < Stars.length; i++)
{
  tr = table.insertRow(-1);
  for (var j = 0; j < col.length; j++)
  {
    if (j === 7) {
    var tabCell = tr.insertCell(-1);
    tabCell.innerHTML = `<a href="${Stars[i][col[j]]}">Link</a>`

    } else {
    var tabCell = tr.insertCell(-1);
    tabCell.innerHTML = Stars[i][col[j]];
    }
  }
}


var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
}

TableofStars();

<div id="showData"></div>

Answer 2

替代方案；

function TableofStars() {
  var Stars = [
    {
      Name: "Orion",
      Category: "Modern",
      "Main-Stars": "7",
      "Sub-Stars": "81",
      Symbol: "The Hunter",
      Area: "594",
      "B-Star": "Rigel",
      URL: "http://set09103.napier.ac.uk:9111/constellations/Orion/"
    },
    {
      Name: "Ursa Major",
      Category: "Modern",
      "Main-Stars": "20",
      "Sub-Stars": "93",
      Symbol: "The Great Bear",
      Area: "1280",
      "B-Star": "UMa",
      URL: "http://set09103.napier.ac.uk:9111/constellations/Ursa_Major/"
    },
    {
      Name: "Ursa Major",
      Category: "Modern",
      "Main-Stars": "20",
      "Sub-Stars": "93",
      Symbol: "The Great Bear",
      Area: "1280",
      "B-Star": "UMa",
      URL: "http://set09103.napier.ac.uk:9111/constellations/Ursa_Major/"
    }
  ];

  let table = document.createElement("table");
  //Create Column
  let colHeading = [];
  Stars.forEach((item, i) => {
    Object.keys(item).map((key, i) => {
      if (colHeading.indexOf(key) === -1) {
        colHeading.push(key);
      }
    });
  });

  //Create Heading
  let tr = table.insertRow(-1);
  colHeading.map((item, i) => {
    let th = document.createElement("th");
    th.innerHTML = item;
    tr.appendChild(th);
  });

  //Create Cell
  Stars.map((item, i) => {
    let tr = table.insertRow(-1);
    colHeading.map((el, i) => {
      let tabCell = tr.insertCell(-1);
      if (el === "URL") {
        tabCell.innerHTML = `<a href=${item[el]}>${item[el]}</a>`;
      } else {
        tabCell.innerHTML = item[el];
      }
    });
  });

  let divContainer = document.getElementById("app");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
}

将链接附加到HTML中用JS数组创建的表的“ URL”单元格

2 个答案: