在表格内隐藏几个 td
[英]Hide several tds inside the table
问题描述
I am trying to hide tds cells inside the first tr.
我试图将 tds 单元格隐藏在第一个 tr 中。 I placed them inside an div with id="status2".我将它们放在 id="status2" 的 div 中。 I am trying to hide them by calling the following jQuery('#status2').hide();我试图通过调用以下 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?是否有可能以某种方式隐藏并在某些条件下显示 div 内的 3 个 td？ I do not want in this case to add several ids to the 3 tds.在这种情况下，我不想在 3 个 tds 中添加几个 id。
<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>
2 个解决方案
解决方案1
1 已采纳 2020-12-01 21:22:19
Instead of wrapping the TDs in a div, just give each td the same class.不要将 TD 包装在 div 中，只需给每个 td 相同的 class。
Also, you can't actually run javascript in the script tag that is remotely loading a file.此外，您实际上不能在远程加载文件的脚本标签中运行 javascript。
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>
解决方案2
0 2020-12-01 21:24:41
You can use jQuery selectors.您可以使用 jQuery 选择器。
here's a working example: https://jsfiddle.net/udrohgf5/1/这是一个工作示例： 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.这基本上是 - 取第一行的前 3 个单元格，然后隐藏它们。
:first - first occurance of that element. :first - 该元素的第一次出现。
:lt(n) - element index is l ower t han n :lt(n) n元素索引低于n
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.