jquery的表格插件,选择显示列

git clone可以获取源码,选择显示列。
https://github.com/lingceng/jquery.column.picker



$("table#monthTable").pickout({
      picked:[0, 1, 2] 
 }); 




demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Columns Pick</title>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="../jquery.column.picker.js"></script>
    <script type="text/javascript"> 
       jQuery(function($) {
                      
          $("button#winter").click(function(e) {
              $("table#monthTable").pickout({
                  picked:[9, 10, 11] 
              });              
          });

          $("button#spring").click(function(e) {
              $("table#monthTable").pickout({
                  picked:[0, 1, 2] 
              });              
          });

          $("button#favorite").click(function(e) {
              $("table#monthTable").pickout({
                  picked:[5, 6, 7] 
              });              
          });
       });
    </script>
  </head>

  <body>
    <h1>pick columns</h1>
    <div>
            <button id="winter">winter</button>
            <button id="spring">spring</button>
            <button id="favorite">favorite</button>
    </div>
    <div>
    <table id="monthTable">
	    <thead>
              <tr>
               <th>January</th>
               <th>February</th>
               <th>March</th>
               <th>April</th>
               <th>May</th>
               <th>June</th>
               <th>July</th>
               <th>August</th>
               <th>Septempber</th>
               <th>October</th>
               <th>November</th>
               <th>December</th>
              </tr>
  	  </thead>
      
      <tbody>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
              </tr>
	    </tbody>
      </div>
    </table>
  </body>
</html>

你可能感兴趣的:(jquery,column)