Как изменить свойство отображения CSS из JavaScript?

Я пытаюсь изменить свойство CSS отображения тега <div>, когда пользователь меняет значение <select>.


Вот мой код HTML:

<select type="text" name="category" onblur="display_hidden_fields();">
    <option><!-- Content --></option>
    <option><!-- Content --></option>
</select>

<div id="hidden" style="display:none;">
    <label for="test">Label</font></label>
    <select type="text" name="test">
        <option value="1">Default</option>
        <option value="2">Value1</option>
        <option value="3">Value2</option>
    </select>
</div>

(обратите внимание, что упрощенная версия моего кода. На самом деле, каждый <label> и <select> находится в <td>. Думаю, это не имеет значения)

Теперь мой JS-код:

function display_hidden_fields()
{
    alert("JS Function");
    document.getElementById("hidden").style.display = "block";
}

Что ж. Когда я выбираю новый <option> в первой <select> с именем "category", я получаю предупреждение "Функция JS". Итак, моя функция display_hidden_fields() выполнена правильно.
Но вторая строка этой функции... ничего! Мой <div> с именем "hidden" не отображается: (

Мне кажется, что в моем коде нет ничего плохого. Более того, я пробовал много вариантов.
 - Как указание style="display:block" в свойствах <div> и изменение его на "none" в JS.
 - Или пытаться использовать другие свойства, такие как "inline", "inline-block",...
 - Или используя "видимость" вместо "display"
 - Или не указывать какое-либо свойство вообще в HTML.


Кто-нибудь может мне помочь?:)

Спасибо.

[EDIT] Важное замечание

Я думаю, что нашел что-то интересное. Кажется, что <div> с display:none;, смешанным с <tr> и <td>, полностью нефункционально. Вот мой реальный код:

<tr>
    <div id="hidden" style="display:none;">
        <td class="depot_table_left">
            <label for="sexe">Sexe</label>
        </td>
        <td>
            <select type="text" name="sexe">
                <option value="1">Sexe</option>
                <option value="2">Joueur</option>
                <option value="3">Joueuse</option>
            </select>
        </td>
    </div>
</tr>

Содержимое <div> все еще отображается. И я могу попытаться каким-либо образом изменить его в JS, это не сработает. Я также попытался удалить теги <table>, <tr> и <td>, и он отлично работает. Но мне нужна эта таблица...

Ответы

<tr id="hidden" style="display:none;">
    <td class="depot_table_left">
        <label for="sexe">Sexe</label>
    </td>
    <td>
        <select type="text" name="sexe">
            <option value="1">Sexe</option>
            <option value="2">Joueur</option>
            <option value="3">Joueuse</option>
        </select>
    </td>
</tr>