在表中启用和禁用 td答案

【问题标题】：Enable and Disable td in table在表中启用和禁用 td
【发布时间】：2017-04-10 09:59:35
【问题描述】：

<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>

在我选择“是”或“否”选项后，是否应向用户显示以下 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 内使用表格，在这种情况下，对齐将是一个问题

任何人都可以建议任何其他方式来实现这一点吗？

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以使用样式可见性代替显示。

检查此代码，如果这适合您的需要。

CSS

    .hiddenTD{
        visibility: hidden;
    }

    .visibleTD{
        visibility: visible;
    }

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>

【讨论】：

【解决方案2】：

给 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 的逻辑可以封装在下拉选择的事件处理程序中。

【讨论】：

我根据您的回复实施，当我在第一个选项中选择否时，以下 td id="first_td" 正在消失，但在那个地方 id="second_td" 正在显示，另一个 td一旦我将 first_td 设置为无显示，就不应移动..
你隐藏了一个 TD 元素，所以另一个会移动。如果这使表格看起来很奇怪，那么给列中的每个 TD 一个类名并隐藏整个类 - 这将隐藏一整列，这应该可以防止表格看起来很奇怪。

【解决方案3】：

您是否使用表格进行布局？！使用这样的 div：

DEMO

然后，您可以轻松地根据需要设置样式。（定位等）

【讨论】：

【解决方案4】：

我想你想模仿“禁用”（不是隐藏）

$('td.YOUR CLASS').css('opacity', '0.5').click(function () {
    event.preventDefault();
    return false;
});

【讨论】：