How to search table single column with javascript operator symbol by using Jquery?

Question

Actually, I am trying to get a single table column value after search. If I select = operator and type column any input value and then after a search, the input value will get like one or more row that matches the similar value. In the same way, if I select < operator and this column any input value the less than input value will get if I select > operator and this column any input value the greater than input value will get if I select <= operator and this column any input value the less than or equal input value will get if I select >= operator and this column input value the greater than or equal input value will get. But I can't do this column search. How can I solve this search problem?

$('button').click(function(){
  var avlQuantity = new Array();
  var aggOperator = $('#aggregate_condition').val();
  var inputValue = $('#available_quantity').val();
  console.log(aggOperator,inputValue,idValue)
  $('table tbody tr').each(function(){
      avlQuantity.push($(this).find('td').text());
      console.log($(this).find('td').text());
  });

  if(aggOperator,inputValue){
      avlQuantity.push($(this).find('td').text());
      // console.log(avlQuantity.push($(this).find('td').text()));
      console.log(aggOperator,inputValue)
  }

  var counter = 0;
  $('table tbody tr').each(function(){
      counter++
      var rowId = $(this);
      rowId.addClass("rowId_"+counter);
      $(this).find("rowId"+counter).text();
      console.log("rowId_"+counter);

      avlQuantity.forEach(function(rowId){
          if(rowId == "rowId_"+counter){
              $("rowId_"+counter).show();
          }
      })
  })

  console.log('end');

})

