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

Question

这是我迄今为止所做的代码。我想要超链接这些网站，以便当数组以HTML形式输出时，这些网站将是可点击的，并链接到它们各自的网页。出于某种原因，type =“text/javascript”中的代码与language =“JavaScript”中的代码不同，我不知道为什么。如果有人可以提供语言=“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>

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