[Java] JavaScript对表格中数据进行排序问题

本帖最后由雪＆苹果fan 于 2015-11-27 20:17 编辑

在做刘悦东老师的javascript作业时，遇到了这个问题，一共有三个疑问，希望高手能给出详细解答，跪谢。代码和问题如下
<!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: #0099FF 1px solid;
         border-collapse: collapse;
         width: 600px;
      }

      table td {
         border: #0099FF 1px solid;
         text-align: center;
      }

      #age:link, #age.visited {
         color: #000000;
      }
</style>

<script type="text/javascript">
      function sortAge() {
         //疑问1：为什么不能直接创建new Array(7)，直接指定长度（至少在该程序中指定长度，程序就没有结果）
         var trArray = new Array();
         var trs = document.getElementsByTagName("tr");
         for (var i = 1; i < trs.length; i++) {
            trArray[i - 1] = trs;
         }

         for (var i = 0; i < trArray.length - 1; i++) {
            for (var j = 1; j < trArray.length - i; j++) {
                  //疑问2：为什么不能用trArray[j - 1].getElementsByTagName("td")[1].text取到年龄的值？
                  // 什么时候用text，什么时候用innerHTML，什么时候用value？
                  var age1 = +trArray[j - 1].getElementsByTagName("td")[1].innerHTML;
                  var age2 = +trArray[j].getElementsByTagName("td")[1].innerHTML;
                  if (age1 > age2) {
                     var temp = trArray[j - 1];
                     trArray[j - 1] = trArray[j];
                     trArray[j] = temp;
                  }
            }
         }

         trArray.unshift(trs[0]);
         var table = document.getElementsByTagName("table")[0];

         //疑问3：为什么原来表中的数据不用删除？添加后老数据会消失？
//          for (var i = 0; i < trs.length; i++) {
//             table.removeChild(trs);
//          }

         for (var i = 0; i < trArray.length; i++) {
            table.appendChild(trArray);
         }
      }
</script>
</head>

<body>
<table align="center">
<tr>
      <th>姓名</th>
      <th><a href="javascript:void(0)" onclick="sortAge()">年龄</a></th>
      <th>地址</th>
</tr>
<tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
</tr>
<tr>
      <td>李四</td>
      <td>23</td>
      <td>天津</td>
</tr>
<tr>
      <td>王八</td>
      <td>122</td>
      <td>上海</td>
</tr>
<tr>
      <td>王五</td>
      <td>28</td>
      <td>上海</td>
</tr>
<tr>
      <td>赵六</td>
      <td>26</td>
      <td>南京</td>
</tr>
<tr>
      <td>周七</td>
      <td>22</td>

      <td>上海</td>
</tr>

</table>
</body>
</html>

jymheima · jymheima

排版好一点吧看着好困难啊

帐号		自动登录	找回密码
密码			加入黑马

[Java] JavaScript对表格中数据进行排序问题

1 个回复