Datatables筛选复选框 – 如何默认取消选中?

huangapple go评论65阅读模式
英文:

Datatables filter checkbox - How to uncheck by default?

问题

我正在处理一个包含复选框过滤器的Datatable项目。我在Datatables.net上找到了示例。它可以正常工作,但这是我需要的内容:

默认情况下,复选框应为未选中(而不是选中),并显示“Technical Author”、“Software Engineer”和“System Architect”的结果。
当我单击“Technical Author”复选框时,它应该只显示“Technical Author”的结果。
当我单击“Software Engineer”复选框时,它应该只显示“Software Engineer”的结果。
当这3个复选框都被选中时,它应该显示所有结果。

我觉得我可能遗漏了一些简单的东西。以下是我正在使用的代码。谢谢。

https://live.datatables.net/fofimale/49/edit

var filtered = ["Technical Author", "Software Engineer", "System Architect"];

$(document).ready( function () {
  var table = $('#example').DataTable({
    initComplete: function () {
      $.fn.dataTable.ext.search.push(
        function( settings, searchData, index, rowData, counter ) {
            // 如果没有选中任何复选框,则不显示行
            if (filtered.length === 0) {
                return false;
            }
      
            if (filtered.includes(searchData[1])) {
                 return true;
            }
            return false;
        }
      );
    }
  });
  
  $('.filter').on('change', function() {
    var val = $(this).val();
    var checked = $(this).prop('checked');
    var index = filtered.indexOf( val );
    
    if (checked && index === -1) {
      filtered.push(val);
    } else if (!checked && index > -1) {
      filtered.splice(index, 1);
    }
    table.draw();
  });
});

这段代码用于初始化Datatable,并根据选中的复选框来过滤结果。希望这对你有帮助。

英文:

I am working on a project with datatable that has checkbox filtering on top. I found the example on Datatables.net. It works fine, however here is what I need -

By default the checkboxes should be unchecked (instead of checked) and display results for Techinical Author, Software Engineer and Architect.
When I click on Techinical Author checkbox, it should only display results for Techinical Author.
When I click on Software Engineer checkbox, it should only display results for Software Engineeer.
When all 3 checkboxes are checked, it should display results for everything.

I feel like I am missing something simple. Here is the code I am using. Thanks.

https://live.datatables.net/fofimale/49/edit

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var filtered = [&quot;Technical Author&quot;, &quot;Software Engineer&quot;, &quot;System Architect&quot;];

$(document).ready( function () {


  
  var table = $(&#39;#example&#39;).DataTable({
    initComplete: function () {
      $.fn.dataTable.ext.search.push(
        function( settings, searchData, index, rowData, counter ) {
            // Don&#39;t display rows if nothing is checked
            if (filtered.length === 0) {
                return false;
            }
      
            if (filtered.includes(searchData[1])) {
                 return true;
            }
            return false;
        }
      );
    }
  });
  
  $(&#39;.filter&#39;).on(&#39;change&#39;, function() {
    var val = $(this).val();
    var checked = $(this).prop(&#39;checked&#39;);
    var index = filtered.indexOf( val );
    
    if (checked &amp;&amp; index === -1) {
      filtered.push(val);
    } else if (!checked &amp;&amp; index &gt; -1) {
      filtered.splice(index, 2);
    }
    //console.log(filtered);
    table.draw();
  });
} );

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-1.11.3.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://nightly.datatables.net/css/jquery.dataTables.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;script src=&quot;https://nightly.datatables.net/js/jquery.dataTables.js&quot;&gt;&lt;/script&gt;
&lt;meta charset=utf-8 /&gt;
&lt;title&gt;DataTables - JS Bin&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;filter&quot; value=&quot;Technical Author&quot; checked /&gt;Technical Author&lt;/label&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;filter&quot; value=&quot;Software Engineer&quot; checked /&gt;Software Engineer&lt;/label&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;filter&quot; value=&quot;System Architect&quot; checked /&gt;System Architect&lt;/label&gt;
&lt;table id=&quot;example&quot; class=&quot;display nowrap&quot; width=&quot;100%&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Position&lt;/th&gt;
&lt;th&gt;Office&lt;/th&gt;
&lt;th&gt;Age&lt;/th&gt;
&lt;th&gt;Start date&lt;/th&gt;
&lt;th&gt;Salary&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Position&lt;/th&gt;
&lt;th&gt;Office&lt;/th&gt;
&lt;th&gt;Age&lt;/th&gt;
&lt;th&gt;Start date&lt;/th&gt;
&lt;th&gt;Salary&lt;/th&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Tiger Nixon&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;61&lt;/td&gt;
&lt;td&gt;2011/04/25&lt;/td&gt;
&lt;td&gt;$3,120&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Garrett Winters&lt;/td&gt;
&lt;td&gt;Director&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;63&lt;/td&gt;
&lt;td&gt;2011/07/25&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ashton Cox&lt;/td&gt;
&lt;td&gt;Technical Author&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;66&lt;/td&gt;
&lt;td&gt;2009/01/12&lt;/td&gt;
&lt;td&gt;$4,800&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Cedric Kelly&lt;/td&gt;
&lt;td&gt;Javascript Developer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;22&lt;/td&gt;
&lt;td&gt;2012/03/29&lt;/td&gt;
&lt;td&gt;$3,600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jenna Elliott&lt;/td&gt;
&lt;td&gt;Financial Controller&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;33&lt;/td&gt;
&lt;td&gt;2008/11/28&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Brielle Williamson&lt;/td&gt;
&lt;td&gt;Integration Specialist&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;61&lt;/td&gt;
&lt;td&gt;2012/12/02&lt;/td&gt;
&lt;td&gt;$4,525&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Herrod Chandler&lt;/td&gt;
&lt;td&gt;Sales Assistant&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;59&lt;/td&gt;
&lt;td&gt;2012/08/06&lt;/td&gt;
&lt;td&gt;$4,080&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Rhona Davidson&lt;/td&gt;
&lt;td&gt;Integration Specialist&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;55&lt;/td&gt;
&lt;td&gt;2010/10/14&lt;/td&gt;
&lt;td&gt;$6,730&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Colleen Hurst&lt;/td&gt;
&lt;td&gt;Javascript Developer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;39&lt;/td&gt;
&lt;td&gt;2009/09/15&lt;/td&gt;
&lt;td&gt;$5,000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Sonya Frost&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;23&lt;/td&gt;
&lt;td&gt;2008/12/13&lt;/td&gt;
&lt;td&gt;$3,600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jena Gaines&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;30&lt;/td&gt;
&lt;td&gt;2008/12/19&lt;/td&gt;
&lt;td&gt;$5,000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Quinn Flynn&lt;/td&gt;
&lt;td&gt;Financial Controller&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;22&lt;/td&gt;
&lt;td&gt;2013/03/03&lt;/td&gt;
&lt;td&gt;$4,200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Charde Marshall&lt;/td&gt;
&lt;td&gt;Regional Director&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;36&lt;/td&gt;
&lt;td&gt;2008/10/16&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Haley Kennedy&lt;/td&gt;
&lt;td&gt;Senior Marketing Designer&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;43&lt;/td&gt;
&lt;td&gt;2012/12/18&lt;/td&gt;
&lt;td&gt;$4,800&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Tatyana Fitzpatrick&lt;/td&gt;
&lt;td&gt;Regional Director&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;19&lt;/td&gt;
&lt;td&gt;2010/03/17&lt;/td&gt;
&lt;td&gt;$2,875&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Michael Silva&lt;/td&gt;
&lt;td&gt;Senior Marketing Designer&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;66&lt;/td&gt;
&lt;td&gt;2012/11/27&lt;/td&gt;
&lt;td&gt;$3,750&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Paul Byrd&lt;/td&gt;
&lt;td&gt;Javascript Developer&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;64&lt;/td&gt;
&lt;td&gt;2010/06/09&lt;/td&gt;
&lt;td&gt;$5,000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gloria Little&lt;/td&gt;
&lt;td&gt;Systems Administrator&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;59&lt;/td&gt;
&lt;td&gt;2009/04/10&lt;/td&gt;
&lt;td&gt;$3,120&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bradley Greer&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;41&lt;/td&gt;
&lt;td&gt;2012/10/13&lt;/td&gt;
&lt;td&gt;$3,120&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dai Rios&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;35&lt;/td&gt;
&lt;td&gt;2012/09/26&lt;/td&gt;
&lt;td&gt;$4,200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jenette Caldwell&lt;/td&gt;
&lt;td&gt;Financial Controller&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;30&lt;/td&gt;
&lt;td&gt;2011/09/03&lt;/td&gt;
&lt;td&gt;$4,965&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Yuri Berry&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;40&lt;/td&gt;
&lt;td&gt;2009/06/25&lt;/td&gt;
&lt;td&gt;$3,600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Caesar Vance&lt;/td&gt;
&lt;td&gt;Technical Author&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;21&lt;/td&gt;
&lt;td&gt;2011/12/12&lt;/td&gt;
&lt;td&gt;$4,965&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Doris Wilder&lt;/td&gt;
&lt;td&gt;Sales Assistant&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;23&lt;/td&gt;
&lt;td&gt;2010/09/20&lt;/td&gt;
&lt;td&gt;$4,965&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Angelica Ramos&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;36&lt;/td&gt;
&lt;td&gt;2009/10/09&lt;/td&gt;
&lt;td&gt;$2,875&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gavin Joyce&lt;/td&gt;
&lt;td&gt;Developer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;42&lt;/td&gt;
&lt;td&gt;2010/12/22&lt;/td&gt;
&lt;td&gt;$4,525&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jennifer Chang&lt;/td&gt;
&lt;td&gt;Regional Director&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;28&lt;/td&gt;
&lt;td&gt;2010/11/14&lt;/td&gt;
&lt;td&gt;$4,080&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Brenden Wagner&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;18&lt;/td&gt;
&lt;td&gt;2011/06/07&lt;/td&gt;
&lt;td&gt;$3,750&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ebony Grimes&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;48&lt;/td&gt;
&lt;td&gt;2010/03/11&lt;/td&gt;
&lt;td&gt;$2,875&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Russell Chavez&lt;/td&gt;
&lt;td&gt;Director&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;20&lt;/td&gt;
&lt;td&gt;2011/08/14&lt;/td&gt;
&lt;td&gt;$3,600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Michelle House&lt;/td&gt;
&lt;td&gt;Integration Specialist&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;37&lt;/td&gt;
&lt;td&gt;2011/06/02&lt;/td&gt;
&lt;td&gt;$3,750&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Suki Burks&lt;/td&gt;
&lt;td&gt;Developer&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;53&lt;/td&gt;
&lt;td&gt;2009/10/22&lt;/td&gt;
&lt;td&gt;$2,875&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Prescott Bartlett&lt;/td&gt;
&lt;td&gt;Technical Author&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;27&lt;/td&gt;
&lt;td&gt;2011/05/07&lt;/td&gt;
&lt;td&gt;$6,730&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gavin Cortez&lt;/td&gt;
&lt;td&gt;Technical Author&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;22&lt;/td&gt;
&lt;td&gt;2008/10/26&lt;/td&gt;
&lt;td&gt;$6,730&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Martena Mccray&lt;/td&gt;
&lt;td&gt;Integration Specialist&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;46&lt;/td&gt;
&lt;td&gt;2011/03/09&lt;/td&gt;
&lt;td&gt;$4,080&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Unity Butler&lt;/td&gt;
&lt;td&gt;Senior Marketing Designer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;47&lt;/td&gt;
&lt;td&gt;2009/12/09&lt;/td&gt;
&lt;td&gt;$3,750&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Howard Hatfield&lt;/td&gt;
&lt;td&gt;Financial Controller&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;51&lt;/td&gt;
&lt;td&gt;2008/12/16&lt;/td&gt;
&lt;td&gt;$4,080&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Hope Fuentes&lt;/td&gt;
&lt;td&gt;Financial Controller&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;41&lt;/td&gt;
&lt;td&gt;2010/02/12&lt;/td&gt;
&lt;td&gt;$4,200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Vivian Harrell&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;62&lt;/td&gt;
&lt;td&gt;2009/02/14&lt;/td&gt;
&lt;td&gt;$4,965&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Timothy Mooney&lt;/td&gt;
&lt;td&gt;Financial Controller&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;37&lt;/td&gt;
&lt;td&gt;2008/12/11&lt;/td&gt;
&lt;td&gt;$4,200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jackson Bradshaw&lt;/td&gt;
&lt;td&gt;Director&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;65&lt;/td&gt;
&lt;td&gt;2008/09/26&lt;/td&gt;
&lt;td&gt;$5,000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Miriam Weiss&lt;/td&gt;
&lt;td&gt;Support Engineer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;64&lt;/td&gt;
&lt;td&gt;2011/02/03&lt;/td&gt;
&lt;td&gt;$4,965&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bruno Nash&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;38&lt;/td&gt;
&lt;td&gt;2011/05/03&lt;/td&gt;
&lt;td&gt;$4,200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Odessa Jackson&lt;/td&gt;
&lt;td&gt;Support Engineer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;37&lt;/td&gt;
&lt;td&gt;2009/08/19&lt;/td&gt;
&lt;td&gt;$3,600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Thor Walton&lt;/td&gt;
&lt;td&gt;Developer&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;61&lt;/td&gt;
&lt;td&gt;2013/08/11&lt;/td&gt;
&lt;td&gt;$3,600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Finn Camacho&lt;/td&gt;
&lt;td&gt;Support Engineer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;47&lt;/td&gt;
&lt;td&gt;2009/07/07&lt;/td&gt;
&lt;td&gt;$4,800&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Elton Baldwin&lt;/td&gt;
&lt;td&gt;Data Coordinator&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;64&lt;/td&gt;
&lt;td&gt;2012/04/09&lt;/td&gt;
&lt;td&gt;$6,730&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Zenaida Frank&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;63&lt;/td&gt;
&lt;td&gt;2010/01/04&lt;/td&gt;
&lt;td&gt;$4,800&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Zorita Serrano&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;56&lt;/td&gt;
&lt;td&gt;2012/06/01&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jennifer Acosta&lt;/td&gt;
&lt;td&gt;Javascript Developer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;43&lt;/td&gt;
&lt;td&gt;2013/02/01&lt;/td&gt;
&lt;td&gt;$2,875&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Cara Stevens&lt;/td&gt;
&lt;td&gt;Sales Assistant&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;46&lt;/td&gt;
&lt;td&gt;2011/12/06&lt;/td&gt;
&lt;td&gt;$4,800&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Hermione Butler&lt;/td&gt;
&lt;td&gt;Director&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;47&lt;/td&gt;
&lt;td&gt;2011/03/21&lt;/td&gt;
&lt;td&gt;$4,080&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Lael Greer&lt;/td&gt;
&lt;td&gt;Systems Administrator&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;21&lt;/td&gt;
&lt;td&gt;2009/02/27&lt;/td&gt;
&lt;td&gt;$3,120&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jonas Alexander&lt;/td&gt;
&lt;td&gt;Developer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;30&lt;/td&gt;
&lt;td&gt;2010/07/14&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Shad Decker&lt;/td&gt;
&lt;td&gt;Regional Director&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;51&lt;/td&gt;
&lt;td&gt;2008/11/13&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Michael Bruce&lt;/td&gt;
&lt;td&gt;Javascript Developer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;29&lt;/td&gt;
&lt;td&gt;2011/06/27&lt;/td&gt;
&lt;td&gt;$4,080&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Donna Snider&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;27&lt;/td&gt;
&lt;td&gt;2011/01/25&lt;/td&gt;
&lt;td&gt;$3,120&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

