如何查找包含textarea子元素的表格单元格(td)？多种尝试均失败

嘿，我来帮你搞定这个查找td里textarea值的问题！你遇到的核心问题有两个：一是你拿到的td是所有表格单元格的集合，不是单个元素；二是获取td内textarea的方式不对，DOM元素没有直接的textarea属性哦。

先给你拆解下你之前尝试的几种方法为啥行不通：

• td.children.value / td.childNodes.value：这两个都是子节点/子元素的集合，集合本身没有value属性，得先拿到具体的元素
• td.firstChild.value / td.lastChild.value：如果td里有换行、空格这些文本节点，firstChild/lastChild可能会指向这些文本节点，而不是textarea；就算指向textarea，也得确保你拿到的是元素节点再取value
• td.textarea.value：DOM元素没有这个内置属性，这不是获取子元素的正确方式

修正后的完整代码 #

下面是调整后的代码，能正确遍历所有td并查找里面的textarea值：

HTML部分

<button onclick="addCell()"> add </button>
<input id="search" placeholder="search" class="search">
<button onclick="searchT()"> search </button>
<table id="myTable">
 <tr>
 <td>
 <textarea></textarea>
 </td>
 </tr>
</table>

CSS部分

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

JavaScript部分

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 searchInput = document.getElementById('search');
 var targetValue = searchInput.value.trim(); // 去除首尾空白，避免空格干扰
 var allTds = document.getElementsByTagName('td');

 // 遍历每一个td单元格
 for (let i = 0; i < allTds.length; i++) {
   const currentTd = allTds[i];
   // 在当前td里查找textarea子元素
   const textarea = currentTd.querySelector('textarea');
   
   // 如果找到textarea，并且值匹配
   if (textarea && textarea.value.trim() === targetValue) {
     alert('hello');
     return; // 找到第一个匹配项就停止，若要找所有可去掉return
   }
 }
 // 没有找到匹配项时提示
 alert('未找到匹配内容');
}

关键改进点 #

1. 遍历所有td：用循环处理getElementsByTagName返回的元素集合，而不是直接操作集合本身
2. 正确获取textarea：用querySelector('textarea')在当前td范围内查找子元素，简单直接；你也可以用currentTd.getElementsByTagName('textarea')[0]，效果一样
3. 严谨性优化：用trim()去除输入内容的首尾空格，避免因为不小心输入空格导致匹配失败

这样调整后，就能正确匹配到td里textarea的内容啦！

内容的提问来源于stack exchange，提问作者hannacreed