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

这是我迄今为止所做的代码。我想要超链接这些网站，以便当数组以HTML形式输出时，这些网站将是可点击的，并链接到它们各自的网页。是否可以在HTML中的表格中输出JavaScript数组元素作为超链接？

的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>

来源

2017-08-17 Andrew C

怎么样，而不是在设置'text'的细胞，创建一个链接元素和追加，与其 – musefan

是的，这是绝对有可能。你知道如何从单个字符串中创建单个链接（'A'元素）吗？ –

这里是你问什么，只是创建一个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>

编辑：

这里是只有一列，挑一个你PREF版本：

<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>

来源

2017-08-17 15:44:25 Nolyurn

我使用上面提供的代码，但是我收到一条错误消息：对象不支持属性或方法'追加'是指cell2。追加（链接） –

如果它不起作用，请使用appendChild而不是追加，我在Google Chrome上测试了我的代码。 – Nolyurn

你想创建一个 “锚” 元素，使之成为可点击的链接。

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

我不知道你为什么要两个单独列这个，像上面会从beds一个“项目”阵列，并从中可读，可点击的链接。

来源

2017-08-17 15:43:26 BooDooPerson

你应该创建一个链接元素，它添加到细胞，而不仅仅是文字：

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

来源

2017-08-17 15:43:30 musefan

谢谢你，这段代码很棒！一个简单的问题：如果我在第0列和第1列之间有更多元素会怎么样？举例来说，我有关于床垫的其他属性，如尺寸，重量，厚度等。我如何在输出URL之前在表格中输出所有这些属性？ –

此外，我无法获得textContent输出表中的任何信息（空白单元格），但是，超链接正在工作。 –

@AndrewC：如果你有更多的列，那么你只需为每个列添加一个新的单元格，然后放入任何你想要的内容。你可以尝试'innerText'来代替：'link.innerText =“点击我”;'例如 – musefan

尝试。我假设项目[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); 
    });

来源

2017-08-17 15:52:54

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

来源

2017-08-17 15:54:02

首先，您需要在编写脚本之前将该表与特定的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>

来源

2017-08-17 16:02:09 liongrobert

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

回答

相关问题