Getting results by searching a table - Javascript

Question

I am trying to do a simple search where a number is entered in a textbox and after hitting the button should retrieve the results from that row of a table. For example if I type in 2 in the textbox, after hit hitting the button I have 2 div's called First and Second that should populate 2 and green respectively. Once the loop finds a number and displays the results, it should stop searching. Lastly, if there are no matches, then an alert should pop up that says no results found.

Below is my code. Is there a guru that can help me out? Thank so much.

function myFunction() {

  var input, table, tr, td, i;
  input = document.getElementById("myInputFeed");
  table = document.getElementById("myTableFeed");
  tr = table.getElementsByTagName("tr");

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

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

    if td_1.innerHTML.toUpperCase() == document.getElementById("myInputFeed").innerHTML {
      document.getElementById('First').innerHTML = td_1.innerHTML;
      document.getElementById('Second').innerHTML = td_2.innerHTML;
    }
  }

  // if no results found, then alert saying "no results found"

}

<div id="MainBody">

  Policy Number:
  <input type="text" id="myInputFeed" placeholder="" title="Type Here">

  <input type="button" value="Get Number" onclick="myFunction() " />

  <br>
  <div id="First">
  </div>
  <div id="Second">
  </div>

  <br>

  <div id="TableFeed">
    <table id="myTableFeed">
      <tr>
        <td>1</td>
        <td>red</td>
      </tr>
      <tr>
        <td>2</td>
        <td>green</td>
      </tr>
      <tr>
        <td>3</td>
        <td>orange</td>
      </tr>
      <tr>
        <td>4</td>
        <td>purple</td>
      </tr>
      <tr>
        <td>5</td>
        <td>black</td>
      </tr>
      <tr>
        <td>6</td>
        <td>yellow</td>
      </tr>
    </table>

  </div>
</div>

Answer 1

I made a few changes to your already existing code, you should use .value to access values of input fields and I added a .every method to check if anything in your array matches the input's value if so 'alert' 'no results found. I commented on where I made the changes below:

function myFunction() {

  var input, table, tr, td, i;
  input = document.getElementById("myInputFeed");
  table = document.getElementById("myTableFeed");
  tr = table.getElementsByTagName("tr");

for(i = 0; i < tr.length; i++) {
    var td_1, td_2
    td_1 = tr[i].getElementsByTagName("td")[0];
    td_2 = tr[i].getElementsByTagName("td")[1];
    //use input.value to access value on submit and not innerHTML
    if (td_1.innerHTML == input.value) {
      document.getElementById('First').innerHTML = td_1.innerHTML;
      document.getElementById('Second').innerHTML = td_2.innerHTML;
    }
    // if no results found, then alert saying "no results found"
    

  } 
    ((Object.keys(tr)).every(cell => cell !== input.value)) && (alert("no results found"))
}

<div id="MainBody">

  Policy Number:
  <input type="text" id="myInputFeed" placeholder="" title="Type Here">

  <input type="button" value="Get Number" onclick="myFunction() " />

  <br>
  <div id="First">
  </div>
  <div id="Second">
  </div>

  <br>

  <div id="TableFeed">
    <table id="myTableFeed">
      <tr>
        <td>1</td>
        <td>red</td>
      </tr>
      <tr>
        <td>2</td>
        <td>green</td>
      </tr>
      <tr>
        <td>3</td>
        <td>orange</td>
      </tr>
      <tr>
        <td>4</td>
        <td>purple</td>
      </tr>
      <tr>
        <td>5</td>
        <td>black</td>
      </tr>
      <tr>
        <td>6</td>
        <td>yellow</td>
      </tr>
    </table>

  </div>
</div>

Answer 2

Try this

I changed quite a lot. Try to study it

window.addEventListener("load", function() { // when the page loads
  document.getElementById("getNum").addEventListener("click", function() { // on click of the button I gave an ID
    const input = document.getElementById("myInputFeed").value.trim(); // input value
    const first = document.getElementById('First'); // save the divs
    const second = document.getElementById('Second');
    const res1 = []; // array if you want to find more than one
    const res2 = [];
    [...document.querySelectorAll("#myTableFeed tr")].forEach(tr => {
      const cells = tr.querySelectorAll("td");
      const td_1 = cells[0].textContent.trim().toUpperCase();
      const td_2 = cells[1].textContent.trim().toUpperCase();
      if (td_1 == input) {
        res1.push(td_1)
        res2.push(td_2);
      }
    })
    if (res1.length === 0) first.innerHTML = "no results found";
    else {
      first.innerHTML = res1.join(",")
      second.innerHTML = res2.join(",")
    }
  })
})

<div id="MainBody">

  Policy Number:
  <input type="text" id="myInputFeed" placeholder="" title="Type Here">

  <input type="button" value="Get Number" id="getNum" />

  <br>
  <div id="First">First</div>
  <div id="Second">Second</div>
</div>

<br>

<div id="TableFeed">
  <table id="myTableFeed">
    <tr>
      <td>1</td>
      <td>red</td>
    </tr>
    <tr>
      <td>2</td>
      <td>green</td>
    </tr>
    <tr>
      <td>3</td>
      <td>orange</td>
    </tr>
    <tr>
      <td>4</td>
      <td>purple</td>
    </tr>
    <tr>
      <td>5</td>
      <td>black</td>
    </tr>
    <tr>
      <td>6</td>
      <td>yellow</td>
    </tr>
  </table>
</div>