[英]How to change a table cell color based on radio button on another cell with javascript?
如果單擊其他單元格中的單選按鈕之一,我想更改單元格顏色。 我不知道為什么我的代碼不起作用
<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 = ' - NA - '; 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
屬性的值應該等於<label>
引用的元素的id
屬性值(一個<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 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>
現在,上面的函數是專門編寫的,以允許將其他行添加到可以調用相同函數的<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>
請注意,當然,您仍然需要調整添加的<input>
元素組的name
屬性。
參考:
<input>
。<label>
。<table>
。<tbody>
。<textarea>
。<tfoot>
.<thead>
。Document.querySelectorAll()
。Element.closest()
。Element.querySelector()
。EventTarget.addEventListener()
。Node.textContent
。NodeList.prototype.forEach()
。String.prototype.toLowerCase()
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.