Прикрепить ссылку на ячейку «URL» таблицы, созданной с помощью массива JS в HTML

Question

Я создал таблицу, используя массив 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

альтернатива;

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);
}

Answer 2

Вы можете использовать этот формат таблицы, конечно.

Этот код даст вам ссылку на URL, указанный в объекте.

Дополнительная часть просто проверяет, является ли значение, помещаемое в ячейку, восьмым элементом объекта, и, если это так, устанавливает href тега <a> в 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>