JSファイルを使用してテーブルにリンクを追加する方法

テーブルを稼働していますが、テーブルに有効な「malito」リンクを追加できません。見つける。私は何かを試しましたJSファイルを使用してテーブルにリンクを追加する方法

しかし、それは動作しません。

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ファイル

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

これは私のテーブルには、私はむしろかなりたくさんのwindow.onloadに装着するよりも、自身や自己呼び出しに関数を呼び出します

Information 

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

出典

2017-03-03 Work Man

修正済みですが変更はありません –

どのように見えるかですその他の意図しない理由。

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>

出典

2017-03-03 18:03:20 Rikin

あなたはのmailtoを追加する必要がありますのようなメールのリンク内部タグ：

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

フィドルhere

出典

2017-03-03 18:05:28 Janne

には、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を使う必要があります。

出典

2017-03-03 18:09:26 JDB

JSファイルを使用してテーブルにリンクを追加する方法

答えて

関連する問題