我想改变的情况下，单元格颜色时按下了在其它小区中的无线按钮中的一个。我不知道为什么我的代码不工作
<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>有与您当前执行的几个问题：
<tr>元件没有被包裹在任一一个<tbody>。 <thead>，<tfoot>或<table>元件（其中一个<tr>元件可以是儿童的唯一元件，for属性的唯一元件是<label>元件;所述for属性的值应等于到该id是指该元素的<label>属性 - 值（一个<label>元件可以指仅一个元件，虽然一个<input>，<textarea>或<select>元件可与多个<label>元素相关联） ，<table>数据不会出现在本质表格（从所提供的短，不完整的样品）;如果您使用的是<table>布局的原因，那么你应该考虑改变你的方法，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>现在，上面的功能被专门编写，以允许要被添加到，它可以调用相同的功能，例如<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>注意，当然，你仍然有调整name元素的添加组的<input>属性。
参考文献：