Question

当我运行以下代码时，警报会以“未定义”字样返回。当我想要返回True或False时，取决于在用户触发JavaScript运行时是否检查复选框。

用户使用按钮触发它。目前，当用户按下按钮时，脚本会返回一个未定义的＆＃39;对于表的每一行。

最终我想创建一个JavaScript数组，我将通过Ajax调用传回服务器，但是如果我无法确定表的每一行的复选框的状态，那么这没用。

另外，我使用Jinja2模板解释了大括号，但这应该没什么意义，因为在HTML渲染时创建的表没有问题。

var table = document.getElementById("filterTable");
for (var i=1; i<table.rows.length; i++){
    var isChecked = (table.rows[i].cells[2].checked);
    alert(isChecked);

我的表格如下：

<table class="table table-condensed table hover" id = "filterTable">
    <thead>
         <tr>
            <th>Origin</th>
            <th>Destination</th>
            <th>Active</th>
         </tr>
    </thead>
    <tbody>
        {% for dep in dependencies %}
        <tr class="row">
            <td><p>{{dep.origin}}</p></td>
            <td><p>{{dep.destination}}</p></td>
            <td>
                 <input type="checkbox" value="isSelected"/>
            </td>
        </tr>
        {% endfor %}
    </tbody>
 </table>

Answer 1

该复选框是td的第一个孩子而不是td本身（cells[2]返回第三个td），因此checked属性为td元素总是undefined。

您可以从children属性中获取复选框。

var isChecked = table.rows[i].cells[2].children[0].checked;

var table = document.getElementById("filterTable");
for (var i = 1; i < table.rows.length; i++) {
  var isChecked = (table.rows[i].cells[2].children[0].checked);
  alert(isChecked);
}

<table id="filterTable">
  <thead>
    <tr>
      <th>Origin</th>
      <th>Destination</th>
      <th>Active</th>
    </tr>
  </thead>
  <tbody>
    <tr class="row">
      <td>
        <p>{{dep.origin}}</p>
      </td>
      <td>
        <p>{{dep.destination}}</p>
      </td>
      <td>
        <input type="checkbox" value="isSelected" />
      </td>
    </tr>
  </tbody>
</table>

如果孩子还有其他元素，那么您可以使用querySelector()方法和attribute equals selector来获取它。

var isChecked = table.rows[i].cells[2].querySelector('[type="checkbox"]').checked;

var table = document.getElementById("filterTable");
for (var i = 1; i < table.rows.length; i++) {
  var isChecked = (table.rows[i].cells[2].querySelector('[type="checkbox"]').checked);
  alert(isChecked);
}

<table id="filterTable">
  <thead>
    <tr>
      <th>Origin</th>
      <th>Destination</th>
      <th>Active</th>
    </tr>
  </thead>
  <tbody>
    <tr class="row">
      <td>
        <p>{{dep.origin}}</p>
      </td>
      <td>
        <p>{{dep.destination}}</p>
      </td>
      <td>
        <input type="checkbox" value="isSelected" />
      </td>
    </tr>
  </tbody>
</table>

Answer 2

table.rows[i].cells[2]只能找到包含td。{/ p>的checkbox

在检查属性之前，您需要查询checkbox。

var td = table.rows[i].cells[2];
var checkbox = td..querySelector('input[type="checkbox"]');
var isChecked = checkbox.checked;

从表返回未定义的Javascript复选框

2 个答案: