点击排序的table实验

来源：互联网发布：起点中文网知乎编辑：程序博客网时间：2024/06/06 12:58

index.html

=============================

       <!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>mo ni test</title>
</head>
<link href="css/test.css" type="text/css" rel="stylesheet" />
<script text="text/javascript" src="js/jquery-1.9.0.js"></script>
<script text="text/javascript" src="js/test.js"></script>
<body>
<div id="container">
          <table id="header">
          <thead>
            <tr>
              <th class="asc"><a >id</a></th>
              <th class="asc"><a>name</a></th>
              <th id="ff" class="asc" > <a>remark</a></th>
            </tr>
          </thead>
          </table>
          <table id="content">
          <tr>
                <td>1</td><td>a</td><td>goog</td>
          </tr>
            <tr>
                <td>2</td><td>c</td><td>goog</td>
          </tr>
            <tr>
                <td>3</td><td>d</td><td>goog</td>
          </tr>
            <tr>
                <td>4</td><td>e</td><td>goog</td>
          </tr>
          </tr>
            <tr>
                <td>5</td><td>f</td><td>goog</td>
          </tr>
          </tr>
            <tr>
                <td>6</td><td>g</td><td>goog</td>
          </tr>
          </table>
</div>
   <div id="bt" style="width:400px;height:400px;background-color:blue;">
   <input id="b1" type="button" value="b1"/>
   <input id="b2" type="button" value="b2"/>
   </div>
   <input id="b3" type="button" value="show"/>
    <input id="b4" type="button" value="hide"/>
</body>
</html>

js/test.js

======================================

var arr=new Array();
arr.push("1-a-good");
arr.push("2-b-good");
arr.push("3-c-good");
arr.push("4-d-good");
arr.push("5-e-good");
arr.push("6-f-good");

$(document).ready(
function()
{
  $("#b3").click(function(){$("#bt").show();});
   $("#b4").click(function(){$("#bt").hide();});
   $("#b1").click(function(){alert("b1");});
   $("#b2").click(function(){alert("b2");});
   var d=$("input[type=checkbox]");
     alert(d.length);
     $("#header th").click(function(){
     var c=$(this).attr("class");
     var addC="asc";
     if("asc"==c)
     {
       addC="desc";
       $(this).removeClass().addClass(addC);
        $("#content").html("");
       $("#content").replaceWith(parse2html(desc_sort(arr)));
     }
     if("desc"==c)
     {
       addC="asc";
       $(this).removeClass().addClass(addC);
        $("#content").html("");
       $("#content").replaceWith(parse2html(asc_sort(arr)));
     }

  });
});

/*========================================*/
  function desc_sort(arr)
{
  return arr.sort().reverse();
}
function asc_sort(arr)
{
  return arr.sort();
}
function parse2html(arr)
{
  if(null==arr||arr.length<=0)
  {
   return "";
  }
  var temp;
  var temp_arr;
  var html="";
  for(var i=0;i<arr.length;i++)
  {
            temp=arr[i];
            temp_arr=temp.split('-');
            html+="<tr>";
            for(var j=0;j<temp_arr.length;j++)
            {
                 html+="<td>"+temp_arr[j]+"</td>";
            }
            html+="</tr>";
  }
  return html;
}
  /*========================================*/

css/test.css

===========================================

body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 12px;
width: 1000px;
height: 980px;
margin: 0 auto;
}
#container
{   margin-top: 150px;
width: 360px;
height: 220px;
}
#header
{
    border-collapse : separate;
    border-spacing :1px;
    height: 20px;
}
th
{
width: 120px;
height: 20px;
line-height: 20px;
text-align: center;
background-color: #CCC;
background: url("../images/sortUp.png") no-repeat 90% 50%;

}
#header tr a
{
text-decoration: none;
display: block;
color: #000000;
cursor: pointer;
}
#content
{
border-collapse : separate;
    border-spacing :1px;
}
tr
{
height: 20px;
}
td
{
width: 120px;
height: 20px;
line-height: 20px;
text-align: center;
background-color: #CCC;
}
.asc
{
   background: url("../images/sortUp.png") no-repeat 90% 50%;
   background-color: #CCC;
}
.desc
{
   background: url("../images/sortDown.png") no-repeat 90% 50%;
   background-color: #CCC;
}

images/

===================================

0 0