วันจันทร์ที่ 29 พฤศจิกายน พ.ศ. 2553

jquery ซ่อนแสดง show/hide column โดยใช้ checkbox 


<!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>jquery show hide column</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
 $(function(){
   var tb = $('#column_hidable');
   var cbp = $('#checkbox_panel');
   tb.find('tr:first > td').each(function(){
     var cb = $('<input type="checkbox" checked="checked" />').click(function(){
      var cbidx = cbp.find(':checkbox').index($(this));
      tb.find('tr').each(function(){
       $(this).find('td').eq(cbidx).toggle();
      });
     });
     cb.appendTo(cbp).after($(this).text()+'<br'+'/>');
   });
 });
</script>
</head>

<body>

 <?php
     $cols = array("Field 1","Field 2","Field 3","Field 4","Field 5");
 ?>
    <div id="checkbox_panel"></div>
    <table border="1" cellspacing="0" cellpadding="5" id="column_hidable">
      <tr bgcolor="#CC99FF">
        <?php foreach($cols as $col_name):?>
            <td><?php echo $col_name;?></td>
        <?php endforeach;?>
      </tr>
      <?php $i=0; while($i++<5):?>
      <tr>
        <?php foreach($cols as $col_name):?>
            <td><?php echo $col_name;?></td>
        <?php endforeach;?>
      </tr>
      <?php endwhile;?>
    </table>

</body>
</html>
เขียนโดย หนุ่ม ที่ 20:07
ป้ายกำกับ:

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)