Javascript 在表中启用和禁用 td
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5815654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable and Disable td in table
提问by gmhk
<td><select class="dropDownLists" name=reportFlag id="reportFlag" tabindex="10" style="WIDTH: 160px" onchange='onFocusReportingOptions();'>
<option value="Select">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
After I select the option Yes or No, below TD's should be shown or not to the user.
在我选择 Yes 或 No 选项后，TD 下方是否应该向用户显示。
<td id="first_td"><select class="dropDownLists" name=reportingOption id="reportFlag" tabindex="10" style="WIDTH: 160px" onchange='callonChange();'>
<option value="Select">Select</option>
<option value="MyTell">Report via tool</option>
<option value="Manual">Report via manually</option>
</select>
</td>
<td id="second_td"><select class="dropDownLists" name=acctFlag id="acctFlag" tabindex="10" style="WIDTH: 160px" onchange='callonChange();'>
<option value="Select">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
My questions what are the ways to control the display of the td? one way I can do is with the DIV tags but if we use Div tag i learnt that we need to use table inside the td, in that case then the alignment will be a problem
我的问题有哪些方法可以控制td的显示？我可以做的一种方法是使用 DIV 标签，但如果我们使用 Div 标签，我了解到我们需要在 td 中使用表格，在这种情况下，对齐将是一个问题
can any one suggest any other way to get this implemented?
任何人都可以建议任何其他方式来实现这一点吗？
采纳答案by James
Give the TDs an ID. Then use Javascript to hide the element with the relevant ID (via the CSS display attribute).
给 TD 一个 ID。然后使用 Javascript 隐藏具有相关 ID 的元素（通过 CSS display 属性）。
<td id="first_td">content</td>
<td id="second_id"><content</td>
var elem = document.getElementById("first_td");
elem.style.display = "none";
The logic for which TD is hidden or shown can be encapsulated in an event handler for the select drop-down.
隐藏或显示 TD 的逻辑可以封装在 select 下拉列表的事件处理程序中。
回答by anothershrubery
回答by ace
You can use the style visibility instead of display.
您可以使用样式可见性而不是显示。
Check this code, if this the one suit your needs.
检查此代码，如果这适合您的需要。
CSS
CSS
.hiddenTD{
visibility: hidden;
}
.visibleTD{
visibility: visible;
}
JS
JS
function onFocusReportingOptions(val){
var firstTD = document.getElementById('first_td');
var secondTD = document.getElementById('second_td');
if(val == 'Y') {
firstTD.className = "visibleTD";
secondTD.className = "visibleTD";
} else {
firstTD.className = "hiddenTD";
secondTD.className = "hiddenTD";
}
}
Change something on your HTML
更改 HTML 上的某些内容
<td>
<select class="dropDownLists" name=reportFlag id="reportFlag" tabindex="10" style="WIDTH: 160px" onchange='onFocusReportingOptions(this.value);'>
<option value="Select">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</td>
回答by Dmitriy Dovgiy
I think you would like imitate "disable"(not hide)
我想你想模仿“禁用”（不是隐藏）
$('td.YOUR CLASS').css('opacity', '0.5').click(function () {
event.preventDefault();
return false;
});