答案1

得分: 1

以下是您要翻译的代码部分:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <label><input type="checkbox" class="filter" value="Technical Author" />Technical Author</label>
      <label><input type="checkbox" class="filter" value="Software Engineer" />Software Engineer</label>
      <label><input type="checkbox" class="filter" value="System Architect" />System Architect</label>

      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>

        <tbody>
          <!-- 以下是表格中的数据,此处省略 -->
        </tbody>
      </table>
    </div>
  </body>
</html>

希望这能帮助您!

英文:

You can try something like this

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

//var filtered = [&quot;Technical Author&quot;, &quot;Software Engineer&quot;, &quot;System Architect&quot;];

var filtered = [];

$(document).ready( function () {
var table = $(&#39;#example&#39;).DataTable({
initComplete: function () {
$.fn.dataTable.ext.search.push(
function( settings, searchData, index, rowData, counter ) {
// Don&#39;t display rows if nothing is checked
if (filtered.length === 0) {
return true;
} else if (filtered.includes(searchData[1])) {
return true;
}
return false;
}
);
}
});
$(&#39;.filter&#39;).on(&#39;change&#39;, function() {
var val = $(this).val();
var checked = $(this).prop(&#39;checked&#39;);
var index = filtered.indexOf( val );
if (checked &amp;&amp; index === -1) {
filtered.push(val);
} else if (!checked &amp;&amp; index &gt; -1) {
filtered.splice(index, 2);
}
//console.log(filtered);
table.draw();
});
} );

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-1.11.3.min.js&quot;&gt;&lt;/script&gt;
&lt;link href=&quot;https://nightly.datatables.net/css/jquery.dataTables.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;script src=&quot;https://nightly.datatables.net/js/jquery.dataTables.js&quot;&gt;&lt;/script&gt;
&lt;meta charset=utf-8 /&gt;
&lt;title&gt;DataTables - JS Bin&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;filter&quot; value=&quot;Technical Author&quot; /&gt;Technical Author&lt;/label&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;filter&quot; value=&quot;Software Engineer&quot; /&gt;Software Engineer&lt;/label&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;filter&quot; value=&quot;System Architect&quot; /&gt;System Architect&lt;/label&gt;
&lt;table id=&quot;example&quot; class=&quot;display nowrap&quot; width=&quot;100%&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Position&lt;/th&gt;
&lt;th&gt;Office&lt;/th&gt;
&lt;th&gt;Age&lt;/th&gt;
&lt;th&gt;Start date&lt;/th&gt;
&lt;th&gt;Salary&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Position&lt;/th&gt;
&lt;th&gt;Office&lt;/th&gt;
&lt;th&gt;Age&lt;/th&gt;
&lt;th&gt;Start date&lt;/th&gt;
&lt;th&gt;Salary&lt;/th&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Tiger Nixon&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;61&lt;/td&gt;
&lt;td&gt;2011/04/25&lt;/td&gt;
&lt;td&gt;$3,120&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Garrett Winters&lt;/td&gt;
&lt;td&gt;Director&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;63&lt;/td&gt;
&lt;td&gt;2011/07/25&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ashton Cox&lt;/td&gt;
&lt;td&gt;Technical Author&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;66&lt;/td&gt;
&lt;td&gt;2009/01/12&lt;/td&gt;
&lt;td&gt;$4,800&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Cedric Kelly&lt;/td&gt;
&lt;td&gt;Javascript Developer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;22&lt;/td&gt;
&lt;td&gt;2012/03/29&lt;/td&gt;
&lt;td&gt;$3,600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jenna Elliott&lt;/td&gt;
&lt;td&gt;Financial Controller&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;33&lt;/td&gt;
&lt;td&gt;2008/11/28&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Brielle Williamson&lt;/td&gt;
&lt;td&gt;Integration Specialist&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;61&lt;/td&gt;
&lt;td&gt;2012/12/02&lt;/td&gt;
&lt;td&gt;$4,525&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Herrod Chandler&lt;/td&gt;
&lt;td&gt;Sales Assistant&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;59&lt;/td&gt;
&lt;td&gt;2012/08/06&lt;/td&gt;
&lt;td&gt;$4,080&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Rhona Davidson&lt;/td&gt;
&lt;td&gt;Integration Specialist&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;55&lt;/td&gt;
&lt;td&gt;2010/10/14&lt;/td&gt;
&lt;td&gt;$6,730&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Colleen Hurst&lt;/td&gt;
&lt;td&gt;Javascript Developer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;39&lt;/td&gt;
&lt;td&gt;2009/09/15&lt;/td&gt;
&lt;td&gt;$5,000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Sonya Frost&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;23&lt;/td&gt;
&lt;td&gt;2008/12/13&lt;/td&gt;
&lt;td&gt;$3,600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jena Gaines&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;30&lt;/td&gt;
&lt;td&gt;2008/12/19&lt;/td&gt;
&lt;td&gt;$5,000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Quinn Flynn&lt;/td&gt;
&lt;td&gt;Financial Controller&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;22&lt;/td&gt;
&lt;td&gt;2013/03/03&lt;/td&gt;
&lt;td&gt;$4,200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Charde Marshall&lt;/td&gt;
&lt;td&gt;Regional Director&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;36&lt;/td&gt;
&lt;td&gt;2008/10/16&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Haley Kennedy&lt;/td&gt;
&lt;td&gt;Senior Marketing Designer&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;43&lt;/td&gt;
&lt;td&gt;2012/12/18&lt;/td&gt;
&lt;td&gt;$4,800&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Tatyana Fitzpatrick&lt;/td&gt;
&lt;td&gt;Regional Director&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;19&lt;/td&gt;
&lt;td&gt;2010/03/17&lt;/td&gt;
&lt;td&gt;$2,875&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Michael Silva&lt;/td&gt;
&lt;td&gt;Senior Marketing Designer&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;66&lt;/td&gt;
&lt;td&gt;2012/11/27&lt;/td&gt;
&lt;td&gt;$3,750&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Paul Byrd&lt;/td&gt;
&lt;td&gt;Javascript Developer&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;64&lt;/td&gt;
&lt;td&gt;2010/06/09&lt;/td&gt;
&lt;td&gt;$5,000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gloria Little&lt;/td&gt;
&lt;td&gt;Systems Administrator&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;59&lt;/td&gt;
&lt;td&gt;2009/04/10&lt;/td&gt;
&lt;td&gt;$3,120&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bradley Greer&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;41&lt;/td&gt;
&lt;td&gt;2012/10/13&lt;/td&gt;
&lt;td&gt;$3,120&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dai Rios&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;35&lt;/td&gt;
&lt;td&gt;2012/09/26&lt;/td&gt;
&lt;td&gt;$4,200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jenette Caldwell&lt;/td&gt;
&lt;td&gt;Financial Controller&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;30&lt;/td&gt;
&lt;td&gt;2011/09/03&lt;/td&gt;
&lt;td&gt;$4,965&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Yuri Berry&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;40&lt;/td&gt;
&lt;td&gt;2009/06/25&lt;/td&gt;
&lt;td&gt;$3,600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Caesar Vance&lt;/td&gt;
&lt;td&gt;Technical Author&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;21&lt;/td&gt;
&lt;td&gt;2011/12/12&lt;/td&gt;
&lt;td&gt;$4,965&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Doris Wilder&lt;/td&gt;
&lt;td&gt;Sales Assistant&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;23&lt;/td&gt;
&lt;td&gt;2010/09/20&lt;/td&gt;
&lt;td&gt;$4,965&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Angelica Ramos&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;36&lt;/td&gt;
&lt;td&gt;2009/10/09&lt;/td&gt;
&lt;td&gt;$2,875&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gavin Joyce&lt;/td&gt;
&lt;td&gt;Developer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;42&lt;/td&gt;
&lt;td&gt;2010/12/22&lt;/td&gt;
&lt;td&gt;$4,525&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jennifer Chang&lt;/td&gt;
&lt;td&gt;Regional Director&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;28&lt;/td&gt;
&lt;td&gt;2010/11/14&lt;/td&gt;
&lt;td&gt;$4,080&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Brenden Wagner&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;18&lt;/td&gt;
&lt;td&gt;2011/06/07&lt;/td&gt;
&lt;td&gt;$3,750&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Ebony Grimes&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;48&lt;/td&gt;
&lt;td&gt;2010/03/11&lt;/td&gt;
&lt;td&gt;$2,875&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Russell Chavez&lt;/td&gt;
&lt;td&gt;Director&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;20&lt;/td&gt;
&lt;td&gt;2011/08/14&lt;/td&gt;
&lt;td&gt;$3,600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Michelle House&lt;/td&gt;
&lt;td&gt;Integration Specialist&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;37&lt;/td&gt;
&lt;td&gt;2011/06/02&lt;/td&gt;
&lt;td&gt;$3,750&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Suki Burks&lt;/td&gt;
&lt;td&gt;Developer&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;53&lt;/td&gt;
&lt;td&gt;2009/10/22&lt;/td&gt;
&lt;td&gt;$2,875&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Prescott Bartlett&lt;/td&gt;
&lt;td&gt;Technical Author&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;27&lt;/td&gt;
&lt;td&gt;2011/05/07&lt;/td&gt;
&lt;td&gt;$6,730&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gavin Cortez&lt;/td&gt;
&lt;td&gt;Technical Author&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;22&lt;/td&gt;
&lt;td&gt;2008/10/26&lt;/td&gt;
&lt;td&gt;$6,730&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Martena Mccray&lt;/td&gt;
&lt;td&gt;Integration Specialist&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;46&lt;/td&gt;
&lt;td&gt;2011/03/09&lt;/td&gt;
&lt;td&gt;$4,080&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Unity Butler&lt;/td&gt;
&lt;td&gt;Senior Marketing Designer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;47&lt;/td&gt;
&lt;td&gt;2009/12/09&lt;/td&gt;
&lt;td&gt;$3,750&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Howard Hatfield&lt;/td&gt;
&lt;td&gt;Financial Controller&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;51&lt;/td&gt;
&lt;td&gt;2008/12/16&lt;/td&gt;
&lt;td&gt;$4,080&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Hope Fuentes&lt;/td&gt;
&lt;td&gt;Financial Controller&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;41&lt;/td&gt;
&lt;td&gt;2010/02/12&lt;/td&gt;
&lt;td&gt;$4,200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Vivian Harrell&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;62&lt;/td&gt;
&lt;td&gt;2009/02/14&lt;/td&gt;
&lt;td&gt;$4,965&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Timothy Mooney&lt;/td&gt;
&lt;td&gt;Financial Controller&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;37&lt;/td&gt;
&lt;td&gt;2008/12/11&lt;/td&gt;
&lt;td&gt;$4,200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jackson Bradshaw&lt;/td&gt;
&lt;td&gt;Director&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;65&lt;/td&gt;
&lt;td&gt;2008/09/26&lt;/td&gt;
&lt;td&gt;$5,000&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Miriam Weiss&lt;/td&gt;
&lt;td&gt;Support Engineer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;64&lt;/td&gt;
&lt;td&gt;2011/02/03&lt;/td&gt;
&lt;td&gt;$4,965&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bruno Nash&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;38&lt;/td&gt;
&lt;td&gt;2011/05/03&lt;/td&gt;
&lt;td&gt;$4,200&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Odessa Jackson&lt;/td&gt;
&lt;td&gt;Support Engineer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;37&lt;/td&gt;
&lt;td&gt;2009/08/19&lt;/td&gt;
&lt;td&gt;$3,600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Thor Walton&lt;/td&gt;
&lt;td&gt;Developer&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;61&lt;/td&gt;
&lt;td&gt;2013/08/11&lt;/td&gt;
&lt;td&gt;$3,600&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Finn Camacho&lt;/td&gt;
&lt;td&gt;Support Engineer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;47&lt;/td&gt;
&lt;td&gt;2009/07/07&lt;/td&gt;
&lt;td&gt;$4,800&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Elton Baldwin&lt;/td&gt;
&lt;td&gt;Data Coordinator&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;64&lt;/td&gt;
&lt;td&gt;2012/04/09&lt;/td&gt;
&lt;td&gt;$6,730&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Zenaida Frank&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;63&lt;/td&gt;
&lt;td&gt;2010/01/04&lt;/td&gt;
&lt;td&gt;$4,800&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Zorita Serrano&lt;/td&gt;
&lt;td&gt;Software Engineer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;56&lt;/td&gt;
&lt;td&gt;2012/06/01&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jennifer Acosta&lt;/td&gt;
&lt;td&gt;Javascript Developer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;43&lt;/td&gt;
&lt;td&gt;2013/02/01&lt;/td&gt;
&lt;td&gt;$2,875&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Cara Stevens&lt;/td&gt;
&lt;td&gt;Sales Assistant&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;46&lt;/td&gt;
&lt;td&gt;2011/12/06&lt;/td&gt;
&lt;td&gt;$4,800&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Hermione Butler&lt;/td&gt;
&lt;td&gt;Director&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;47&lt;/td&gt;
&lt;td&gt;2011/03/21&lt;/td&gt;
&lt;td&gt;$4,080&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Lael Greer&lt;/td&gt;
&lt;td&gt;Systems Administrator&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;td&gt;21&lt;/td&gt;
&lt;td&gt;2009/02/27&lt;/td&gt;
&lt;td&gt;$3,120&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Jonas Alexander&lt;/td&gt;
&lt;td&gt;Developer&lt;/td&gt;
&lt;td&gt;San Francisco&lt;/td&gt;
&lt;td&gt;30&lt;/td&gt;
&lt;td&gt;2010/07/14&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Shad Decker&lt;/td&gt;
&lt;td&gt;Regional Director&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;51&lt;/td&gt;
&lt;td&gt;2008/11/13&lt;/td&gt;
&lt;td&gt;$5,300&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Michael Bruce&lt;/td&gt;
&lt;td&gt;Javascript Developer&lt;/td&gt;
&lt;td&gt;Edinburgh&lt;/td&gt;
&lt;td&gt;29&lt;/td&gt;
&lt;td&gt;2011/06/27&lt;/td&gt;
&lt;td&gt;$4,080&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Donna Snider&lt;/td&gt;
&lt;td&gt;System Architect&lt;/td&gt;
&lt;td&gt;New York&lt;/td&gt;
&lt;td&gt;27&lt;/td&gt;
&lt;td&gt;2011/01/25&lt;/td&gt;
&lt;td&gt;$3,120&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

答案2

得分: 0

只移除 HTML 代码中复选框输入的 'checked' 属性。
另一种方法是使用 JavaScript:

document.getElementById("checkbox").checked = true;
或
document.getElementById("checkbox").checked = false;

在需要的地方(例如在页面加载时)使用。

英文:

Just remove the 'checked' property in checkbox inputs in HTML code.
Another way around is to use JS to

document.getElementById(&quot;checkbox&quot;).checked = true;
or
document.getElementById(&quot;checkbox&quot;).checked = false;

where needed (on body load for example)

huangapple
  • 本文由 发表于 2023年3月10日 01:59:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/75688401.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定