基於行中文本的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>