10

I used w3School code for my page and it works fine but it only filters one column, don’t know how create loops but hopping there is easier solution.

    td = tr[i].getElementsByTagName("td")[0];

changing here 0 to 1 changes the column, could find anything so tried many different thing but not the programmer have no idea if there any other properties that allows multiple columns, spent so much searching, please help

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  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];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th,
#myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
  background-color: #f1f1f1;
}
<h2>My Customers</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search             for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

Improve this question
1
  • 1
    Please use other resources than w3schools, it's not particularly good (e.g. MDN for tables and rows). Instead of tr[i].getElementsByTagName("td")[0] you can use tr[i].cells[0]. A lot less to type. ;-) Also, please format your code neatly, the easier it is to read, the more likely people are to help. Commented Apr 25, 2017 at 22:53

15 Answers 15

Reset to default
44

There are significantly better resources on the web than W3 Schools, you really should avoid that website IMO. That being said, you just need to look at tr rather than one of the tds if you want to match the whole row:

function myFunction() {
    var input = document.getElementById("myInput");
    var filter = input.value.toUpperCase();
    var table = document.getElementById("myTable");
    var tr = table.getElementsByTagName("tr");
    for (var i = 0; i < tr.length; i++) {
        if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }      
    }
}

If you want to filter multiple columns instead of the whole row, just use OR (||) in your condition:

function myFunction() {
    var input = document.getElementById("myInput");
    var filter = input.value.toUpperCase();
    var table = document.getElementById("myTable");
    var tr = table.getElementsByTagName("tr");
    var tds = tr.getElementsByTagName('td');
    
    for (var i = 0; i < tr.length; i++) {
        var firstCol = tds[0].textContent.toUpperCase();
        var secondCol = tds[1].textContent.toUpperCase();
        if (firstCol.indexOf(filter) > -1 || secondCol.indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }      
    }
}

Some reasons why this tutorial isn't great: you should avoid using innerHTML and should instead use textContent since it's possible that your cells will have HTML and the user could type a tag name when trying to search for visible text and be confused by what is matching. You should give your functions names that indicate what they do (e.g. filterTable instead of myFunction). Additionally, there are easier ways to access table data (e.g. tr.cells). If you add a keyup event listener to #myInput you will not need to lookup that DOM node everytime the function is called. Here is an example:

function filterTable(event) {
    var filter = event.target.value.toUpperCase();
    var rows = document.querySelector("#myTable tbody").rows;
    
    for (var i = 0; i < rows.length; i++) {
        var firstCol = rows[i].cells[0].textContent.toUpperCase();
        var secondCol = rows[i].cells[1].textContent.toUpperCase();
        if (firstCol.indexOf(filter) > -1 || secondCol.indexOf(filter) > -1) {
            rows[i].style.display = "";
        } else {
            rows[i].style.display = "none";
        }      
    }
}

document.querySelector('#myInput').addEventListener('keyup', filterTable, false);
<input id="myInput" type="text" />
<table id="myTable">
 <thead>
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
 </tbody>
</table>

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Rob u the man!!! it took me some time to figure out what u did but its workig now, thanks a mil (last one worked)
This worked beautifully. Mind telling me how I would include two different inputs? Thank you!
Hi @joshlsullivan, are you asking how you would have two different text inputs filter the table?
@RobM. Yes, sir.
@joshlsullivan If you want them to do the same filtering, you can just use querySelectorAll with multiple selectors and attach the event listeners using forEach. Example: jsbin.com/meyugud/edit?html,js,output
|
3

Adding || and adding the new condition under if statements totally worked.

function myFunction() {
var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  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]; // for column one
     td1 = tr[i].getElementsByTagName("td")[1]; // for column two
/* ADD columns here that you want you to filter to be used on */
    if (td) {
      if ( (td.innerHTML.toUpperCase().indexOf(filter) > -1) || (td1.innerHTML.toUpperCase().indexOf(filter) > -1) )  {            
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
} 
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th,
#myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
  background-color: #f1f1f1;
}
<h2>My Customers</h2>

<input type="text" id="myInput" onkeyup="myFunction()" 
placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

Improve this answer

Comments

1

You just need to add another loop to go over the cells, so:

table = document.getElementById("myTable");
//  tr = table.getElementsByTagName("tr");
// Easier to use the rows collection:
var tr = table.rows;

