Hiding tr through inline CSS

Question

I want to hide and show <tr> on change of a textbox value. I am not able to do this even by applying inline CSS property like display: none. How can I achieve this?

Answer 1

This works just fine (although ideally you'd use css classes rather than inline styles):

<table>
    <tr id="your-table-row" style="display: none;">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

JSFiddle: http://jsfiddle.net/tg8Wj/

If you want to hide on change of a textbox value, hook up the following function to your onchange event handler...

JQuery:

function() {
    $('#your-table-row').hide();
}

Another way with JQuery:

function() {
    $('#your-table-row').style.display = "none";
}

Plain JavaScript:

function() {
    var row = document.getElementById("your-table-row");
    row.style.display = "none";
}