表格列头设置排序功能

来源:互联网 发布:贪吃蛇c语言代码下载 编辑:程序博客网 时间:2024/06/06 06:23

1、首先在超文本中,><img src="up.gif" border=0>是动态的,是升序就显示up.gif,否则显示down.gif,并且下次可能就是col_2中显示这个图片了

<table ><th>

<td onclick="JavaScript:sortCol();" title="排序" nowrap><span id = col_1 > col_1</span><img src="up.gif" border=0></td> 

<td onclick="JavaScript:sortCol();" title="排序" nowrap><span id = col_2 > col_2</span></td> 

<td onclick="JavaScript:sortCol();" title="排序" nowrap><span id = col_3 > col_3</span></td> 

</th>

------</table>

2、function sortRows()
{
 var myObj = window.event.srcElement;
  var order = "ASC";
 if ( myObj .tagName.toLowerCase() != "td" )
 {
  myObj = myObj .parentNode;
 }
 if ( myObj .childNodes.length > 1 )
 {
    with(   myObj .childNodes(1) )
      {
          if ( tagName.toLowerCase() == "img"  &&  src = "up.gif" )
          {
              order = "DESC";
          }
     }
 }
 document.getElementsByName("sortField")[0].value = myObj .childNodes(0).id + " " + order;
  myForm.submit();
}

3、提交到服务器后,在服务器上产生1处的超文本!从而实现了排序并且显示一个小的可以向上向下的小三角符号!

 

原创粉丝点击