仅用JavaScript无法禁用表格输入文本框？求解决方案

原代码的核心问题 #

• 错误操作非目标元素：找到目标输入框后，你却去获取所有<td>并设置disabled，但<td>本身没有这个属性，应该直接操作找到的输入框。
• 冗余的元素定位：通过row.cells[3]再找input的步骤可以简化，直接在当前行内查询更高效。

修正后的代码 #

var table = {
  disableTextbox: function() {
    var rows = document.querySelectorAll('table tr');
    rows.forEach(function(row, index) {
      // 跳过第2行和第8行（index从0开始计数）
      if (index === 1 || index === 7) {
        return;
      }

      // 直接定位当前行第4列的文本输入框
      var targetInput = row.querySelector('td:nth-child(4) input[type="text"]');
      
      if (targetInput) {
        // 禁用目标输入框
        targetInput.disabled = true;
      }
    });
  }
};

table.disableTextbox();

关键修改点 #

1. 精准定位输入框：用row.querySelector('td:nth-child(4) input[type="text"]')直接找到当前行第四列的文本输入框，避免多余的中间变量。
2. 正确禁用元素：找到目标输入框后，直接给它设置disabled = true，这才是禁用输入框的正确方式。
3. 保留原逻辑：索引判断部分维持你原本的需求——跳过index为1和7的行，若你的表格行索引需要调整（比如表头占了第一行），直接修改index的判断值即可。

额外优化 #

如果页面上有多个表格，建议给目标表格添加专属ID，比如<table id="employeeSchedule">，这样代码里用document.querySelectorAll('#employeeSchedule tr')能避免影响其他表格的元素。

内容的提问来源于stack exchange，提问作者ellekatdub