时间戳

首页 > 解决方案 > 输入时jQuery表格搜索所有列

jquery - 输入时jQuery表格搜索所有列

问题描述

嗨，我有一个 Jquery 表搜索，我的要求是当单击输入搜索所有表列时...现在我只能搜索两列...有人可以帮我绑定其余的列，以便在单击输入时整个表将搜索。

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

感谢您的帮助。 

<!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>

标签： jquerysearchhtml-table

解决方案

而不是你的 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>

推荐阅读