gmhk gmhk - 3 months ago 12
HTML Question

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>


After I select the option Yes or No, below TD's should be shown or not to the user.

<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

can any one suggest any other way to get this implemented?

Answer

Give the TDs an ID. Then use Javascript to hide the element with the relevant ID (via the CSS display attribute).

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