Question

我想通过单列中的值搜索表。

表格如下：

  <table class="table main-content">
<thead>
  <td><b>Title</b></td>
  <td><b>Name</b></td>
  <td><b>State (D)</b></td>
  <td><b>Party</b></td>
  <td><b>Room</b></td>
  <td><b>Phone #</b></td>
  <td><b>Special Role(s)</b></td>
</thead>
<tbody id="congress">

  <tr>
    <td>Senator</td>
    <td><a href="http://www.alexander.senate.gov/">Alexander, Lamar</a></td>
    <td>TN</td>        
    <td class="republican">Rep.</td>
    <td>455 Dirksen</td>
    <td>(202) 224-4944</td>
    <td></td>
  </tr>

  <tr>
    <td>Senator</td>
    <td><a href="http://www.barrasso.senate.gov">Barrasso, John</a></td>
    <td>WY</td>        
    <td class="republican">Rep.</td>
    <td>307 Dirksen</td>
    <td>(202) 224-6441</td>
    <td></td>
  </tr>
  ...

我希望能够通过给定列搜索表，比如名称（索引1）或状态（索引2）。我已经尝试了jets.js，但它只允许每页一个实例，而我需要至少两个。 JQuery是首选，JS很好，外部库可以，但不是最佳的。

干杯！

编辑：

我尝试过使用以下内容：

var $rows = $('#congress tr');

        $('#stateSearch').keyup(function() {

            var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

            $rows.show().filter(function() {
                var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                return !~text.indexOf(val);
            }).hide();


        });

上面的代码搜索表中的所有列。如何调整它以仅搜索特定列？（按索引。）

目标是隐藏与给定列中的查询不匹配的所有tr

Answer 1

像这样的东西

function isFound(name, state)
{
   $("table tbody").find("tr").each (function(){
        var trElem = $(this);
        if (($(this).find("td:eq(1) a").text() == name) && ($(this).find("td:eq(2)").text() == state))
            return trElem;
    })
    return false;
}

用法：

  if (tr = isFound ('Firstname Lastname', 'State'))
      tr.remove();

或者，如果您有多个元素，请使用循环删除

  while (tr = isFound ('Firstname Lastname', 'State'))
      tr.remove();

Answer 2

这是一个隐藏 State 列（索引3） TN 所有行的示例。您可以根据需要进行调整：

$('td:nth-child(3)').each (function(){
    if( $(this).val() == 'TN' )
        $(this).parent().hide();
});

另一个简单的解决方案是使用Datatables，它具有内置搜索功能和methods to search by column。对你的项目来说可能有些过分，但无论如何都要看看未来。

Answer 3

DataTables Example

你可以重新发明轮子，但除非你有明确的需要，否则最好只使用DataTables：

＆＃13;

var $table = $('table');

// Setup - add a text input to each footer cell
$table.find('tfoot th').filter(':eq(1),:eq(2)').css('visibility', 'visible').each(function() {
  var title = $(this).text();
  $(this).html('<input type="text" placeholder="Search ' + title + '" />');
});

// DataTable
var table = $table.DataTable({
  lengthChange: false
});

// Apply the search
table.columns().every(function() {
  var col = this;
  $('input', this.footer()).on('keyup change', function() {
    if (col.search() !== this.value)
      col.search(this.value).draw();
  });
});

＆＃13;

table tfoot tr th {
  visibility: hidden;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/r-2.1.1/datatables.min.css" />

<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.13/r-2.1.1/datatables.min.js"></script>
<table class="table table-striped main-content">
  <thead>
    <tr>
      <th>Title</th>
      <th>Name</th>
      <th>State (D)</th>
      <th>Party</th>
      <th>Room</th>
      <th>Phone #</th>
      <th>Special Role(s)</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Title</th>
      <th>Name</th>
      <th>State (D)</th>
      <th>Party</th>
      <th>Room</th>
      <th>Phone #</th>
      <th>Special Role(s)</th>
    </tr>
  </tfoot>
  <tbody id="congress">
    <tr>
      <td>Senator</td>
      <td><a href="http://www.alexander.senate.gov/">Alexander, Lamar</a></td>
      <td>TN</td>
      <td class="republican">Rep.</td>
      <td>455 Dirksen</td>
      <td>(202) 224-4944</td>
      <td></td>
    </tr>

    <tr>
      <td>Senator</td>
      <td><a href="http://www.barrasso.senate.gov">Barrasso, John</a></td>
      <td>WY</td>
      <td class="republican">Rep.</td>
      <td>307 Dirksen</td>
      <td>(202) 224-6441</td>
      <td></td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 4

尝试一下：

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
    guard let text = textField.text, text.count < 4 else { return false }
    return true
  }

JQuery：通过单个列搜索和过滤表

4 个答案: