CODEWITHSUNDEEP
javascripthtml
Work Man
Work Man

Reputation: 15

How to add a link to a table via JS file

So I've got my table up and running but I am unable to add a valid "malito" link to my table and there aren't any good examples that I can find. I've tried something like 

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

but it doesn't work =. 

var users = [
{first_name: "Kaitlin", last_name: "Burns", age: 23, email: "[email protected]"},
{first_name: "Joshua", last_name: "Feir", age: 31, email: "[email protected]"},
{first_name: "Stephen", last_name: "Shaw", age: 28, email: "[email protected]"},
{first_name: "Timothy", last_name: "McAlpine", age: 37, email: "[email protected]"},
{first_name: "Sarah", last_name: "Connor", age: 19, email: "[email protected]"}
];

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 FILE

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

This is how my table looks

Information

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

Upvotes: 0

Views: 73

Answers (3)

JDB
JDB

Reputation: 25810

Your line of JavaScript is incorrect:

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

You are mixing JavaScript and HTML, which is perfectly fine but rather confusing for beginner programmers. Your HTML must be completely enclosed within a string by using quotation marks ("), but HTML also uses quotation marks. So how do you add quotation marks to a string? You "escape" it by using a backslash (\).

A backslash tells JavaScript to treat the next character a little differently. For example, \" means "don't actually end the string here... I want a literal quotation mark". \n means "add a newline character here, because an actual newline would break my code".

Also, the URL must be something that the browser recognizes. "http:" tells the browser to use the HTTP protocol (see What is a URL?). But you aren't linking to a webpage, you want to "link" to an email, so you need to use the "mailto:" protocol.

Upvotes: 0

Rikin
Rikin

Reputation: 5473

I would rather call the function on its own or self-invoke rather than attaching to window.onload for lot of other unintended reasons.

var users = [
{first_name: "Kaitlin", last_name: "Burns", age: 23, email: "[email protected]"},
{first_name: "Joshua", last_name: "Feir", age: 31, email: "[email protected]"},
{first_name: "Stephen", last_name: "Shaw", age: 28, email: "[email protected]"},
{first_name: "Timothy", last_name: "McAlpine", age: 37, email: "[email protected]"},
{first_name: "Sarah", last_name: "Connor", age: 19, email: "[email protected]"}
];

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>

Upvotes: 0

Janne
Janne

Reputation: 1725

You need to add mailto: tag inside mail link like:

<div>
  <a href="mailto:[email protected]">send email</a>
</div>

Fiddle here

Upvotes: 1

Related Questions