是否可以将 JavaScript 数组元素超链接到 HTML 表中？

Question

这是我到目前为止所做的代码。我想超链接这些网站，以便当数组以 HTML 表格形式输出时，这些网站将是可点击的并链接到它们各自的网页。出于某种原因，type="text/javascript" 中的代码与 language="JavaScript" 中的代码不同，我不知道为什么。如果有人可以提供 language="JavaScript" 的代码，将不胜感激！

HTML：

<table id="table">
  <tr id="tbody">
    <th>Mattress Type</th>
    <th>Link</th>
  </tr>
</table>

JAVASCRIPT：

<script language="JavaScript">

var table = document.getElementById("table");
var body = document.createElement("tbody");

var beds = new Array(3);
beds[0] = ["Spring Mattress", "King Size", "http://factorymattresstexas.com/specials/spring-air/"];
beds[1] = ["Rest Lumbar Support", "Queen Size", "http://factorymattresstexas.com/specials/beautyrest-lumbar-support"];
beds[2] = ["Beauty Rest", "Twin Size", "http://factorymattresstexas.com/specials/simmons-beautyrest/"];

table.appendChild(tbody);
beds.forEach(function(items) {
  var row = document.createElement("tr");
  items.forEach(function(item) {
    var cell = document.createElement("td");
    cell.textContent = item;
    row.appendChild(cell);
  });
  table.appendChild(row);
});
</script>

Answer 1

你快到了。你只需要继续添加子元素：

var table = document.getElementById("table");
var body = document.createElement("tbody");

// initialize an empty array
var beds = [];

// add bed objects to the array
beds.push({
  type: "Spring Mattress",
  size: "King Size",
  link: "http://factorymattresstexas.com/specials/spring-air/"
});
beds.push({
  type: "Rest Lumbar Support",
  size: "Queen Size",
  link: "http://factorymattresstexas.com/specials/beautyrest-lumbar-support"
});
beds.push({
  type: "Beauty Rest",
  size: "Twin Size",
  link: "http://factorymattresstexas.com/specials/simmons-beautyrest/"
});

table.appendChild(tbody);
beds.forEach(function(item) {
  var row = document.createElement("tr");

  // You were previously just dumping the whole array contents in a cell.  Most likely you want to have separate cells for each type of information.
  var type = document.createElement("td");
  type.textContent = item.type;

  var size = document.createElement("td");
  size.textContent = item.size;

  // Create the containing cell to hold the link
  var link_td = document.createElement("td");

  // Create the <a href="...">...</a> element
  var link = document.createElement("a");
  link.textContent = item.link;
  link.href = item.link

  // Add the link to the cell
  link_td.appendChild(link);

  // Add the cells to the row in the order you'd like to see them in
  row.appendChild(type);
  row.appendChild(size);
  row.appendChild(link);

  table.appendChild(row);
});

<table id="table">
  <tr id="tbody">
    <th>Mattress Type</th>
    <th>Size</th>
    <th>Link</th>
  </tr>
</table>

更新： 你的 bed 数组是一个字符串数组。我将其切换为使用一系列床对象。这允许您定义属性并按名称而不是按索引引用这些属性（即item.size 与item[1]）。这更干净，并且随着代码库的增长将更好地扩展。您可以使用要显示的其他属性来扩展床对象。