[英]Enable and Disable td in table
<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>
在我 select 之后,选项是或否,下面的 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>
我的问题是什么方法可以控制 td 的显示? 我可以做的一种方法是使用 DIV 标签,但如果我们使用 Div 标签,我了解到我们需要在 td 内使用表格,在这种情况下,alignment 将是一个问题
任何人都可以建议任何其他方式来实现这一点吗?
我想你想模仿“禁用”(不是隐藏)
$('td.YOUR CLASS').css('opacity', '0.5').click(function () {
event.preventDefault();
return false;
});
给 TD 一个 ID。 然后使用 Javascript 隐藏具有相关 ID 的元素(通过 CSS 显示属性)。
<td id="first_td">content</td>
<td id="second_id"><content</td>
var elem = document.getElementById("first_td");
elem.style.display = "none";
隐藏或显示 TD 的逻辑可以封装在 select 下拉列表的事件处理程序中。
您可以使用样式可见性而不是显示。
检查此代码,如果这适合您的需要。
CSS
.hiddenTD{
visibility: hidden;
}
.visibleTD{
visibility: visible;
}
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";
}
}
更改 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.