ASP  实现单元格行顺序的改变
在传统的HTML语言中，当Table表格的单元格行被加载到html页面时，其顺序是不可改变的，但是我们可以使用DOM技术实现行的移动。本练习中使用javaScript语言调用DOM技术，实现行上移或下移的功能。
（1）创建一个命名为MobileTable.html的HTML页面。左键单击【文件】|【新建】命令，弹出【新建文档】对话框，在对话框的【文件类型】中选择【HTML】，【布局】中选择【无】，单击【创建】按钮。
（2）左键单击【文件】|【保存】命令，弹出另存为对话框。在对话框的【文件名】中输入MobileTable.html，【保存类型】的下拉列表框中选择“HTML Documents”，单击【保存(S)】按钮。
（3）向HTML文件中添加页面布局。添加表格，在表格中添加链接并把链接指向对应的javaScript事件。
<html>
<head><title>表格的移动</title>
<style type="text/css">
td{    text-align:center;font-size:12px;padding:3px;}
</style>
</head><body><center><h2>表格的移动</h2>
<table id="table1" bordercolor="#000000" width="200" border="1">
    <tbody><tr>
                <td width="25%">1</td><td width="25%">11</td>
                 
              <td width="25%"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></t
d>
              <td width="25%"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
          </tr> <tr>
                <td>2</td><td>22</td>
                <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
                <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
          </tr> <tr>
                <td>3</td><td>33</td>
                <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
                <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
          </tr><tr>
                <td>4</td><td>44</td>
                <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
                <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
          </tr><tr>
                <td>5</td><td>55</td>
                <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
                <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
          </tr></tbody></table></center></body></html>
（4）添加JavaScript代码，实现表格行或列的移动。
<script language="JavaScript" type="text/javascript">
<!--
function cleanWhitespace(element) {
      //遍历element的子结点
      for (var i = 0; i < element.childNodes.length; i++) {
              var node = element.childNodes[i];
              //判断是否是空白文本结点，如果是，则删除该结点
              if (deType == 3 && !/\S/.deValue))
              veChild(node);
      }
}
//获得表格对象
var _ElementById("table1");
cleanWhitespace(_table);
//使表格行上移，接收参数为链接对象
function moveUp(_a){
      //通过链接对象获取表格行的引用
      var _row=_a.parentNode.parentNode;
      //如果不是第一行，则与上一行交换顺序
      if(_row.previousSibling)swapNode(_row,_row.previousSibling);
}
//使表格行下移，接收参数为链接对象
function moveDown(_a){
      //通过链接对象获取表格行的引用
      var _row=_a.parentNode.parentNode;
      //如果不是最后一行，则与下一行交换顺序
      if(_Sibling)swapNode(_row,_Sibling);
}
//定义通用的函数交换两个结点的位置
function swapNode(node1,node2){
      //获取父结点
      var _parent=node1.parentNode;
      //获取两个结点的相对位置
      var _Sibling;
      var _Sibling;
      //将node2插入到原来node1的位置
      if(_t1)_parent.insertBefore(node2,_t1);
      else _parent.appendChild(node2);
      //将node1插入到原来node2的位置
javascript void 0 是什么意思
      if(_t2)_parent.insertBefore(node1,_t2);
      else _parent.appendChild(node1);
}
//-->
</script>
（5）执行上述代码，在浏览器中打开MobileTable.html文件，如图8-3所示。单击超链接【上移】和【上移】完成表格行的移动，结果如图8-4所示。
 
图8-3  显示表格              图8-4  表格的移动

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。