ایجاد جدول برای موضوعات مختلف
آموزش استفاده
- قبل از تگ <head/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.backgroundPosition.js" type="text/javascript" charset="utf-8"></script> <style type="text/css" media="screen"> tbody tr{ background: #fff url('bg-select.jpg') no-repeat scroll 200% 0px; } td{ border-bottom:1px solid #eee; padding:10px; } th{ background-color:#333; color:white; padding:15px 30px 15px 10px; font-weight:bold; } body{ font-family: Arial, "MS Trebuchet", sans-serif; direction:rtl; text-align:right; } table{ border:1px solid #bbb; } </style> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $('tbody tr') .css({backgroundPosition: '200% 0px'}) .hover(function(){ $(this).animate({backgroundPosition: '(0% 0px)'},700) }, function(){ $(this).animate({backgroundPosition: '(200% 0px)'}) }); }); </script>
- بعد از تگ <body>
<table border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th>عنوان 1</th> <th>عنوان 2</th> <th>عنوان 3</th> <th>عنوان 4</th> </tr> </thead> <tbody> <tr> <td>اطلاعات</td> <td>اطلاعات</td> <td>اطلاعات</td> <td>اطلاعات</td> </tr> <tr> <td>اطلاعات</td> <td>اطلاعات</td> <td>اطلاعات</td> <td>اطلاعات</td> </tr> <tr> <td>اطلاعات</td> <td>اطلاعات</td> <td>اطلاعات</td> <td>اطلاعات</td> </tr> <tr> <td>اطلاعات</td> <td>اطلاعات</td> <td>اطلاعات</td> <td>اطلاعات</td> </tr> <tr> <td>اطلاعات</td> <td>اطلاعات</td> <td>اطلاعات</td> <td>اطلاعات</td> </tr> </tbody> </table>
این جدول چه فرقی با نمونه عادی اون داره؟
سلام حسن جان
تفاوتش اینه که تو این جدول از متدهای (.css و .hover و .animate ) کاربردی jQuery استفاده شده .