How To Search Table Single Column With Javascript Operator Symbol By Using Jquery?

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

Solution 1:

• You don't need any <button>. I have no time to click buttons ;)
• 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,
};

functionfilterTableByQty() {
  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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><table><thead><th>
      Available Quantity
      <divclass="header-name"><div><selectid="aggregate_condition"><optionvalue="=">=</option><optionvalue="<">&lt;</option><optionvalue=">">&gt;</option><optionvalue="<=">≤</option><optionvalue=">=">≥</option></select></div><div><inputtype="text"id="available_quantity"></div></div></th></thead><tbody><trdata-qty="4"><td>4</td></tr><trdata-qty="9"><td>9</td></tr><trdata-qty="1"><td>1</td></tr><trdata-qty="0"><td>0</td></tr><trdata-qty="6"><td>6</td></tr><trdata-qty="1"><td>1</td></tr><trdata-qty="6"><td>6</td></tr></tbody></table>

Solution 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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><table><thead><thclass="text-center">
      Regular Price
      <divclass="header-name"><div><selectid="aggregate_condition"><optionvalue="==">==</option><optionvalue="<">&lt;</option><optionvalue=">">&gt;</option><optionvalue="<=">&lt;=</option><optionvalue=">=">&gt;=</option></select></div><div><inputtype="text"id="available_quantity"><inputtype="hidden"id="id-value"value="available-qty"></div><div><buttontype="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>

Solution 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 + '){returntrue}else{returnfalse};

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()
  })

})

functiongetCal(aggOperator, available_quantity, val) {
  returnFunction('"use strict"; if (' + available_quantity + ' ' + aggOperator + ' ' + val + '){return true}else{return false};')();
}

table {
  width: 100%;
}

tabletheadth {
  padding: 15px;
}

tabletbodytrtd {
  padding: 10px;
  text-align: center;
}

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

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><table><thead><thclass="text-center">
      Regular Price
      <divclass="header-name"><div><selectid="aggregate_condition"><optionvalue="===">=</option><optionvalue="<">
              <</option><optionvalue=">">></option><optionvalue="<=">≤</option><optionvalue=">=">≥</option></select></div><div><inputtype="text"id="available_quantity"><inputtype="hidden"id="id-value"value="available-qty"></div><div><buttontype="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>