这个例子是上移下移按钮功能

最新推荐文章于 2021-02-05 00:47:12 发布

qf_hy

最新推荐文章于 2021-02-05 00:47:12 发布

阅读量601

点赞数

分类专栏： JSP 文章标签： XHTML HTML

JSP 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的HTML页面实现表格行上移和下移功能的方法。通过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=gb2312" />
<title>无标题文档</title>
</head>
<SCRIPT   LANGUAGE="JavaScript">   
  <!--   
  function   searchObjByTagName(obj,   tag)   
  {   
      while(obj!=null   &&   typeof(obj.tagName)   !=   "undefind")   
      {   
          if(obj.tagName   ==   tag.toUpperCase())   return(obj);   
          obj   =   obj.parentElement;   
      }   
      return   null;   
  }   
  function   mm(e,   n)   
  {   
      var   tab   =   searchObjByTagName(e,   "TABLE");   
      var   tr     =   searchObjByTagName(e,   "TR");   
      var   i   =   tr.rowIndex;   
      var   m   =   i+n>tab.rows.length-1?   tab.rows.length-1   :   i+n;   
      if(m==-1)   m=0;   
      tab.moveRow(i,   m);   
  }   
  //-->   
  </SCRIPT>
<body>
<form id="form1" name="form1" method="post" action="">
  <label></label>
  <table   border=1   width=400>   
      <tr>   
          <td>姓名</td>   
          <td>数学</td>   
          <td>历史</td>   
          <td>外语</td>   
          <td>总分</td>   
          <td> </td>   
      </tr>   
      <tr>   
          <td>张三</td>   
          <td>78</td>   
          <td>82</td>   
          <td>85</td>   
          <td>245</td>   
          <td><input   type=button   value="上移"   onclick="mm(this,   -1)">   
          <input   type=button   value="下移"   onclick="mm(this,   1)"></td>   
      </tr>   
      <tr>   
          <td>王二</td>   
          <td>78</td>   
          <td>92</td>   
          <td>95</td>   
          <td>265</td>   
          <td><input   type=button   value="上移"   onclick="mm(this,   -1)">   
          <input   type=button   value="下移"   onclick="mm(this,   1)"></td>   
      </tr>   
      <tr>   
          <td>李四</td>   
          <td>78</td>   
          <td>92</td>   
          <td>85</td>   
          <td>255</td>   
          <td><input   type=button   value="上移"   onclick="mm(this,   -1)">   
          <input   type=button   value="下移"   onclick="mm(this,   1)"></td>   
      </tr>   
  </table>   

</form>
</body>
</html>