for (i = 0; i < tr.length; i++) {

  // Easier to use the cells collection
  // td = tr[i].getElementsByTagName("td")[0];
  cells = row.cells;

  // Loop over all the cells
  for (var j=0, jLen=cells.length; j<jLen; j++) {
    td = cells[j];

    // Existing loop
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
Improve this answer

2 Comments

Wouldn't it make more sense to just use the innerHTML of the entire row then looping over each cell?
@RobM.—sure, or textContent, but I think looping over the cells provides a greater learning opportunity. ;-)
1

Add this JQuery in the head tag of the file. The #myinput is the id search box which is an input element of type text. The #tab-id is the id of the tbody, so you should explicitly divide the table into thead and tbody

<script>
    $(document).ready(function(){
        $("#myInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#tab-id tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });
    });
</script>
Improve this answer

Comments

1

Here is correct function

function myFunction() {
    var input = document.getElementById("myInput");
    var filter = input.value.toUpperCase();
    var table = document.getElementById("myTable");
    var tr = table.getElementsByTagName("tr");
    for (var i = 0; i < tr.length; i++) {
        if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }      
    }
}

Should be tr[i].textContent

Improve this answer

Comments

1

Your code is fine. To add multiple columns you need to add || condition (in if clause).

The problem with Rob's answer is it will filter out table headings if you use tr.

Here is extension to code:

function myFunction() {
var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  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]; // for column one
     td1 = tr[i].getElementsByTagName("td")[1]; // for column two
/* ADD columns here that you want you to filter to be used on */
    if (td) {
      if ( (td.innerHTML.toUpperCase().indexOf(filter) > -1) || (td1.innerHTML.toUpperCase().indexOf(filter) > -1) )  {            
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
Improve this answer

Comments

0

Based on probably the same tutorial that you followed, to take in three different text inputs and sort all 's in the row accordingly: 

function SortByMultiple() {

    //Declare needed variables
    var dateInput, nameInput, locationInput, dateFilter, nameFilter, locationFilter, table, tr, tdN, tdD, tdL, i;

    //Set inputs by getElementById
    nameInput = document.getElementById('nameInput');
    dateInput = document.getElementById('dateInput');
    locationInput = document.getElementById('locationInput');
    //Set filters
    nameFilter = nameInput.value.toUpperCase();
    dateFilter = dateInput.value.toUpperCase();
    locationFilter = locationInput.value.toUpperCase();
    //Set the table and tr variables
    table = document.getElementById("UL");
    tr = document.getElementsByTagName("tr");

    //Loop through items and hide those that don't match the query -->
    for (i = 0; i < tr.length; i++) {

        //Name is at index 0
        tdN = tr[i].getElementsByTagName("td")[0];
        //Date is at index 2
        tdD = tr[i].getElementsByTagName("td")[2];
        //Location is at index 1
        tdL = tr[i].getElementsByTagName("td")[1];

        if (tdN.innerHTML.toUpperCase().indexOf(nameFilter) > -1 && tdD.innerHTML.toUpperCase().indexOf(dateFilter) > -1 && tdL.innerHTML.toUpperCase().indexOf(locationFilter) > -1) {
            tr[i].style.display = "";
        }
        else {
            tr[i].style.display = "none";
        }
    }

}

By setting the conditions after each others with AND they will all be taken into account in the filter!

Improve this answer

Comments

0

This solution is for multi column filter with multiple values

The empty text boxes is to type your value to filter

Class name for all the text boxes are '.filter_rep'

  $(document).on('keyup','.filter_rep',function () {
    var $this = $(this).val();
    var val_array = [];
    var id_array = [];

    $('.filter_rep').each(function () {
        thisval = $(this).val();
        id = '.'+$(this).attr('id');
        if (thisval){
            id_array.push(id);
            val_array.push(thisval);
        }
    });
    // using val_array to check all the columns and hide
    if(val_array.length > 0){
        $('tr').each(function () {
            $(this).show();
        });
        for (i=0;i<val_array.length;i++){
            $(id_array[i]).each(function () {
                if (!($(this).text().toLowerCase().indexOf(val_array[i]) > -1)){
                    $(this).parent().hide();
                }
            });
        }
    }else{
        $('tr').each(function () {
          $(this).show();
        });
    }
})

});

If any clarifications ping me!

Improve this answer

Comments

0

I just used the same W3 code that you started with, and I found this fairly elegant solution -- which should work for large numbers of columns 

    function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("mainTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    td2 = tr[i].getElementsByTagName("td")[1];
    if (td || td2) {
      txtValue = td.textContent || td.innerText;
      txtValue2 = td2.textContent || td2.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1 || txtValue2.toUpperCase().indexOf(filter) > -1 ) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
Improve this answer

Comments

0

Code that works for filtering multiple columns dynamically. No changes needed.

    function myFunction(elem) {
        var input, filter, table, tr, td, i, txtValue;
        input = elem;
        filter = input.value.toUpperCase();
        table = document.getElementById("YourTableId");
        tr = table.getElementsByTagName("tr");
        for (i = 1; i < tr.length; i++) {
            tds = tr[i].getElementsByTagName("td");
            var matches = false;

            for (j = 0; j < tds.length; j++) {
                if (tds[j]) {
                    txtValue = tds[j].textContent || tds[j].innerText;
                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
                        matches = true;
                    } 
                }
            }

            if(matches == true)
            {
                tr[i].style.display = "";
            }
             else {
                    tr[i].style.display = "none";
                }

            }
        }
Improve this answer

Comments

0

Enhanced Rob.M's answer to suit multi-column search with below code.

function filterTable(event) {
//Convert search value to uppercase and assign the value to variable 'filter'
var filter = event.target.value.toUpperCase();
//Find total rows in the table's body
var rows = document.querySelector("#table tbody").rows;
//Start looping rows
for (var i = 0; i < rows.length; i++) {
    //Count the columns in current row
    var colCount = $("#table th").length;
    //Assign a variable 'res' for result counting
    var res = 1;
    //Start looping columns in current row
    for (let j = 0; j < colCount; j++) {
        //Iterate single cell and convert the contents to uppercase, assign the content to variable 'x'
        var x = "col_" + j;
        var x = rows[i].cells[j].textContent.toUpperCase();
        //find the position of first index of the search value.
        //If search value found ADD 1 to 'res' else LESS 1
        x.indexOf(filter) > -1 ? res++ : res--;
    }
    //Convert the colCount variable to absolute value
    colCount = -Math.abs(colCount - 1);
    //Display or hide the row, based on result condition
    res > colCount || filter == "" ? (rows[i].style.display = "") : (rows[i].style.display = "none");
}

}

Improve this answer

Comments

0

I uploaded the code here to search table data among two columns

function searching() {
    var input, filter, table, tr, td1, td2, i, txtValue;
    input = document.getElementById("search");
    filter = input.value.toUpperCase();
    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");

    for (i = 0; i < tr.length; i++) { 
        td1 = tr[i].getElementsByTagName("td")[0];
        td2 = tr[i].getElementsByTagName("td")[1];
        if (td1 || td2) {
            txtValue1 = td1.textContent || td1.innerText;
            txtValue2 = td2.textContent || td2.innerText;
            if (txtValue1.toUpperCase().indexOf(filter) > -1 || (txtValue2.toUpperCase().indexOf(filter) > -1)) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}


<input class="form-control my-3" id="search" onkeyup="searching()" type="search" placeholder="Search To-Do items here..." aria-label="Search">


<table class="table my-5">
    <thead class="thead-dark">
        <tr>
            <th scope="col ">Sr No.</th>
            <th scope="col ">Item</th>
            <th scope="col ">Description</th>
            <th scope="col ">Manage</th>
        </tr>
    </thead>
    <tbody id="table">
    </tbody>
</table>

Improve this answer

1 Comment

While the code may address the question, some explanation would help future readers. See How to Answer to improve your post.
0

I'm working on a project with heavy lists and data table rows are often more than 1000-2000. the big problem is the lag time in filtering big tables as js need to check the whole html every time a key is pressed.

enter image description here

I've tested lots of ways, and the fastest one was using Array to gathering up data in one place and then filter them from array, the result keys will be sent back to html to add 'collapse' class.

JAVASCRIPT

<script>
function multifilter_table(f_table, f_input, f_type, f_td) {
    const filter = {};
    f_input.forEach(function(currentValue, index, arr) {
        var in_val = (f_type[index] == 'i') ? document.getElementById(currentValue).value : document.getElementById(currentValue).options[document.getElementById(currentValue).selectedIndex].value;
        if (in_val != '')
            filter[index] = in_val;
    });

    var table = Array.prototype.map.call(trList = document.getElementById(f_table).getElementsByTagName('tr'), function(tr){
        return Array.prototype.map.call(tr.getElementsByTagName('td'), function(td){
            return td.textContent || td.innerText;
        });
    });
    
    for (i = 1; i < table.length; i++) {
        var match_input = true;
        for (let index in filter) {
            if (table[i][f_td[index]].indexOf(filter[index]) == -1)
                match_input = false;
        }
        match_input ? trList[i].classList.remove('collapse') : trList[i].classList.add('collapse');
    }
}
</script>

HTML + CSS

<style>
  .collapse {display: none;}
</style>


<table id="filter_table">
      <thead>
      <tr>
        <th><input id="filter_fname" onkeyup="TestFilter()" /></th>
        <th><input id="filter_lname" onkeyup="TestFilter()" /></th>
        <th><input id="filter_gender" onkeyup="TestFilter()" /></th>
        <th><input id="filter_depart" onkeyup="TestFilter()" /></th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>Male</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>Female</td>
        <td>Service</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>Female</td>
        <td>Service</td>
      </tr>
      <tr>
        <td>Anja</td>
        <td>Ravendale</td>
        <td>Female</td>
        <td>Engineering</td>
      </tr>
      <tr>
        <td>Thomas</td>
        <td>Dubois</td>
        <td>Male</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td>Deidre</td>
        <td>Masters</td>
        <td>Female</td>
        <td>Sales</td>
      </tr>
      <tr>
        <td>Sean</td>
        <td>Franken</td>
        <td>Male</td>
        <td>Engineering</td>
      </tr>
      </tbody>
    </table>

And the TestFilter() function is defined like this:

<script>
function TestFilter() {
    multifilter_table(  'filter_table',
                        ['filter_fname', 'filter_lname', 'filter_gender', 'filter_depart'],
                        ['i', 'i', 'i', 'i'],
                        ['0', '1', '2', '3']
                    );
}
</script>
Improve this answer

Comments

-1 

function filterTable(event) {
    var filter = event.target.value.toUpperCase();
    var rows = document.querySelector("#myTable tbody").rows;
    
    for (var i = 0; i < rows.length; i++) {
        var firstCol = rows[i].cells[0].textContent.toUpperCase();
        var secondCol = rows[i].cells[1].textContent.toUpperCase();
        if (firstCol.indexOf(filter) > -1 || secondCol.indexOf(filter) > -1) {
            rows[i].style.display = "";
        } else {
            rows[i].style.display = "none";
        }      
    }
}

document.querySelector('#myInput').addEventListener('keyup', filterTable, false);
<input id="myInput" type="text" />
<table id="myTable">
 <thead>
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
 </tbody>
</table>

Improve this answer

Comments

-1

Borrowing code from this post I am able to filter on 2 columns using the || (Or) operator. However, I'd like to be able to filter using the && (And) operator.

I have been unsuccessful in my multiple attempts. I could use some help.

<script>
function myFunction() {
  var input0, input1, filter0, filter1, table, tr, td, cell, i, j;
  document.getElementById("myInput0").value = 'Female';
  document.getElementById("myInput1").value = 'Engineering';
  input0 = document.getElementById("myInput0");
  input1 = document.getElementById("myInput1");
  filter0 = input0.value.toUpperCase();
  filter1 = input1.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 1; i < tr.length; i++) {
    // Hide the row initially.
  tr[i].style.display = "none";

  td = tr[i].getElementsByTagName("td");
    for (var j = 0; j < td.length; j++) {
      cell = tr[i].getElementsByTagName("td")[j];
      if (cell) {
         if (cell.textContent.toUpperCase().indexOf(filter0)>-1 || 
    cell.textContent.toUpperCase().indexOf(filter1)>-1) {
          tr[i].style.display = "";
          break;
        } 
      }
    }
  }
}
</script>

<body>
<input type="text" id="myInput0">
<input type="text" id="myInput1">
<input type='button' onclick='myFunction()' value='click me' />

<table id="myTable">
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Gender</th>
    <th>Department</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Male</td>
    <td>Sales</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>Female</td>
    <td>Service</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>Female</td>
    <td>Service</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>Female</td>
    <td>Engineering</td>
  </tr>
  <tr>
    <td>Thomas</td>
    <td>Dubois</td>
    <td>Male</td>
    <td>Sales</td>
  </tr>
  <tr>
    <td>Deidre</td>
    <td>Masters</td>
    <td>Female</td>
    <td>Sales</td>
  </tr>
  <tr>
    <td>Sean</td>
    <td>Franken</td>
    <td>Male</td>
    <td>Engineering</td>
  </tr>
  </tbody>
</table>

</body>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.