Table Cell (td) child?

Question

I am trying to search a table cell that has a child (textarea) in it. I have tried td.children.value, td.childNodes.value, td.firstChild.value, td.lastChild.value, td.textarea.value... none of these have worked. here is my snippet:

addCell = function() {
  var table = document.getElementById('myTable');

  var tr = document.createElement('tr');
  var td = document.createElement('td');
  var txt = document.createElement('textarea');

  table.appendChild(tr);
  tr.appendChild(td);
  td.appendChild(txt);
}

searchT = function() {
  var table = document.getElementById('myTable');
  var search = document.getElementById('search');
  var tr = document.getElementsByTagName('tr');
  var td = document.getElementsByTagName('td');

  if (search.value === td.textarea.value) {
    alert('hello');
  }

  /* I have tried:
  
  	td.childNodes.value
    td.children.value
    td.firstChild.value
    td.lastChild.value
    td.textarea.value
  */

}

td {
  background-color: #ccc;
  width: 100px;
  height: 20px;
}

textarea {
  resize: none;
}

.search {
  width: 100px;
}

<button onclick="addCell()">
  add
</button>

<input id="search" placeholder="search">
<button onclick="searchT()">
  search
</button>

<table id="myTable">
  <tr>
    <td>
      <textarea></textarea>
    </td>
  </tr>
</table>

Answer 1

When you do document.getElementsByTagName(), this returns a list of all the items on the document which contain that tag name. In order to find out if it exists in that list (I'm assuming that's what you want) then you have to loop for the list returned by getElementsByTagName().

I'm also assuming that you want to add a table with whatever you entered in the <input> so I added that in the addCell().

addCell = function() {
  var table = document.getElementById('myTable');

  var tr = document.createElement('tr');
  var td = document.createElement('td');
  var txt = document.createElement('textarea');
  var search = document.getElementById('search'); // Get value in input field
  
  table.appendChild(tr);
  tr.appendChild(td);
  txt.innerHTML = search.value; // Set value to table
  td.appendChild(txt);
  
}

searchT = function() {
  var search = document.getElementById('search');
  var textareas = document.getElementsByTagName('textarea'); // Get the textareas instead
  
  for(var i = 0; i < textareas.length; i++) {
    if(search.value === textareas[i].innerHTML) { // If the text matches the search field
      console.log("Found: " + search.value + " at index: " + i);
    }
  }
}

td {
  background-color: #ccc;
  width: 100px;
  height: 20px;
}

textarea {
  resize: none;
}

.search {
  width: 100px;
}

<button onclick="addCell()">
  add
</button>

<input id="search" placeholder="search">
<button onclick="searchT()">
  search
</button>

<table id="myTable">
  <tr>
    <td>
      <textarea readonly="readonly">Template</textarea> <!-- This doesn't have to be readonly but I made it Note: readonly="readonly" is only for valid XHTML. It could be left as readonly without the assignment for valid HTML -->
    </td>
  </tr>
</table>

If you're curious, you can read more about getElementsByTagName() here.

Answer 2

I might start with something like this. The comments should explain what's going on.

// as both functions are using them,
//  I can define these outside the functions.
var myTable = document.getElementById("myTable");
var search = document.getElementById('search');

addCell = function() {
  // create the references to the new els.
  var tr = document.createElement('tr');
  var td = document.createElement('td');
  var txt = document.createElement('textarea');
  // append the new els to my table.
  myTable.appendChild(tr);
  tr.appendChild(td);
  td.appendChild(txt);
}

searchT = function() {
  // Get all the td els in my table.
  let tdEls = myTable.getElementsByTagName("td");

  // Iterate over the array of td els, and

  for (let i = 0; i < tdEls.length; i++) {
    // get the textarea node if they have one
    let textareaEl = tdEls[i].getElementsByTagName("textarea")[0];
    // compare the textarea to the search
    if (textareaEl.value.includes(search.value)) {
      // They match -- do something with them.
      console.log(textareaEl.value);
    }
  }

}

td {
  background-color: #ccc;
  width: 100px;
  height: 20px;
}

textarea {
  resize: none;
}

.search {
  width: 100px;
}

<button onclick="addCell()">
  add
</button>

<input id="search" placeholder="search">
<button onclick="searchT()">
  search
</button>

<table id="myTable">
  <tr>
    <td>
      <textarea></textarea>
    </td>
  </tr>
</table>