Javascript在數據表上顯示「所有下拉列表」

-3

我創建了一個隱藏表格行（id="table-row-span"），它隱藏起來，直到通過點擊複選框（id="select_all"）觸發。此時會顯示先前隱藏的行，並顯示「此頁面上顯示的所有條目均已選中，請選擇此表中的所有條目。」Javascript在數據表上顯示「所有下拉列表」

我正在尋找一個腳本，當用戶點擊了保存箱中的「全部」條目時，每一行都會出現，並顯示爲勾選標記。屏幕截圖也顯示了。任何幫助將非常感謝。

Screenshot

來源

2016-09-26 Matt F.

下面是一個例子，我覺得這是一般的想法

http://output.jsbin.com/fuwole

<!doctype html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Select All</title> 
    <style> 
     table { 
     border-collapse: collapse; 
     width: 500px; 
     } 
     table, th, td { 
     border: 1px solid #444444; 
     } 
     #all_selected, #none_selected, #some_selected { 
     color: #0000ff; 
     } 
     #all_selected, #some_selected { 
     display: none; 
     } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script> 
    // @see http://stackoverflow.com/questions/39705478/javascript-for-show-all-dropdown-on-datatable/39708801#39708801 
    $(function() { 
     // the user checks the "check all" 
     $('#check_all').click(function() { 
     if($(this).prop('checked')) { 
      // check all rows 
      $('.data .checked').prop('checked', true); 
      // show the correct message 
      $('.message').hide(); 
      $('#all_selected').show(); 
     } 
     else { 
      // uncheck all rows 
      $('.data .checked').prop('checked', false); 
      $('.message').hide(); 
      $('#none_selected').show(); 
     } 
     }); 
     // the user checks a data checkbox 
     $('.data .checked').click(function() { 
     // count how many are checked 
     var rowsChecked = $('.data .checked:checked').length; 
     var totalRows = $('.data .checked').length; 
     if(rowsChecked == 0) { 
      $('.message').hide(); 
      $('#none_selected').show(); 
      $('#check_all').prop('checked', false); 
     } 
     else if(rowsChecked == totalRows) { 
      $('.message').hide(); 
      $('#all_selected').show(); 
      // let's also check the check all 
      $('#check_all').prop('checked', true); 
     } 
     else { 
      $('.message').hide(); 
      $('#some_selected').show(); 
      $('#check_all').prop('checked', false); 
     } 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <th style="text-align: left"> <input id="check_all" type="checkbox"/> </th> 
     <th> Name </th> 
     <th> Type </th> 
     </tr> 
     <tr id="all_selected" class="message"> 
     <td colspan="3"> All entries shown on this page are selected </td> 
     </tr> 
     <tr id="none_selected" class="message"> 
     <td colspan="3"> Select all entries in this table </td> 
     </tr> 
     <tr id="some_selected" class="message"> 
     <td colspan="3">Some are checked &nbsp;</td> 
     </tr> 

     <tr class="data"> 
     <td> <input class="checked" type="checkbox"/> </td> 
     <td> Row 1 </td> 
     <td> Type 1 </td> 
     </tr> 
     <tr class="data"> 
     <td> <input class="checked" type="checkbox"/> </td> 
     <td> Row 2 </td> 
     <td> Type 2 </td> 
     </tr> 
     <tr class="data"> 
     <td> <input class="checked" type="checkbox"/> </td> 
     <td> Row 3 </td> 
     <td> Type 3 </td> 
     </tr> 
    </table> 
    </body> 
</html>

來源

2016-09-26 17:22:43

感謝您的幫助，但有什麼辦法可以點擊文本顯示所有表因爲表格默認只顯示10，除非點擊25,50或全部。然後點擊該表格下方的下拉列表，可以選擇要顯示的行數顯示「all」，並單擊複選框（id =「select_all」），將所有行標記爲顯示。 –

Javascript在數據表上顯示「所有下拉列表」

回答

相關問題