Question

<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中使用表格，在这种情况下，对齐将是一个问题

任何人都可以提出任何其他方法来实现这个目标吗？

Answer 1

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

Answer 2

你在使用表格进行布局吗？！使用像这样的div：

DEMO

然后您可以根据自己的需要轻松设计样式。（定位等）

Answer 3

您可以使用样式可见性而不是显示。

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

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

Answer 4

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

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

在表中启用和禁用td

4 个答案: