getElementsByTagName multiple field

5

The code adaptation was to create another variable with the same function and I missed it thanks to @BDOM, I hope that someone else is useful.

Now, is there a better way to adapt the code that is more correct?

Code in operation:

  function Searchcamp() {
  var input, filter, table, tr, td, ts, i;
  input = document.getElementById("camp0");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    ts = tr[i].getElementsByTagName("td")[1];
    if (td && ts) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1 || ts.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
<input type="text" id="camp0" onkeyup="Searchcamp()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:10%;">ID</th>
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>
    
asked by Vicente 26.03.2018 в 15:04
source

3 answers

4

Using jQuery is easier, I'll give you an example of what you want to do by doing a global search in all td , except the First. More than anything I use it for the selector that it has, it is similar to the selector of CSS .

// función Searchcamp
function Searchcamp() {
  // "this" es el elmento en el que fue llamado
  var input = $(this).val().toUpperCase();
  
  // obtengo los tr que vienen después del primero
  // así evito que entre el ID, Name y Country
  $('#myTable tr + tr').each(function(index) {
    // asigno this con tr y oculto todos
    var tr = $(this);
    tr.css('display', 'none');
    
    $(this).find('td').each(function(index) {
      var tdText = $(this).text().toUpperCase();
      
      // si tiene un valor existente, muestro el tr
      if (tdText.indexOf(input) > -1) {
        tr.css('display', '');
      }
    });
  });
}

// Un vez que esté listo el DOM
$(document).ready(function() {
  // asigno el evento "keyup" al input
  $('#camp0').on('keyup', Searchcamp);
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<input type="text" id="camp0" placeholder="Search for names.." title="Type in a name" />

<table id="myTable">
  <tr class="header">
    <th style="width:10%;">ID</th>
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>
    
answered by 26.03.2018 / 20:18
source
3

I edit my previous answer to create one that is more according to what you ask for.

var indexCols = [0,1,2,3];
Searchcamp(indexCols);

function Searchcamp(indexCols) {    
    var input, filter, table, tr, td, i;
    input = document.getElementById("camp0");
    filter = input.value.toUpperCase();
    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {               
        for(z=0; z<indexCols.length; z++){        
            td = tr[i].getElementsByTagName("td")[indexCols[z]];    
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }       
        }
    }
}

I have made that when you call the function you send an array of the columns that you want to filter, in this case it is the td[0] , td[1] , td[2] and td[3] but it could be any td and as many as you want. Therefore to look for columns 3 and 4 you should run:

var indexCols = [2,3]
Searchcamp(indexCols) ;

Do not forget that arrays start counting from 0, so column 1 is position 0 of the array.

    
answered by 26.03.2018 в 15:26
3

Use the OR condition ( || ) in your if to specify multiple filters per column:

  function Searchcamp() {
  var input, filter, table, tr, td, ts, i;
  input = document.getElementById("camp0");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    ts = tr[i].getElementsByTagName("td")[1];
    if (td && ts) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1 || ts.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

I took the code from your second JS to test and it works correctly.

I hope it helps.

    
answered by 26.03.2018 в 19:23