黑马程序员技术交流社区

标题: 求救啊。。。。。 [打印本页]

作者: 黄敏文 时间: 2011-9-9 08:46
标题: 求救啊。。。。。
下面的代码主要是要实现添加用户的功能，不过在页面添加的时候只添加了用户这一列，其他列确没有效果，看了好久都没看出来哪里错了，才不得已把这一大段代码粘上来

[code=jscript]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
      <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            <title>添加用户</title>
      </head>
      <body>
            <center>
                     姓名:<input type="text" name="name" id="name">
                     email:<input type="text" name="email" id="email">
                     电话:<input type="text" name="phone" id="phone"><br><br>
                     <button id="addUser">添加</button>
                     <br>
                     <br>
                     <br>
                     <hr>

                     <table id="userTable" border="1" cellspacing="0" cellpadding="5">
                              <tr>
                                    <td>姓名</td>
                                    <td>email</td>
                                    <td>电话</td>
                                    <td> </td>
                              </tr>
                              <tr>
                                    <td>user_1</td>
                                    <td>email_1</td>
                                    <td>phone_1</td>
                                    <td><a href="deleteEmp?id=user_1">Delete</a></td>
                              </tr>
                              <tr>
                                    <td>user_2</td>
                                    <td>email_2</td>
                                    <td>phone_2</td>
                                    <td><a href="deleteEmp?id=user_2">Delete</a></td>
                              </tr>
                     </table>
            </center>
      </body>

      <script language="JavaScript">
            document.getElementById("addUser").onclick = function() {
                     //得到输入的值
                     var nameElement = document.getElementById("name").value;
//                      alert(nameElement);
                     var emailElement = document.getElementById("email").value;
//                      alert(emailElement);
                     var phoneElement = document.getElementById("phone").value;
//                      alert(phoneElement);

                     //创建td元素
                     var tdNameElement = document.createElement("td");
                     var tdNameTextElement = document.createTextNode(nameElement);
                     tdNameElement.appendChild(tdNameTextElement);
//                      alert(tdNameElement.firstChild.nodeValue)

                     var tdEmailElement = document.createElement("td");
                     var tdEmailTextElement = document.createTextNode(emailElement);
                     tdEmailElement.appendChild(tdEmailTextElement);
//                      alert(tdEmailElement.firstChild.nodeValue)

                     var tdPhoneElement = document.createElement("td");
                     var tdPhoneTextElement = document.createTextNode(phoneElement);
                     tdPhoneElement.appendChild(tdPhoneTextElement);
//                      alert(tdPhoneElement.firstChild.nodeValue)

                     var tdElement = document.createElement("td");
                     var tdAhrefElement = document.createElement("a");
                     tdAhrefElement.setAttribute("href", "deleteEmp?id=" + nameElement);
                     var deleteTextElement = document.createTextNode("Delete");
                     tdAhrefElement.appendChild(deleteTextElement);
                     tdElement.appendChild(tdAhrefElement);
//                      alert(tdElement.firstChild.firstChild.nodeValue)

                     //创建tr元素
                     var trElement = document.createElement("tr");

                     //将td加入tr
                     trElement.appendChild(tdNameElement);
                     tdElement.appendChild(tdEmailElement);
                     tdElement.appendChild(tdPhoneElement);
                     tdElement.appendChild(tdElement);

                     //获取table
                     var tableElement = document.getElementById("userTable");

                     //创建tbody
                     var tbodyElement = document.createElement("tbody");

                     //增加tr到tbody上
                     tbodyElement.appendChild(trElement);

                     //增加tbody到table
                     tableElement.appendChild(tbodyElement);

            }
      </script>
</html>[/code]

作者: 匿名 时间: 2011-9-9 22:03
你的问题出现在第78~82行：[code]//将td加入tr
trElement.appendChild(tdNameElement);
tdElement.appendChild(tdEmailElement);
tdElement.appendChild(tdPhoneElement);
tdElement.appendChild(tdElement); [/code]从上下文的语义以及你的注释来看，你这4行代码的作用都应当是把td元素放到tr中
但是在这4行代码中，只有第一行调用的才是trElement中的appendChild方法
而其他3行调用的都是tdElement中的appendChild方法
所以最后才会只有第一行代码中添加的列，也就是只有姓名一列被添加到了用户列表中
解决方法是只要把下面三行全都改成trElement.appendChild就可以了

代码如下：[code]//将td加入tr
trElement.appendChild(tdNameElement);
trElement.appendChild(tdEmailElement);
trElement.appendChild(tdPhoneElement);
trElement.appendChild(tdElement); [/code]

作者: 匿名 时间: 2011-9-9 22:10
标题: 回复沙发的帖子
我咋没看出来呢

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2