Question

如果要单击其他单元格中的单选按钮之一，我想更改单元格颜色。我不知道为什么我的代码不起作用

<tr>
 <td>class</td>
 <td><input name="class"type="radio" onClick="enableElement1(this.form.work_permit);"/></td>
 <td><input name="class"type="radio" onClick="enableElement2(this.form.work_permit);"/></td>
 <td><input name="class"type="radio" onclick="disableElement(this.form.work_permit);"/></td>
 <td><textarea  for="work_permit"name="comments"rows="4"cols="20"></textarea></td>
 </tr>

<script>
 function disableElement() {
  text.value = ' - N.A. - ';
 obj.disabled= true; 
 
 function enableElement1(obj) {
  obj.value = '';
  obj.disabled = false;
}
function enableElement2(obj) {
  obj.value = '';
  obj.disabled = false;
}

 </script>
 <style>
 enableElement1{
 color:green;
 }
 enableElement2{
 color:red;
 }
 </style>

Answer 1

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

<tr>元素没有包装在<tbody>中。 <thead>，<tfoot>或<table>元素（其中<tr>元素可能是子元素的唯一元素
唯一具有for属性的元素是<label>元素； for属性的值应等于id所引用元素的<label>属性值（<label>元素只能引用一个元素，尽管<input>，<textarea>或<select>元素可以与多个<label>元素关联），
您的<table>数据在本质上似乎不是表格形式的（来自提供的简短，不完整的示例）；如果出于布局原因使用<table>，则应考虑更改方法，
您正在使用多个功能来完成同一件事，尽管元素不同；记住 DRY 原则： D 不要 R 自己重复 Y ，并且
您使用的是干扰性JavaScript（在HTML中带有事件处理程序（onclick），这使以后对代码的维护变得复杂化。

考虑到所有这些，我可以建议一个替代方法：

// 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 arguement) 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 Fiddle demo。

现在，上面的函数专门编写为允许将其他行添加到可以调用同一函数的<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 Fiddle demo。

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

参考文献：

HTML：
- <input>。
- <label>。
- <table>。
- <tbody>。
- <textarea>。
- <tfoot>。
- <thead>。
JavaScript：
- Arrow function syntax。
- Document.querySelectorAll()。
- Element.closest()。
- Element.querySelector()。
- EventTarget.addEventListener()。
- Node.textContent。
- NodeList.prototype.forEach()。
- String.prototype.toLowerCase()。

如何使用JavaScript在另一个单元格上基于单选按钮更改表格单元格的颜色？

1 个答案: