javascript - 如何使用javascript根据另一个单元格上的单选按钮更改表格单元格颜色？

您当前的实现存在一些问题：

该<tr>元素未包含在任何一个中<tbody>。<thead>，<tfoot>或元素（元素可能是子<table>元素的唯一元素，<tr>
唯一具有for属性的元素是<label>元素；属性的值for应该等于它所引用id的元素的属性值<label>（一个<label>元素只能引用一个元素，尽管一个<input>,<textarea>或<select>元素可以与多个<label>元素相关联），
您的<table>数据在本质上似乎不是表格（来自提供的简短、不完整的样本）；如果您<table>出于布局原因使用 a ，那么您应该考虑改变您的方法，
您正在使用多个功能来做同样的事情，尽管使用不同的元素；记住DRY原则：不要重复自己，并且
您正在使用突兀的 JavaScript——onclick在 HTML 中带有事件处理程序（the ）——这会使您的代码的未来维护变得复杂。

考虑到所有这些，我是否可以提出一个替代方案：

// creating a single named function to handle the required functionality:
const activateElement = function() {

  // here 'this' refers to the element to which the event-listener was bound,
  // automagically supplied from the EventTarget.addEventListener() method;

  // from the changed <input> we find the closest <tr> ancestor element:
  let textarea = this.closest('tr').querySelector('textarea'),

    // from the chnaged <input> we find the closest <td> ancestor element:
    cell = this.closest('td'),

    // from the <td> (the 'cell' variable) we retrieve the textContent,
    // and convert it to lower-case, using String.prototype.toLowerCase():
    active = cell.textContent.toLowerCase();

  // here set the custom data-* attribute-value to be equal to the
  // value retrieved from the <td> ('cell') element:
  textarea.dataset.isactive = active;

  // here we set the disabled property to the result of the expression,
  // if the 'active' variable is exactly equal to 'none' the disabled
  // property is set to true (and the element is disabled), otherwise
  // the disabled property is set to false (and the element is enabled):
  textarea.disabled = active === 'none';
};

// here we retrieve a (non-live) NodeList of all <input> elements with
// the 'type' attribute-value equal to 'radio'; we then use
// NodeList.prototype.forEach() to iterate over those elements:
document.querySelectorAll('input[type=radio]').forEach(
  // here we use an Arrow function (because we don't need to use 'this');
  // 'input' (the argument) is a reference to the current Node of the
  // NodeList over which we're iterating:
  (input) => {
    // here we bind an event-listener to the current <input> element/Node
    // and bind the activateElement function (note the deliberate lack of
    // parentheses) as the event-handler for the 'change' event:
    input.addEventListener('change', activateElement);
  });

/*
  here we select all <textarea> elements with a
  data-isactive attribute-value is equal to 'one':
*/
textarea[data-isactive="one"] {
  background-color: lime;
}


/*
  here we select all <textarea> elements with a
  data-isactive attribute-value is equal to 'two':
*/
textarea[data-isactive="two"] {
  background-color: fuchsia;
}


/*
  here we select all <textarea> elements; this selector
  is less specific than the preceding selectors so this will
  only apply to those <textarea> elements without a 'data-isactive'
  attribute, or with an attribute-value which is not equal to
  either 'one' or 'two':
*/
textarea {
  background-color: #fff;
}

<!-- using valid HTML, with the <tr> appropriately wrapped in a <tbody> element, itself
     within a <table> element: -->
<table>
  <tbody>
    <tr>
      <th>class</th>
      <!-- wrapping the <input> elements in <label> elements,
           in order that the user sees some instruction/guidance
           as to what the form control does; and removing the
           onclick event-handler: -->
      <td><label>one<input name="class" type="radio" /></label></td>
      <td><label>two<input name="class" type="radio" /></label></td>
      <td><label>none<input name="class" type="radio" /></label></td>
      <td><textarea name="comments"></textarea></td>
    </tr>
  </tbody>
</table>

JS 小提琴演示。

现在，上面的函数是专门编写的，以允许将其他行添加到<table>可以调用相同函数的行中，例如：

const activateElement = function() {
  let textarea = this.closest('tr').querySelector('textarea'),
    cell = this.closest('td'),
    active = cell.textContent.toLowerCase();

  textarea.dataset.isactive = active;

  textarea.disabled = active === 'none';
};

document.querySelectorAll('input[type=radio]').forEach(
  (input) => {
    input.addEventListener('change', activateElement);
  });

textarea[data-isactive="one"] {
  background-color: lime;
}

textarea[data-isactive="two"] {
  background-color: fuchsia;
}

textarea {
  background-color: #fff;
}

<table>
  <tbody>
    <tr>
      <th>class</th>
      <td><label>one<input name="class1" type="radio" /></label></td>
      <td><label>two<input name="class1" type="radio" /></label></td>
      <td><label>none<input name="class1" type="radio" /></label></td>
      <td><textarea name="comments"></textarea></td>
    </tr>
    <tr>
      <th>class</th>
      <td><label>one<input name="class2" type="radio" /></label></td>
      <td><label>two<input name="class2" type="radio" /></label></td>
      <td><label>none<input name="class2" type="radio" /></label></td>
      <td><textarea name="comments"></textarea></td>
    </tr>
    <tr>
      <th>class</th>
      <td><label>one<input name="class3" type="radio" /></label></td>
      <td><label>two<input name="class3" type="radio" /></label></td>
      <td><label>none<input name="class3" type="radio" /></label></td>
      <td><textarea name="comments"></textarea></td>
    </tr>
    <tr>
      <th>class</th>
      <td><label>one<input name="class4" type="radio" /></label></td>
      <td><label>two<input name="class4" type="radio" /></label></td>
      <td><label>none<input name="class4" type="radio" /></label></td>
      <td><textarea name="comments"></textarea></td>
    </tr>
  </tbody>
</table>

JS 小提琴演示。

当然，请注意，您仍然需要调整name添加的元素组的属性<input>。

参考：

javascript - 如何使用javascript根据另一个单元格上的单选按钮更改表格单元格颜色？

问题描述

解决方案

推荐阅读