Question

嗨，我有一个Jquery Table Search，我的要求是单击Enter来搜索所有表列...现在我只能搜索两列...有人可以帮我绑定其余的列，以便点击输入整个表格将进行搜索。

基本上，当有人点击时，我需要按姓名，电子邮件，电话，价格进行搜索

感谢您的帮助。

<!DOCTYPE html>

<html>

<head>
    
    <meta charset="UTF-8" />
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Table search on enter</title> 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>            

    <style>
        td,tr, th{
            padding:15px;
        }        
    </style>
      
    
</head>

<body>

    <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filtrer" /> 
    
    <a class="button"><i class="fa fa-exclamation-circle"></i> Report Error</a>
               
    <br />
    
        <section class="table-box">
		<table class="order-table">
			<thead>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Phone</th>
					<th>Price</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Williams</td>
					<td>williams@ooutlook.com</td>
					<td>644</td>
					<td>56453454</td>
				</tr>
				<tr>
					<td>Amber Samuels</td>
					<td>amber@james.com</td>
					<td>64345</td>
					<td>734534</td>
				</tr>
				<tr>
					<td>Rehen</td>
					<td>rehen@gmail.com</td>
					<td>634534</td>
					<td>5345</td>
				</tr>
				<tr>
					<td>Alfred fedric</td>
					<td>fedric@gmail.com</td>
					<td>634534</td>
					<td>123123</td>
				</tr>
				<tr>
					<td>Taylor</td>
					<td>taylor@gmail.com</td>
					<td>0978098</td>
					<td>896899</td>
				</tr>
				<tr>
					<td>Classis</td>
					<td>classic@fgf.com</td>
					<td>634534</td>
					<td>45345</td>
				</tr>
			</tbody>
		</table>
	</section>
    
    
    <script>
       // Can search only two columns I want to search all columns
    var currentMonth;
    var nameRowIndex = 0; // O is first column Name
    var emailRowIndex = 1; // 1 is Second column Email    
    
    $('.light-table-filter').change(function(){
       //The Event for Month change. 
       currentMonth =  $('.light-table-filter').val();
       changeData();
    });

    function changeData(){ 
            var tables = document.getElementsByClassName('order-table');//Table Name goes here..
            [].forEach.call(tables, function(table) {
                    [].forEach.call(table.tBodies, function(tbody) {

                            [].forEach.call(tbody.rows, _filter);

                    });
            });
    }
    
    function _filter(row) {
    console.log("row: " + row.cells[nameRowIndex,emailRowIndex].textContent);
            var text = row.cells[nameRowIndex,emailRowIndex].textContent.toLowerCase(), val = currentMonth;
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
    } 
    </script>    
    
</body>

</html>

Answer 1

代替您的jquery使用下面的代码，它将适用于所有列

$(document).ready(function(){
  $(".light-table-filter").keypress(function (e) {
  var key = e.which;
   if(key == 13)  // the enter key code
  {    
    var value = $(this).val().toLowerCase();
    $(".order-table tbody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });  
  }
  });
});

// Can search only two columns I want to search all columns
$(document).ready(function(){
  $(".light-table-filter").keypress(function (e) {
  var key = e.which;
   if(key == 13)  // the enter key code
  {    
    var value = $(this).val().toLowerCase();
    $(".order-table tbody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });  
  }
  });
});


/*var currentMonth;
var nameRowIndex = 0; // O is first column Name
var emailRowIndex = 1; // 1 is Second column Email
var phoneRowIndex = 2;
var priceRowIndex = 3;

$('.light-table-filter').change(function(){
   //The Event for Month change. 
   currentMonth =  $('.light-table-filter').val();
   changeData();
});

function changeData(){ 
        var tables = document.getElementsByClassName('order-table');//Table Name goes here..
        [].forEach.call(tables, function(table) {
                [].forEach.call(table.tBodies, function(tbody) {

                        [].forEach.call(tbody.rows, _filter);

                });
        });
}

function _filter(row) {
        var text = row.cells[nameRowIndex,emailRowIndex,phoneRowIndex,priceRowIndex].textContent.toLowerCase(), val = currentMonth;
        row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}*/

   td,tr, th{
        padding:15px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filtrer" /> 

<a class="button"><i class="fa fa-exclamation-circle"></i> Report Error</a>

<br />

    <section class="table-box">
    <table class="order-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Williams</td>
                <td>williams@ooutlook.com</td>
                <td>644</td>
                <td>56453454</td>
            </tr>
            <tr>
                <td>Amber Samuels</td>
                <td>amber@james.com</td>
                <td>64345</td>
                <td>734534</td>
            </tr>
            <tr>
                <td>Rehen</td>
                <td>rehen@gmail.com</td>
                <td>634534</td>
                <td>5345</td>
            </tr>
            <tr>
                <td>Alfred fedric</td>
                <td>fedric@gmail.com</td>
                <td>634534</td>
                <td>123123</td>
            </tr>
            <tr>
                <td>Taylor</td>
                <td>taylor@gmail.com</td>
                <td>0978098</td>
                <td>896899</td>
            </tr>
            <tr>
                <td>Classis</td>
                <td>classic@fgf.com</td>
                <td>634534</td>
                <td>45345</td>
            </tr>
        </tbody>
    </table>
</section>

Answer 2

让我们假设您只希望能够在页面上的任何阶段进行搜索，而不仅仅是在输入或其他内容上进行搜索。

使用jQuery，您可以执行以下操作

$(window).keypress(function(e){
  if(e.charCode == 13){ //charCode 13 is the enter key
    doSearch();
  }
});

如果您只想在专注于搜索输入的同时进行搜索，则可以执行以下操作

$(window).keypress(function(e){
  if(e.charCode == 13 && $(".light-table-filter").is(":focus")){
    doSearch();
  }
});

Answer 3

更新过滤器方法，添加需要搜索的字段的索引

var text = row.cells[nameRowIndex,emailRowIndex,2,3].textContent.toLowerCase(), val = currentMonth;
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';

jQuery表在输入时搜索所有列

3 个答案: