如何使用JavaScript在表格单元格内编写电子邮件地址？

Question

我目前正在尝试让我的代码显示电子邮件＆＃34; cadler@mpl.gov"用javascript然而我的代码没有显示文本。知道可能导致它的原因吗？

＆＃13;

＆＃13;

var userName = "cadler";
var emServer = "mpl.gov";
var emLink = username + "@" + emServer;
document.write("<a href='mailto:" + emLink + "'>");
document.write(emLink);
document.write("</a>");

＆＃13;

<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>E-Mail</th>
    </tr>
    <tr>
        <td>Catherine Adler<br />Library Director</td>
        <td>555-3100</td>
        <td></td>
</table>

＆＃13;

＆＃13;

＆＃13;

Javascript应该在空表格单元格中插入电子邮件地址。

Answer 1

首先，正如其他人所提到的，它应该是userName，而不是username。

其次，不要使用document.write。使用Element.innerHTML或创建一个文本节点以附加到元素，同时编辑href属性。

代码变为：

＆＃13;

＆＃13;

var userName = "cadler",
    emServer = "mpl.gov",
    emLink = userName + "@" + emServer;

document.getElementsByClassName("email")[0].innerHTML = "<a href='mailto:" + emLink + "'>"+emLink+"</a>";

＆＃13;

<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>E-Mail</th>
    </tr>
    <tr>
        <td>Catherine Adler<br />Library Director</td>               
        <td>555-3100</td>
        <td class="email"></td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

var userName = "cadler",
    emServer = "mpl.gov",
    emLink = userName + "@" + emServer,
    emTextNode = document.createTextNode(emLink),
    elem = document.getElementsByClassName("email")[0];

elem.setAttribute("href", "mailto:" + emLink);
elem.appendChild(emTextNode);

＆＃13;

<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>E-Mail</th>
    </tr>
    <tr>
        <td>Catherine Adler<br />Library Director</td>               
        <td>555-3100</td>
        <td class="email"></td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

正如其他人提到的，不要使用document.write。也就是说，如果你必须使用document.write，那么把代码放在td中：

<td class="email">
    <script>
        var userName = "cadler",
            emServer = "mpl.gov",
            emLink = userName + "@" + emServer;

        document.write("<a href='mailto:" + emLink + "'>");
        document.write(emLink);
        document.write("</a>");
    </script>
</td>

Answer 2

您在第三行有一个拼写错误：username而不是userName。您也没有将电子邮件添加到表格的列中。您可以使用span：

中的td元素执行此操作

        var userName = "cadler";
        var emServer = "mpl.gov";
        var emLink = userName + "@" + emServer;

        var email = document.getElementById("email");
        email.innerHTML = "<a href='mailto:" + emLink + "'>" + emLink + "</a>";

<table border="1" cellpadding="5" cellspacing="0">
            <tr>
               <th>Name</th>
               <th>Phone</th>
               <th>E-Mail</th>
            </tr>
            <tr>
               <td>Catherine Adler<br />Library Director</td>               
               <td>555-3100</td>
               <td><span id="email"></span></td>
           </tr>
 </table>

Answer 3

我看到的第一个问题是，您首先定义变量userName，然后将其称为username。你忘了把字母n弄清楚了！

修复此问题，电子邮件地址将显示在表格后面：

var userName = "cadler";
var emServer = "mpl.gov";
var emLink = userName + "@" + emServer;
document.write("<a href='mailto:" + emLink + "'>");
document.write(emLink);
document.write("</a>");

<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>E-Mail</th>
    </tr>
    <tr>
        <td>Catherine Adler<br />Library Director</td>
        <td>555-3100</td>
        <td></td>
</table>

要在空单元格中显示它，您需要进行一些调整：

var userName = "cadler";
var emServer = "mpl.gov";
var emLink = userName + "@" + emServer;
var email = "<a href='mailto:" + emLink + "'>" + emLink + "</a>";
document.querySelector('td:last-child').innerHTML = email;

<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>E-Mail</th>
    </tr>
    <tr>
        <td>Catherine Adler<br />Library Director</td>
        <td>555-3100</td>
        <td></td>
</table>

document.querySelector('td:last-child')选择最后一个td元素。更改其innerHTML允许您在该元素中添加值。

无论如何，你永远不应该使用document.write。多年来，它被认为是一种不好的做法。相反，请始终使用document.getElementById或document.querySelector之类的内容，并更改该元素的innerHTML。

Answer 4

您的变量名称userName中有一个类型。您可以将此值设置为空单元格。你没有定义任何id或类，选择它不会很干净，你可以做这样的事情：

＆＃13;

＆＃13;

                    var userName = "cadler";
                    var emServer = "mpl.gov";
                    var emLink = userName + "@" + emServer;
                    document.write("<a href='mailto:" + emLink + "'>");
                    document.write(emLink);
                    document.write("</a>");
                    var table = document.getElementsByTagName('table')[0]
                    var row = table.getElementsByTagName('tr')[1]
                    row.getElementsByTagName('td')[2].innerHTML = "<a href='mailto:" + emLink + "'>" + emLink + "</a>";

＆＃13;

<table border="1" cellpadding="5" cellspacing="0">
            <tr>
               <th>Name</th>
               <th>Phone</th>
               <th>E-Mail</th>
            </tr>

            <tr>
               <td>Catherine Adler<br />Library Director</td>               
               <td>555-3100</td>
               <td>
         
               </td>

＆＃13;

＆＃13;

＆＃13;

Answer 5

所有其他答案都使用innerHTML将<a>元素插入DOM。但是，有several reasons不使用它。

以下代码段提供了不含innerHTML的解决方案：

var userName = "cadler";
var emServer = "mpl.gov";
var emLink = userName + "@" + emServer;

// create a new <a> element and set the content and href attribute
var linkElement = document.createElement("a");
linkElement.href = "mailto:" + emLink;
linkElement.textContent = emLink;

// find the element with the ID "email-cell"
var td = document.getElementById("email-cell");
td.appendChild(linkElement);

<table border="1" cellpadding="5" cellspacing="0">
  <tr>
     <th>Name</th>
     <th>Phone</th>
     <th>E-Mail</th>
  </tr>

  <tr>
     <td>Catherine Adler<br />Library Director</td>               
     <td>555-3100</td>
     <td id="email-cell"></td> <!-- this cell will contain the link -->
  </tr>
</table>

在MDN上了解document.createElement和Node.prototype.appendChild。