table {
      width: 100%;
  }
  table thead th {
      padding: 15px;
  }
  table tbody tr td{
      padding: 10px;
      text-align: center;
  }
  .text-center{
      text-align: center;
  }
  .header-name{
      display: flex;
      justify-content: center;
      align-items: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
<thead>
    <th class="text-center">
        Regular Price
        <div class="header-name">
            <div>
                <select id="aggregate_condition">
                    <option value="=">=</option>
                    <option value="<">&lt;</option>
                    <option value=">">&gt;</option>
                    <option value="<=">≤</option>
                    <option value=">=">≥</option>
                </select>
            </div>
            <div>
                <input type="text" id="available_quantity">
            </div>
            <div>
                <button type="submit">Apply</button>
            </div>
        </div>
    </th>
</thead>
<tbody>
    <tr>
        <td>4</td>
    </tr>
    <tr>
        <td>9</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>0</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
    <tr>
        <td>1</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
</tbody>
</table>

Answer 1

• You don't need any <button>.
• Use jQuery's .filter() method to filter your elements and toggle a class accordingly using .removeClass() and .addClass()
• Use an object aggrFn to reference your functions that will do the calculations depending on the used operator < > = <= >= that will triggered on "input" event of both the input and select box.

const $avail = $("#available_quantity");
const $table = $avail.closest("table");
const $aggre = $("#aggregate_condition");

const aggrFn = {
  "=":  (a,b) => a == b,
  "<":  (a,b) => a  < b,
  ">":  (a,b) => a  > b,
  "<=": (a,b) => a <= b,
  ">=": (a,b) => a >= b,
};

function filterTableByQty() {
  const ag = $aggre.val();
  const av = $avail.val().trim();  
  const $rowsQty = $table.find("[data-qty]")
  $rowsQty.removeClass("u-none");
  if (av === "") return;
  $rowsQty.filter((i, el) => !aggrFn[ag](el.dataset.qty, +av)).addClass("u-none");
}

$avail.add($aggre).on("input", filterTableByQty);

* {margin:0; box-sizing: border-box;}

.header-name {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* UTILITY CLASSES */

.u-none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
  <thead>
    <th>
      Available Quantity
      <div class="header-name">
        <div>
          <select id="aggregate_condition">
            <option value="=">=</option>
            <option value="<">&lt;</option>
            <option value=">">&gt;</option>
            <option value="<=">≤</option>
            <option value=">=">≥</option>
          </select>
        </div>
        <div>
          <input type="text" id="available_quantity">
        </div>
      </div>
    </th>
  </thead>
  <tbody>
    <tr data-qty="4"><td>4</td></tr>
    <tr data-qty="9"><td>9</td></tr>
    <tr data-qty="1"><td>1</td></tr>
    <tr data-qty="0"><td>0</td></tr>
    <tr data-qty="6"><td>6</td></tr>
    <tr data-qty="1"><td>1</td></tr>
    <tr data-qty="6"><td>6</td></tr>
  </tbody>
</table>

Answer 2

you can use eval("3" + ">" + 1) or function like below

var compare = {
  '==': function(a, b) { return a == b; },
  '<': function(a, b) { return a < b; },
  '>': function(a, b) { return a > b; },
  '>=': function(a, b) { return a >= b; },
  '<=': function(a, b) { return a <= b; },
};

$('button').click(function() {
  $('tbody tr').hide()
  var aggOperator = $('#aggregate_condition').val();
  var inputValue = $('#available_quantity').val();
  $.each($('tbody tr'), function(i, tr) {
    var rowText = tr.innerText.trim();
    // var isTrue = eval(rowText +aggOperator+ inputValue); <==== using eval()
    var isTrue = compare[aggOperator](rowText, inputValue)
    if (isTrue) {
      $(tr).show()
    }
  })
})

table {
  border-collapse: collapse;
}
table, td, th {
  border: 1px solid #bbb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
  <thead>
    <th class="text-center">
      Regular Price
      <div class="header-name">
        <div>
          <select id="aggregate_condition">
            <option value="==">==</option>
            <option value="<">&lt;</option>
            <option value=">">&gt;</option>
            <option value="<=">&lt;=</option>
            <option value=">=">&gt;=</option>
          </select>
        </div>
        <div>
          <input type="text" id="available_quantity">
          <input type="hidden" id="id-value" value="available-qty">
        </div>
        <div>
          <button type="submit">Apply</button>
        </div>
      </div>
    </th>
  </thead>
  <tbody>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>9</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>0</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
  </tbody>
</table>

Answer 3

My solution:

you need to convert aggOperator into function and return, you can not use it as string.

So i made getCal function that has if statement inside that returns true or false if td maches condition from that function and show/hide the td itself based on it.

if (' + available_quantity + ' ' + aggOperator + ' ' + val + '){return true}else{return false};

Then apply that:

let cheak = getCal(aggOperator, available_quantity, val)
cheak === true ? $(this).parent("tr").show() : $(this).parent("tr").hide()

$('button').click(function() {
  let available_quantity = $("#available_quantity").val();
  let aggOperator = $('#aggregate_condition').find(":selected").val();


  $("table tbody tr td").each(function(e) {
    let val = $(this).text().trim()
    let cheak = getCal(aggOperator, available_quantity, val)
    cheak === true ? $(this).parent("tr").show() : $(this).parent("tr").hide()
  })

})

function getCal(aggOperator, available_quantity, val) {
  return Function('"use strict"; if (' + available_quantity + ' ' + aggOperator + ' ' + val + '){return true}else{return false};')();
}

table {
  width: 100%;
}

table thead th {
  padding: 15px;
}

table tbody tr td {
  padding: 10px;
  text-align: center;
}

.text-center {
  text-align: center;
}

.header-name {
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table>
  <thead>
    <th class="text-center">
      Regular Price
      <div class="header-name">
        <div>
          <select id="aggregate_condition">
            <option value="===">=</option>
            <option value="<">
              <</option>
                <option value=">">></option>
                <option value="<=">≤</option>
                <option value=">=">≥</option>
          </select>
        </div>
        <div>
          <input type="text" id="available_quantity">
          <input type="hidden" id="id-value" value="available-qty">
        </div>
        <div>
          <button type="submit">Apply</button>
        </div>
      </div>
    </th>
  </thead>
  <tbody>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>9</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>0</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
  </tbody>
</table>