Hide a specific row in table?

Question

On select of the dropdown field: database I want to hide specific rows, but only the fields under database. How can I hide only part of the row while keeping others in place? I tried to use JQUERY and attach an ID to the row but the whole row was deleting, and I want to keep the right side.

I know I can do style visibility: hidden, but I want the rows to disappear and move up if the fields are not needed.

    <tr>
<th>* Database</th>
<th class="th_background" style="border-right-style: groove;"><select id="database" class="form-control" name="database" onchange="database_details()">
                        <option value="oracle" selected="selected">Oracle</option>
                        <option value="mssql">Sql Server</option>
                        <option value="teraData">TeraData</option>
                        <option value="epic">Generic ODBC(Chronicles)</option>
                        <option value="sas">SAS</option>
                </select>
                </th>
                <th class="th_background"><input type="radio" name="refreshTde"
                    value="yes" checked> <span data-toggle="tooltip"
                    title="This option creates new TDE or replaces existing TDE file with full data.">Full
                        Refresh <i class="fa fa-question-circle"></i></span></th>
                <th class="th_background"><input type="radio" name="refreshTde"
                    value="no"> <span data-toggle="tooltip"
                    title="This option appends existing TDE. Should have same data items in the SQL.">Incremental
                        Refresh <i class="fa fa-question-circle"></i></span></th>

</tr>

<tr>
<th>* Service ID</th>
                <th class="th_background"><input type="text" id="sidText"
                    name="sid" class="form-control" style="width: 100%" placeholder="Enter SID"></th>
<th colspan="2" style="background-color: #0072bc;"><span
                    style="color: white;">* SQL Query to Generate TDE</span></th>

I just want to hide and collapse this part:

<th>* Service ID</th> <th class="th_background"><input type="text" id="sidText" name="sid" class="form-control" style="width: 100%" placeholder="Enter SID"></th>

http://jsfiddle.net/wf7j5tn8/

Answer 1

You can attach classes to the rows, or just use whatever queryselector will work for you.

 var options = document.querySelectorAll('option') var headers = document.querySelectorAll('th') options[3].style.display = "none" headers[2].style.display = "none" 

 <link rel="stylesheet" href="http://www.w3schools.com/stdtheme.css" type="text/css"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" type="text/css"> <table class="w3-table-all" style="width:100%"> <tbody><tr> <th>Number</th> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>1</td> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>2</td> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>3</td> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> <tr> <td>4</td> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> </tbody></table> <select id="database" class="form-control" name="database" onchange="database_details()"> <option value="oracle" selected="selected">Oracle</option> <option value="mssql">Sql Server</option> <option value="teraData">TeraData</option> <option value="epic">Generic ODBC(Chronicles)</option> <option value="sas">SAS</option> </select> 

Answer 2

If I'm understanding your question correctly, you should be able to just add a class to the elements you want to hide, then use that class to apply 'display: none' to those elements.

Here's your fiddle updated with what I mean.

And here's the relevant code from that fiddle:

HTML

<th class="hidden">* Service ID</th>
<th class="th_background hidden"><input type="text" id="sidText"
  name="sid" class="form-control" style="width: 100%" placeholder="Enter 
  SID">
</th>

CSS

.hidden {
  display: none;
}

Answer 3

Exact Solution might be this

<th id="dataHide">* Service ID</th> <!-- add id dataHide to your th -->

//add these to js function
$("input#sidText").css("visibility", "hidden"); 
$("#dataHide").css("visibility","hidden");

I think this is what you want: http://jsfiddle.net/wf7j5tn8/7/

---

The other way is that you disable the field, I would not want to hide a feature from users, rather just disable it

$("input#sidText").prop('disabled','disabled');

HTML

<tr id="dataHide"> <!-- id assigned here to hide the the row -->
<th>* Service ID</th>
<th class="th_background"><input type="text" id="sidText" name="sid" class="form-control" style="width: 100%" placeholder="Enter SID"></th>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">* SQL Query to Generate TDE</span></th>
</tr>

js/jQuery

function database_details() {
   $("#dataHide").hide(); //hides the id (#) dataHide assigned to the TR, hence removing the whole row. 
    //give this id (dataHide) to any element you want to hide on change of select dropdown 
}

This will work. Hope it solves your problem.