基于行中文本的Javascript复选框

Question

我正在尝试将其转换为： 使用JQuery选择表行并选中复选框

进入普通的javascript，因为我处于无法使用jquery的情况。

这是原始的

    $("table tr").each(function () {
    if ($(this).find("td:eq(1)").text().trim() == '2013-03-21') {
     $(this).find("input[type=checkbox]").attr("checked", true);
  }
});

这是我到目前为止所拥有的，并且我确信它已经走了：

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

这是原始表：

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

Answer 1

querySelectorAll()返回元素的nodeList。

您需要迭代这些并处理每个实例，或者使用您想要的索引：

element.querySelectorAll("td")[0]

Answer 2

代码var tdText = this.querySelectorAll("td").textContent将返回未定义的textContent，因为您引用的是tr的NodeList 。 您可以遍历它，然后可以获得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;
        }
    }
});

Answer 3

• 使用ElemCollection.forEach.call而不是Array#slice.call因为HTMLCollection没有forEach方法
• 从td元素中选择文本时使用[1]索引
• 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>