为什么我无法禁用表格中的输入文本框（我尝试仅使用 JavaScript）？

Question

我正在尝试使用 JavaScript 禁用表格中的一些文本框。

我的JavaScript

var table = {
  disableTextbox: function() {
    var rows = document.querySelectorAll('table tr');
    rows.forEach(function(row, index) {
    
    if (index === 1 || index === 7) {
      return;
    }

    var variable1 = row.cells[3];
    var variable2 = variable1.querySelector('input[type="text"]');
    
    if (variable2) {
      var variable3 = document.getElementsByTagName('td');
      variable3.disabled = true;
      }
    });
  }
};

table.disableTextbox();

<tr>
  <td>Employee Name:</td>
  <td>Schedule Time:</td>
  <td>Tasks Done:</td>
  <td><input type="text" name="yesOrNo" /></td>
</tr>

我的表格某一行的 HTML。我不想包含所有 10 行，因为放在这里的内容太多了，而且除了带标签的文本之外，一切都是一样的（例如，我不想包含在此处的人名）

感谢所有建议！谢谢！

Answer 1

您的代码中存在一些问题。

首先

getElementsByTagName()

返回一个NodeList，而不是单个元素。因此，您需要循环遍历列表并将其中的每个元素设置为

disabled

，而不是 NodeList 本身。

其次，

td

没有

disabled

属性。这仅适用于

input

，因此您定位了错误的元素。

话虽如此，您的代码比需要的复杂得多。您可以使用

querySelectorAll()

以及

:not()

和

:nth-child()

的组合来简化它，以启用第二行和第八行：

var table = {
  disableTextbox: function() {
    document.querySelectorAll('table tr:not(:nth-child(1)):not(:nth-child(7)) input')
      .forEach(el => el.disabled = true);
  }
};

table.disableTextbox();

<table>
  <tr>
    <td>Employee Name:</td>
    <td>Schedule Time:</td>
    <td>Tasks Done:</td>
    <td><input type="text" name="yesOrNo" /></td>
  </tr>
  <tr>
    <td>Employee Name:</td>
    <td>Schedule Time:</td>
    <td>Tasks Done:</td>
    <td><input type="text" name="yesOrNo" /></td>
  </tr>
  <tr>
    <td>Employee Name:</td>
    <td>Schedule Time:</td>
    <td>Tasks Done:</td>
    <td><input type="text" name="yesOrNo" /></td>
  </tr>
  <tr>
    <td>Employee Name:</td>
    <td>Schedule Time:</td>
    <td>Tasks Done:</td>
    <td><input type="text" name="yesOrNo" /></td>
  </tr>
  <tr>
    <td>Employee Name:</td>
    <td>Schedule Time:</td>
    <td>Tasks Done:</td>
    <td><input type="text" name="yesOrNo" /></td>
  </tr>
  <tr>
    <td>Employee Name:</td>
    <td>Schedule Time:</td>
    <td>Tasks Done:</td>
    <td><input type="text" name="yesOrNo" /></td>
  </tr>
  <tr>
    <td>Employee Name:</td>
    <td>Schedule Time:</td>
    <td>Tasks Done:</td>
    <td><input type="text" name="yesOrNo" /></td>
  </tr>
  <tr>
    <td>Employee Name:</td>
    <td>Schedule Time:</td>
    <td>Tasks Done:</td>
    <td><input type="text" name="yesOrNo" /></td>
  </tr>
</table>