将地址簿更改为表格

时间:2018-04-19 06:46:23

标签: javascript html css

在我运行代码的那一刻,我得到了地址簿中的数据,但我想把它放在一张表中。我已经尝试添加文档写入来创建表,但我不知道如何将数据显示到表而不是地址簿中。我该怎么做呢?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Address Book</title>
  <style type="text/css">
      .ab {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    color: #993300;
    background-color: #CCFFCC;
    padding: 5px;
    height: 100px;
    width: 350px;
    border: thin dotted #993300;
    }
  </style>

  <script type="text/javascript">
    function addressBookItem (fname, lname, email) {
        this.fname= fname;
        this.lname = lname; 
        this.email = email;
    }
    var x = document.createElement("TABLE");
    addressBookItem.prototype.write = function() {
        // var adrbook = "<p class='ab' First Name: " + this.fname + "&ltbr /&gt";
        var adrbook = "<p class='ab'>First Name: " + this.fname + "<br />";
        adrbook += "Last Name: " + this.lname + "<br />";
        adrbook += "Email Address: " + this.email + "</p>";

        document.write(adrbook);
    }

</script>
</head>
<body>
    <script type="text/javascript">
        var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com');
        var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net');
        document.write("<table border=\"2\"><tr><th>First Name</th><th>Last Name</th><th>Email Address</th></tr>");
        aB1.write();
        aB2.write();
        document.write("</table");
    </script>
</body>
</html>

3 个答案:

答案 0 :(得分:1)

    function addressBookItem (fname, lname, email) {
        this.fname= fname;
        this.lname = lname; 
        this.email = email;
    }
    var x = document.createElement("TABLE");
    addressBookItem.prototype.write = function() {
    
        var adrbook = "<tr><td>"+ this.fname + "</td>";
        adrbook += "<td>" + this.lname + "</td>";
        adrbook += "<td>" + this.email + "</td></tr>";

        document.write(adrbook);
    }

        var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com');
        var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net');
        document.write("<table border=\"2\"><tr><th class='ab'>First Name</th><th class='ab'>Last Name</th><th class='ab'>Email Address</th></tr>");
        aB1.write();
        aB2.write();
        document.write("</table");
    
.ab {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    color: #993300;
    background-color: #CCFFCC;
    padding: 3px;
    height: 30px;
    width: 350px;
    border: thin dotted #993300;
    }
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Address Book</title>
  </head>
<body>



</body>
</html>

答案 1 :(得分:0)

您是否尝试过HTML表格?

var adrbook = "<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th> 
    <th>Email</th>
  </tr>
  <tr>
    <td>" + this.fname +" </td>
    <td>" + this.lname + "</td> 
    <td>" + this.email + "</td>
  </tr>
</table>"

如果这是你想要达到的目标,我不会知道,但它可能是一个解决方案。

答案 2 :(得分:0)

&#13;
&#13;
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Address Book</title>
  <style type="text/css">
      .ab {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    color: #993300;
    background-color: #CCFFCC;
    padding: 5px;
    height: 100px;
    width: 350px;
    border: thin dotted #993300;
    }
  </style>

  <script type="text/javascript">
    function addressBookItem (fname, lname, email) {
        this.fname= fname;
        this.lname = lname; 
        this.email = email;
    }
    var x = document.createElement("TABLE");
    addressBookItem.prototype.write = function() {
        // var adrbook = "<p class='ab' First Name: " + this.fname + "&ltbr /&gt";
        var adrbook = "<tr><td>" + this.fname + "</td>";
        adrbook += "<td>" + this.lname + "</td>";
        adrbook += "<td>" + this.email + "</td></tr>";

        document.write(adrbook);
    }

</script>
</head>
<body>
    <script type="text/javascript">
        var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams@gmail.com');
        var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s@earthlink.net');
        document.write("<table border=\"2\"><tr><th>First Name</th><th>Last Name</th><th>Email Address</th></tr>");
        aB1.write();
        aB2.write();
        document.write("</table");
    </script>
</body>
</html>
&#13;
&#13;
&#13;