Question

我想转换这个：Select table row and check checkbox using JQuery

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

这是orignal

    $("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的{{1}}。您可以遍历它，然后您可以获得NodeList的内容：

td

Answer 3

使用ElemCollection.forEach.call代替使用Array#slice.call，因为HTMLCollection没有forEach方法
从[1]元素

td

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>

{{1}}

基于行中文本的Javascript复选框

3 个答案: