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在数据表上显示“所有下拉列表”

回答

相关问题