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

这是我到目前为止所做的代码。我想超链接网站，以便当数组以 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>

这是你问的，只需创建一个包含内容的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>

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

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

我不确定你为什么要为此设置两个单独的列，像上面这样的东西会从beds中获取一个"items"数组，并从中创建一个可读、可点击的链接。

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

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

这是一个工作示例

他的是@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);
});

试试这个。我假设项目[0]将返回名称，项目[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);
});

首先，您需要在编写脚本之前放置具有特定 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>

相关内容

最新更新

热门标签：