1. 爱易网页
  2. HTML教程
  3. JS控制HTMLDOM表格行下上移动

JS控制HTMLDOM表格行下上移动

日期：2014-05-17　 浏览次数：20773 次

JS控制HTMLDOM表格行上下移动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS控制HTMLDOM表格行上下移动</title>
<style type="text/css">
<!--
td  { text-align:center;font-size:12px;padding:3px;}

www.111cn.cn
-->
</style>
</head>
<body>
<table id="table1" bordercolor="#000000" width="200" border="1">
    <tbody>
        <tr>
            <td width="25%">1</td>
            <td width="25%">11</td>
   <!--使用javascript:void(0)是为了能够传递this参数到事件处理程序-->
            <td width="25%"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <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>
</body>
</html>

<script language="JavaScript" type="text/javascript">

相关资料更多>

  1. HTML5菜鸟路线图
  2. css文件如何不起作用
  3. 表单中的readonly与disable的差别
  4. 关于html5 canvas解决思路
  5. table没网格线
  6. 超级链接a的提示方式和翻开方式
  7. innserHTML 跟 pasteHTML的区别
  8. HTML字体标志及属性
  9. 惯用特殊符号HTML代码