Question

这是我到目前为止所做的代码。我想超链接网站，以便当数组作为HTML表格输出时，网站将是可点击的，并链接到他们各自的网页。

JavaScript的：

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

HTML：

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

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




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

Answer 1

您需要创建一个“锚点”元素，使其成为可点击的链接。

    var hyperlink = document.createElement("a");
    hyperlink.textContent = items[0];
    hyperlink.href = items[1];

我不确定为什么你需要两个单独的列，如上所述将从beds获取一个“items”数组，并从中创建一个可读的，可点击的链接。

Answer 2

您应该创建一个链接元素并将其附加到单元格，而不仅仅是文本：

beds.forEach(function(item) {
  var row = document.createElement("tr");
  var cell = document.createElement("td");
  var cell2 = document.createElement("td");
  var link = document.createElement("a");

  cell.textContent = item[0];
  link.href = item[1];
  link.textContent = "click me";

  cell2.appendChild(link);
  row.appendChild(cell);
  row.appendChild(cell2);
  table.appendChild(row);
});

Here is a working example

Answer 3

以下是您提出的问题，只需创建包含内容的a标记并修改其href属性。

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

    <script type="text/javascript">
    var table = document.getElementById("table");
    var body = document.createElement("tbody");

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

    table.appendChild(tbody);
    beds.forEach(function(items) {
        var row = document.createElement("tr");
        var cell1 = document.createElement("td");
        cell1.textContent = items[0];
        row.appendChild(cell1);

        var cell2 = document.createElement("td");
        var link = document.createElement("a");
        link.text = items[1]
        link.href = items[1]
        cell2.append(link)

        row.appendChild(cell2);

        table.appendChild(row);
    });

    </script>

  </body>
</html>

编辑：

这是一个只有一列的版本，选择你喜欢的那个：

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

    <script type="text/javascript">
    var table = document.getElementById("table");
    var body = document.createElement("tbody");

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

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

        var cell = document.createElement("td");

        var link = document.createElement("a");
        link.text = items[0];
        link.href = items[1]

        cell.append(link);

        row.appendChild(cell)

        table.appendChild(row);
    });

    </script>
  </body>
</html>

Answer 4

试试这个。我假设item [0]将返回名称，而item [1]将返回链接

  items.forEach(function(item) {
   var table = '<tr id="tbody"><th>"' + item[0] + '</th>'
   '<th><a href="'+item[1]+'">Link</a></th>'
   '</tr>';
    table.appendChild(table);
  });

Answer 5

他是@BooDooPerson回答的编辑。

beds.forEach(function(items) {
        var row = document.createElement("tr");

        items.forEach(function(item) {
            var cell = document.createElement("td"),
                   hyperlink = document.createElement("a");

             hyperlink.textContent = items[0];
             hyperlink.href = items[1];;
             cell.textContent = item;
             row.appendChild(cell);
        });

        table.appendChild(row);
    });

Answer 6

首先，您需要在编写脚本之前将表格与特定ID放在一起。因为在搜索之前你必须首先介绍这个ID。

这是我的版本，希望我没有太多改变。

<table id="table"></table>

<script>
var table = document.getElementById("table");

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

var addHTML = `
              <tr id="tbody">
                <th>Mattress Type</th>
                <th>Link</th>
              </tr>
              `;
beds.forEach(function(items) {
    addHTML += `
              <tr>
                <td>${items[0]}</td>
                <td><a href="${items[1]}">${items[1]}</a></td>
              </tr>
              `;
});
table.insertAdjacentHTML('beforeend',addHTML);
</script>

是否可以将JavaScript数组元素作为HTML中的表格中的超链接输出？

6 个答案: