Stack Overflow Asked by tree on February 19, 2021
I am trying to hide tds cells inside the first tr. I placed them inside an div with id="status2". I am trying to hide them by calling the following jQuery(‘#status2’).hide(); but they are not being hidden
Is it possible somehow to hide and to show the 3 tds inside the div on some condition? I do not want in this case to add several ids to the 3 tds.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table border='0' width='100%'>
<tr >
<td width="20%" class="bold">Status 1:</td>
<td><select name="status1" id="status1"><option value="null">select:</option>
</select>
</td>
<!--I want to hide the next 3 tds on some condition-->
<div id="status2">
<td colspan="2"> </td>
<td class="bold">status 2:</td>
<td><select>
<option value="null">select</option>
<option value="SV">V - 1</option>
<option value="SK">V - 2</option>
</select></td>
</div>
</tr>
<tr id="status3">
<td width="20%" class="bold">Status 3:</td>
<td><select>
<option value="null">select</option>
<option value="SV">V - 3</option>
<option value="SK">V - 4</option>
</select>
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
jQuery('#status2').hide();
</script>
</body>
</html>
Instead of wrapping the TDs in a div, just give each td the same class.
Also, you can't actually run javascript in the script tag that is remotely loading a file.
jQuery('.status2').hide();<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table border='0' width='100%'>
<tr >
<td width="20%" class="bold">Status 1:</td>
<td><select name="status1" id="status1"><option value="null">select:</option>
</select>
</td>
<!--I want to hide the next 3 tds on some condition-->
<td class="status2" colspan="2"> </td>
<td class="bold status2">status 2:</td>
<td class="status2"><select>
<option value="null">select</option>
<option value="SV">V - 1</option>
<option value="SK">V - 2</option>
</select></td>
</tr>
<tr id="status3">
<td width="20%" class="bold">Status 3:</td>
<td><select>
<option value="null">select</option>
<option value="SV">V - 3</option>
<option value="SK">V - 4</option>
</select>
</td>
</tr>
</table>Correct answer by imvain2 on February 19, 2021
You can use jQuery selectors.
here's a working example: https://jsfiddle.net/udrohgf5/1/
I've used the following selector in order to hide the cells.
$('table tr:first td:lt(3)').hide();
which is basically - take the first 3 cells of the first row, and hide them.
:first - first occurance of that element.
:lt(n) - element index is lower than n
Answered by Hagai Wild on February 19, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP