我正在尝试搜索一个包含子项(文本区域(的表格单元格。我试过了 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>
当你执行document.getElementsByTagName()
时,这将返回document
上包含该标签名称的所有项目的列表。为了找出它是否存在于该列表中(我假设这就是您想要的(,那么您必须循环getElementsByTagName()
返回的列表。
我还假设您想添加一个表格,其中包含您在<input>
中输入的任何内容,所以我在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>
如果您好奇,可以在此处阅读有关getElementsByTagName()
的更多信息。
我可能会从这样的东西开始。评论应该解释发生了什么。
// 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>