[英]Javascript check boxes based on text in rows
I am trying to convert this: Select table row and check checkbox using JQuery 我正在尝试将其转换为: 使用JQuery选择表行并选中复选框
into normal javascript, since I'm in a situation where I cannot use jquery. 进入普通的javascript,因为我处于无法使用jquery的情况。
Here is the orignal 这是原始的
$("table tr").each(function () {
if ($(this).find("td:eq(1)").text().trim() == '2013-03-21') {
$(this).find("input[type=checkbox]").attr("checked", true);
}
});
This is what I have so far, and I'm sure its way off: 这是我到目前为止所拥有的,并且我确信它已经走了:
var elements = [].slice.call(document.querySelectorAll("table tr"));
Array.prototype.forEach(elements, function(){
var tdText = this.querySelectorAll("td").textContent
if (tdText == '2013-03-21') {
this.querySelectorAll("input[type=checkbox]").setAttribute("checked", true);
}
});
This is the original table: 这是原始表:
<table>
<tr>
<td>Record1</td>
<td>2013-03-21</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>Record2</td>
<td>2013-03-22</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>Record3</td>
<td>2013-03-21</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
querySelectorAll()
returns a nodeList of elements. querySelectorAll()
返回元素的nodeList。
You need to iterate those and deal with each instance or use the index you want like: 您需要迭代这些并处理每个实例,或者使用您想要的索引:
element.querySelectorAll("td")[0]
The code var tdText = this.querySelectorAll("td").textContent
will return an undefined textContent because you are referring to the tr
's NodeList
. 代码var tdText = this.querySelectorAll("td").textContent
将返回未定义的textContent,因为您引用的是tr
的NodeList
。 You can loop through it and then you can get the td
's content: 您可以遍历它,然后可以获得td
的内容:
let rows = Array.prototype.slice.call(document.querySelectorAll('table tr'));
let textDate = '2013-03-21';
rows.map((row) => {
let cells = Array.prototype.slice.call(row.querySelectorAll('td'));
for (let i = 0, length = cells.length; i < length; i++) {
if (cells[i].textContent === textDate) {
let cb = row.querySelectorAll('input[type=checkbox]');
cb[0].checked = true;
return;
}
}
});
ElemCollection.forEach.call
instead of using Array#slice.call
as HTMLCollection
does not have forEach
method 使用ElemCollection.forEach.call
而不是Array#slice.call
因为HTMLCollection
没有forEach
方法 [1]
index while selecting text from td
element 从td
元素中选择文本时使用[1]
索引 this
in Array#forEach
does not refer to element
, use first
argument of Array#forEach
callback function which is item
of array
this
在Array#forEach
不是指element
,使用first
的参数Array#forEach
回调函数,它是item
的array
Array.prototype.forEach.call(document.querySelectorAll("table tr"), function(elem) { var tdText = elem.querySelectorAll("td")[1].textContent; if (tdText === '2013-03-21') { elem.querySelector("input[type=checkbox]").setAttribute("checked", true); } });
<table> <tr> <td>Record1</td> <td>2013-03-21</td> <td> <input type="checkbox" /> </td> </tr> <tr> <td>Record2</td> <td>2013-03-22</td> <td> <input type="checkbox" /> </td> </tr> <tr> <td>Record3</td> <td>2013-03-21</td> <td> <input type="checkbox" /> </td> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.