黑马程序员技术交流社区

标题: javascript 对年龄进行排序，测试多个html页面总是报一样的... [打印本页]

作者: 秦兰之 时间: 2013-6-8 07:17
标题: javascript 对年龄进行排序，测试多个html页面总是报一样的...
本帖最后由秦兰之于 2013-6-21 04:34 编辑

完全按照毕老师的视频做出来的，不同的只是他用DW3，我用DW4。
好不容易浏览器可以测试了，测试多个html页面总是报一样的错，大同小异。
报错：69 行无法获取属性“0”的值: 对象为 null 或未定义?
还有为什么没有样式？
排序功能也没有。

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
table{
      border:#09F 1px solid;
      border-collapse:collapse;
      width:600px;
      }
table td,table th{
      border:#09F 1px solid;
      padding:10px;
      }
#age link,age visited{
      color:#000;
      }

</style>

<script type="text/javascript">

var b;
var arr=[];//定义临时容器，用于存储参与排序的行对象。
function sortTable()
{
      /*
      需求：对表格中的行按照年龄从小到到大进行排序。

      思路：
      1.参与排序的行对象很多，需要临时存储，定义一个容器。
      2.对临时数组进行指定数据的排序。
      3.将排序后的数组中的行对象，重新添加回表格中。

      */
      var tabNode=document.getElementsByTagName("table")[0];

      //arr

      var trs=tabNode.rows;

      for(var x=0; x<trs.length; x++)
      {
            arr[x-1]=trs[x];                                                                                              //遍历行对象的数组，再将数组中的元素重新存入一个新数组当中。
      }

      //alert(arr.length);

      mysort(arr);

      //使用布尔值操作，判断事件是用升序还是降序。
      if(b)
      {
            for(var x=0; x<arr.length; x++)                                                                               //打印列数组中角标为1的列集合中的文本内容。
            {
                     //alert(arr[x].cells[1].innerHTML);
                     //arr[x].parantNode.appendChild(arr[x]);

                     tabNode.ChildNode[0].appendChild(arr[x]);                                              //将表格的子节点对象添加到数组的子节点中。
                     b=false;                                                                                                             //将b的值设为false。

            }
      }
      else
      {
            for(var x=0; x<arr.length; x++)                                                                               //打印列数组中角标为1的列集合中的文本内容。
            {
                     //69 行无法获取属性“0”的值: 对象为 null 或未定义?
                     tabNode.ChildNode[0].appendChild(arr[x]);                                              //将表格的子节点对象添加到数组的子节点中。
                     b=true;

            }
      }

}

//给数组排序。
function mysort()
{
      for(var x=0; x<arr.length-1; x++)
      {
            for(var y=x+1; y<arr.length; y++)                                                             //y+1:获取的是行对象中角标为一的单元格对象。
            {

                     //arr[x].cells[1].innerHTML : 列数组中角标为1的列集合中的文本内容。
                     //文本内容默认情况下是用字符串进行排序的。
                     if(parseInt(arr[x].cells[1].innerHTML) > parseInt(arr[y].cells[1].innerHTML))
                     {
                              var temp=arr[x];
                              arr[x]=arr[y];
                              arr[y]=arr[x];
                     }
            }
      }

}

</script>

</head>

<body>


<table>
<tr>
      <th>姓名</th>
      <th><a id="age" href="javascript void(0)"/>年龄</th>
      <th>地址</th>
</tr>

<tr><td>张三</td>
         <td>23</td>
      <td>北京</td>
</tr>
   <tr><td>李四</td>
         <td>25</td>
      <td>天津</td>
</tr>
   <tr><td>王五</td>
         <td>29</td>
      <td>上海</td>
</tr>
   <tr><td>赵六</td>
         <td>25</td>
      <td>南京</td>
</tr>
   <tr><td>周期</td>
         <td>26</td>
      <td>广州</td>
</tr>
   <tr><td>孙八</td>
         <td>23</td>
      <td>重庆</td>
</tr>
   <tr><td>李九</td>
         <td>30</td>
      <td>北京</td>
</tr>
   <tr><td>冯十</td>
         <td>23</td>
      <td>大连</td>
</tr>
</table>

</body>
</html>

作者: Super_Class 时间: 2013-6-8 07:40
错误一：
href="javascript:void(0)"
错误而：没有添加事件
a 的属性中添加onclick="sortTable()"

错误三：
mysort(arr);你定义这个函数的时候是没有参数的

function mysort(arr)

如果还是不懂。你可以看看这个

复制代码

作者: 秦兰之 时间: 2013-6-8 07:59

Super_Class 发表于 2013-6-8 07:40
错误一：
href="javascript:void(0)"
错误而：没有添加事件

Array.prototype.sortt = sortt;
注释一下这句代码行不？不懂。

作者: Super_Class 时间: 2013-6-9 12:36

秦兰之发表于 2013-6-8 07:59
Array.prototype.sortt = sortt;
注释一下这句代码行不？不懂。

给一个已有的类型添加一个方法

作者: 袁梦希 时间: 2013-6-9 15:13
楼主你好如果帖子的问题已经解决，请把帖子的类型改为“已解决”。{:soso_e102:}

作者: 秦兰之 时间: 2013-6-21 04:35
虽然还是看不懂，不过服了。

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

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