Question

所以我已经启动并运行了我的表，但我无法在我的表中添加有效的“malito”链接，并且没有任何可以找到的好例子。我尝试过像

这样的东西

"<td>" + <a href = "users[i].email"> + </a> + "</td>" +

但它不起作用=。

var users = [
{first_name: "Kaitlin", last_name: "Burns", age: 23, email: "kburns99753@usermail.com"},
{first_name: "Joshua", last_name: "Feir", age: 31, email: "josh319726@usermail.com"},
{first_name: "Stephen", last_name: "Shaw", age: 28, email: "steve.shaw47628@usermail.com"},
{first_name: "Timothy", last_name: "McAlpine", age: 37, email: "Timbo72469@usermail.com"},
{first_name: "Sarah", last_name: "Connor", age: 19, email: "SarahC6320@usermail.com"}
];

window.onload = function()
{
var tableContainer = document.querySelector("#outputTable");

var table = "";
for (var i = 0; i < users.length; i++)
{
    table += "<tr>" +
                "<td>" + users[i].first_name + "</td>" +
                "<td>" + users[i].last_name + "</td>" +
                "<td>" + users[i].age + "</td>" +
                //Email link here
            "</tr>";
}
tableContainer.innerHTML += table;

};

HTML文件

<h3> Information </h3>
        <head>
            <script src = "js/table.js"></script>
        </head>
        <body>
            <table id = "outputTable" border = "1">
            <thead style = "background-color: orangered;">
                <tr>
                    <th> First Name </th>
                    <th> Last Name </th>
                    <th> Age </th>
                    <th> Email </th>
                </tr>
            </table>
        </body>

这就是我的表格外观

Information

First Name  Last Name   Age   Email
Kaitlin     Burns       23
Joshua      Feir        31
Stephen     Shaw        28
Timothy     McAlpine    37
Sarah       Connor      19

Answer 1

您需要在邮件链接中添加mailto：标记，例如：

<div>
  <a href="mailto:foo@bar.com">send email</a>
</div>

小提琴here

Answer 2

我宁愿单独调用该函数或自行调用，而不是因为许多其他意外原因而附加到window.onload。

var users = [
{first_name: "Kaitlin", last_name: "Burns", age: 23, email: "kburns99753@usermail.com"},
{first_name: "Joshua", last_name: "Feir", age: 31, email: "josh319726@usermail.com"},
{first_name: "Stephen", last_name: "Shaw", age: 28, email: "steve.shaw47628@usermail.com"},
{first_name: "Timothy", last_name: "McAlpine", age: 37, email: "Timbo72469@usermail.com"},
{first_name: "Sarah", last_name: "Connor", age: 19, email: "SarahC6320@usermail.com"}
];

window.onload = function() {
  var tableContainer = document.querySelector("#outputTable");

  var table = "";
  for (var i = 0; i < users.length; i++) {
    table += "<tr>" +
      "<td>" + users[i].first_name + "</td>" +
      "<td>" + users[i].last_name + "</td>" +
      "<td>" + users[i].age + "</td>" +
      '<td><a href="mailto:' + users[i].email + '"/></td>' +
      "</tr>";
  }
  tableContainer.innerHTML += table;

};

<body>
            <table id = "outputTable" border = "1">
            <thead style = "background-color: orangered;">
                <tr>
                    <th> First Name </th>
                    <th> Last Name </th>
                    <th> Age </th>
                    <th> Email </th>
                </tr>
            </thead>
            </table>
        </body>

Answer 3

您的JavaScript行不正确：

"<td><a href=\"mailto:" + users[i].email "\"></a></td>" +

您正在混合JavaScript和HTML，这对于初学者程序员来说非常好，但却相当混乱。您的HTML必须使用引号（"）完全包含在字符串中，但HTML 也使用引号。那么如何在字符串中添加引号？您可以使用反斜杠（\）来“escape”。

反斜杠告诉JavaScript以稍微不同的方式处理下一个字符。例如，\"表示“实际上不在此处结束字符串...我想要一个文字引号”。 \n表示“在此处添加换行符，因为实际的换行符会破坏我的代码”。

此外，URL必须是浏览器识别的内容。 “http：”告诉浏览器使用HTTP协议（参见What is a URL?）。但是，您没有链接到网页，而是想“链接”到电子邮件，因此您需要使用"mailto:" protocol。

如何通过JS文件添加到表的链接

3 个答案: