2015年4月8日 星期三

jQuery Table中CheckBox全選

我想這功能應該被寫爛了
但我常遇到一個畫面有好幾個table
這樣每個都需要寫一次
這樣很麻煩程式碼也很長
            <table>
                <thead>
                    <tr class="active">
                        <th>
                            <label>
                                <input type="checkbox" class="selectAll" />全選</label>
                        </th>                       
                    </tr>
                </thead>
                <tbody>
                   <tr>
                      <td>
                          <input type="checkbox" />
                      </td>
                   <tr>
                   <tr>
                      <td>
                          <input type="checkbox" />
                      </td>
                   <tr>
                   <tr>
                      <td>
                          <input type="checkbox" />
                      </td>
                   <tr>
                   <tr>
                      <td>
                          <input type="checkbox" />
                      </td>
                   <tr>
                </tbody>
             </table>

計畫是抓到這個checkbox的父table再向下抓
closest這個語法可以查到指定的最上層
然後再用find向下找
程式依文字解讀就變下面
   $('.selectAll').change(function () {              
               $(this).closest('table').find('tbody tr td input[type="checkbox"]').prop('checked', $(this).prop('checked'));
   });
這樣只要checkbox class指定好不管多少table都能共用
參考來源
.closest() | jQuery API Documentation

2015年4月7日 星期二

jQuery Table合並儲存格

一早接到一個需合併儲存的功能 搜尋了一下找到一個與法簡單又相當好用的 jquery請參考jQuery : 分享合併Table的欄位 (RowSpan、ColSpan) 語法

 $(function () {
      $('.tbspan').rowspan(1);//第幾個欄位做合併 0開始           
      $('.tbspan').rowspan(4, 0); //(合並那一個,那一個欄位一樣)    
      $('.tbspan').colspan(3);//第幾列做合併 0開始
});
參考來源
jQuery colspan and rowspan table using cell break
jQuery : 分享合併Table的欄位 (RowSpan、ColSpan) 語法