-2

How will i pass the arguments to filterText() method,because i'll be calling the same method at more than one place , id is 'filterText' and class name is 'content' , these 2 values i want to pass as a parameter.

function filterText() {
  var rex = new RegExp($('#filterText').val());
  if (rex == "/all/") {
    clearFilter()
  } else {
    $('.content').hide();
    $('.content').filter(function() {
      return rex.test($(this).text());
    }).show();
  }
}


function clearFilter() {
  $('.filterText').val('');
  $('.content').show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TestCase" class="table table-bordered table-striped table-condensed table-hover table-list-search">
  <thead>
    <tr name="Test Module_Header" class="danger">
      <th>
        Module Name
      </th>
      <td colspan="4">
        <strong> CashableCredits</strong>
      </td>
    </tr>

    <tr name="Test case Header" class="info">
      <th style="width: 160px">
        TestCase Name
      </th>
      <th style="width: 160px">
        Scenario Details
      </th>
      <th style="width: 110px">
        Status
        <select id='filterText' style='display:inline-block' onchange='filterText()'>
        <!--i want to parametrize this id 'filterText' -->
          <option disabled selected>Select</option>
          <option value='Passed'> Passed</option>
          <option value='Failed'> Failed</option>
          <option value='Blocked'> Blocked</option>
          <option value='all'> All</option>
        </select>
      </th>
      <th style="width: 160px">
        Start Time
      </th>
      <th style="width: 160px">
        End Time
      </th>
      <th style="width: 170px">
        Total Time Taken
      </th>
      <th style="width: 170px">
        Iteration Count
      </th>
      <th style="width: 140px">
        Exception Stack
      </th>
      <th style="width: 140px">
        Test Case IDs
      </th>
      <th style="width: 140px">
        Screenshot
      </th>
    </tr>
  </thead>
  <tbody>
    <tr name="Script Details" class="content">
    <!-- i want to parameterize this class name 'content' -->
      <td>
        <a href="javascript:;" onclick="toggle_visibility(&#39;redeemCashableCreditLoadedThroughCashier&#39;)">redeemCashableCreditLoadedThroughCashier</a>
      </td>
      <td>
        <a href="javascript:;" onclick="toggle_visibility(&#39;Verify player able to redeem the cashable credit loaded through the cashier&#39;);">View </a>
      </td>
      <td>
        <font style="color: green;"> Passed</font>
      </td>
      <td>
        25/04/17 11:55:30
      </td>
      <td>
        25/04/17 12:07:39
      </td>
      <td>
        0h :12m :9s
      </td>
      <td>
        1
      </td>
      <td>
        <a href="javascript:;" onclick="toggle_visibility(&#39;&#39;);">Click Here
                        </a>
      </td>
      <td>
        <a href="javascript:;" onclick="toggle_visibility(&#39;&#39;);">View </a>
      </td>
      <td>
        <a href="javascript:;" onclick="toggle_visibility(&#39;redeemCashableCreditLoadedThroughCashier_screenshot&#39;);">Click Here </a>
      </td>
    </tr>

In the above html , i want to parametrize id('filterText') & class name('content') to the javascript function.

cweiske
  • 30,033
  • 14
  • 133
  • 194
Jatin Luthra
  • 1
  • 1

3 Answers3

0

Maybe you could try it like this:

function filterText(id, class)
     {  
         var rex = new RegExp(id);
         if(rex =="/all/"){clearFilter()}else{
             $('.'.class).hide();
             $('.'.class).filter(function() {
             return rex.test($(this).text());
             }).show();
     }
     }
rosuandreimihai
  • 656
  • 3
  • 16
  • 39
0

Passing parameters to a JS function is simple :

When declaring the function declare it like so:

function filterText(param1, param2)
     {  
         var rex = new RegExp($(param1).val());
         if(rex =="/all/"){clearFilter()}else{
             $(param2).hide();
             $(param2).filter(function() {
             return rex.test($(this).text());
             }).show();
     }
     }

When calling this function call it like so:

filterText('#filterText','.content');

UPDATE

You can pass any type of selector as parameters, it does not restrict you to pass only id or only class as parameters.

Shakti Phartiyal
  • 6,156
  • 3
  • 25
  • 46
  • I have multiple table in my html , where i'm calling this filterText Method in select tag at th level & passing the class name at tr tag for all the rows of a table which will help me to add filters for all the tables , so i need a way to pass that class name from tr tag and id from select tag to this javascript function – Jatin Luthra May 09 '17 at 19:22
  • @JatinLuthra as I mentioned in the answer you can pass any jQuery selectors like `"#SOME_ID"`, `".SOME_CLASS"`, and in case of tags with a specific class like so `"tr.active"` etc – Shakti Phartiyal May 10 '17 at 04:10
0

Well, if you have a single select

$(function(){
   // For your one select
   $('#select').change(function(){
    var ref = $(this);
    filterText(ref.val())
   });
});

If you want any element with filterText class to work:

<input type="text" class="filterText" value=""/>

function filterText(value) {
  var rex = new RegExp(value || '');
  if (rex == "/all/") {
    clearFilter()
  } else {
    $('.content').hide();
    $('.content').filter(function() {
      return rex.test($(this).text());
    }).show();
  }
}

$(function(){
    // For any filter
   $('.filtertext').change(function(){
    var ref = $(this);
    filterText(ref.val());
   });
});

Inline

onchange="filterText($(this).val())"

Also edit the filterText function to have extra parameters

Michael Fuller
  • 177
  • 1
  • 12
  • But i have multiple table which is having multiple rows so i want to put filter for one column, so the class name is passed at the row level, so that class name will remain unique for individual table, and filterText method i'll be calling in each table at tag th level – Jatin Luthra May 09 '17 at 18:54
  • @JatinLuthra if you want multiple filters, the second way would work, give each filter input a common class and use a extra attribute to specify the filtering info – Michael Fuller May 09 '17 at 21:15