Question

我正在尝试搜索其中包含子（textarea）的表格单元格。我试过了 td.children.value， td.childNodes.value， td.firstChild.value， td.lastChild.value， td.textarea.value ......这些都没有奏效。这是我的片段：

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

我可能会从这样的事情开始。评论应该解释发生了什么。

// 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>

Answer 2

执行document.getElementsByTagName()时，会返回document上包含该标记名称的所有项目的列表。为了找出它是否存在于该列表中（我假设你想要的是什么），那么你必须循环查找getElementsByTagName()返回的列表。

我还假设您要添加一张表格，其中包含您在<input>中输入的内容，因此我在addCell()中添加了该表格。

＆＃13;

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);
    }
  }
}

＆＃13;

td {
  background-color: #ccc;
  width: 100px;
  height: 20px;
}

textarea {
  resize: none;
}

.search {
  width: 100px;
}

＆＃13;

<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>

＆＃13;

如果您有好奇心，可以详细了解getElementsByTagName() here.

表格细胞（td）孩子？

2 个答案: