jquery 表格操作2

最新推荐文章于 2019-11-24 16:22:13 发布

fonyer

最新推荐文章于 2019-11-24 16:22:13 发布

阅读量77

点赞数

本文链接：https://blog.csdn.net/fonyer/article/details/83119383

版权

jquery 表格操作2 - JQD - The future is in my

<!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>无标题文档</title>
<style type="text/css">
.theader{background:#CCCCCC}
.red{background:#FFD7D7;text-align:left}
.odd{background:#DBDCB1}
.even{background:#C7E2E2}
#content tr.highlight{
background:#ff6;
}
.clickable{
cursor:pointer;
}
#tooltip{
position:absolute;
z-index:2;
background:#efd;
border:1px solid #ccc;
padding:3px;
}
</style>
<script src="../jquery.js"/></script>
<script language="javascript">
jQuery(function(){
//$("table.striped tbody").each(function(){
  $(this).find("tr:th").addClass("red");
  $(this).find("tr:not(:has(th)):odd").addClass("odd");
  $(this).find("tr:not(:has(th)):even").addClass("even");
  $(this).find("tr:not(:has(th))").filter(function(index){
   return (index%6)<3;
  }).removeClass("even").addClass("odd");

  var positionTooltip = function(event){
   var tPosX = event.pageX;
   var tPosY = event.pageY+20;
   $tooltip.css({top:tPosY,left:tPosX})
  }

  var showTooltip = function(event){
   var authorName = $(this).text();
   var action = "Highlight";
   if($(this).parent().is('.highlight')){
    action = "Unhighlight";
   }
   $tooltip.text(action+' all articles by '+authorName).show();
   positionTooltip(event);
  }

  var hideTooltip = function(){
   $tooltip.hide();
  }

  var $authorCells = $("table.striped td:nth-child(3)");
  var $tooltip = $('<div id="tooltip"></div>').appendTo("body");
  $authorCells
  .addClass("clickable")
  .hover(showTooltip,hideTooltip)
  .mousemove(positionTooltip)
  .click(function(){
   var authorName = $(this).text();
   $authorCells.each(function(index){
  if(authorName == $(this).text()){
   $(this).parent().toggleClass("highlight");
  }else{
   $(this).parent().removeClass("highlight");
  }
   })
   //showTooltip.call(this,event);
  })
//})
})
jQuery(function(){
var collapseIcon = "1.gif";
var collapseText = "Collapse this section";
var expandIcon = "0.gif";
var expandText = "Expand this section";
$("table.striped tbody").each(function(){
  var $section = $(this);
  $("<img />").attr('src',collapseIcon)
  .attr("alt",collapseText)
  .prependTo($section.find('th'))
  .addClass("clickable")
  .click(function(){
   if($section.is(".collapsed")){
    $section.removeClass("collapsed").find("tr:not(:has(th))").fadeIn("fast");
    $(this).attr("src",collapseIcon).attr("alt",collapseText);
   }else{
    $section.addClass("collapsed").find("tr:not(:has(th))").fadeOut("fast");
    $(this).attr("src",expandIcon).attr("alt",expandText);
   }
  })
})
})
</script>
</head>
<body>
<table class="striped">
<thead>
<tr class="theader">
    <th>Date</th>
    <th>Headline</th>
    <th>Author</th>
    <th>Topic</th>
</tr>
</thead>
<tbody id="content">
   <tr>
     <th colspan="4">2008</th>
   </tr>
   <tr>
     <td>Sep 28</td>
     <td>jQuery,Microsoft,and Nokia</td>
     <td>John Resig</td>
     <td>third-party</td>
   </tr>
   <tr>
     <td>Sep 28</td>
     <td>jQuery,Microsoft,and Nokia</td>
     <td>John 01</td>
     <td>third-party</td>
   </tr>
   <tr>
     <td>Sep 28</td>
     <td>jQuery,Microsoft,and Nokia</td>
     <td>John 02</td>
     <td>third-party</td>
   </tr>
   <tr>
     <td>Sep 28</td>
     <td>jQuery,Microsoft,and Nokia</td>
     <td>John 03</td>
     <td>third-party</td>
   </tr>
   <tr>
     <td>Sep 28</td>
     <td>jQuery,Microsoft,and Nokia</td>
     <td>John Resig</td>
     <td>third-party</td>
   </tr>
   <tr>
     <th colspan="4">2007</th>
   </tr>
   <tr>
     <td>Sep 28</td>
     <td>jQuery,Microsoft,and Nokia</td>
     <td>John Resig</td>
     <td>third-party</td>
   </tr>
   <tr>
     <td>Sep 28</td>
     <td>jQuery,Microsoft,and Nokia</td>
     <td>John Resig</td>
     <td>third-party</td>
   </tr>
   <tr>
     <td>Sep 28</td>
     <td>jQuery,Microsoft,and Nokia</td>
     <td>John 02</td>
     <td>third-party</td>
   </tr>
   <tr>
     <td>Sep 28</td>
     <td>jQuery,Microsoft,and Nokia</td>
     <td>John 03</td>
     <td>third-party</td>
   </tr>
   <tr>
     <td>Sep 28</td>
     <td>jQuery,Microsoft,and Nokia</td>
     <td>John Resig</td>
     <td>third-party</td>
   </tr>
</tbody>
</table>
</body>
</html>