rendre une balise <tr> d'une table invisible ou visible
Bonjour à tous.
Par du code jQuery, selon les valeurs du champ w_modele, je désire afficher ou masquer les balise <tr> tr_prov et tr_dest.
Voici le
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <table style="width: 100%;">
<tr>
<td class="auto-style1">Type de document <span class="Ast">*</span></td>
<td style="vertical-align: top">
<table style="width: 100%;">
<tr>
<td style="width: 50%">
<asp:DropDownList ID="w_modele" runat="server" CssClass="form-control" Width="100%" Height="35px"></asp:DropDownList>
</td>
<td runat="server" id="td_autre_modele" visible="false">
<asp:TextBox ID="modele_autre" runat="server" CssClass="form-control" Width="100%" Height="35px"></asp:TextBox>
</td>
</tr>
</table>
</td>
</tr>
<tr runat="server" id="tr_prov">
<td class="auto-style1">Provenance (Du) <span class="Ast">*</span></td>
<td style="vertical-align: top">
<table style="width: 100%;">
<tr style="vertical-align: top">
<td class="auto-style2" runat="server" id="td_dest">
<asp:DropDownList ID="rech_txt_du" runat="server" CssClass="form-control" Height="35px" Width="100%" AutoPostBack="true"></asp:DropDownList>
</td>
<td>
<asp:TextBox ID="txt_du" runat="server" CssClass="form-control" Width="100%" Height="50px" MaxLength="100" Enabled="false" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
</table>
</td>
</tr>
<tr runat="server" id="tr_dest">
<td class="auto-style1">Destinataire (Au) <span class="Ast">*</span></td>
<td style="vertical-align: top">
<table style="width: 100%;">
<tr>
<td class="auto-style2" id="td_destinataire" runat="server">
<asp:DropDownList ID="rech_txt_au" runat="server" CssClass="form-control" Width="100%" Height="35px" AutoPostBack="true"></asp:DropDownList>
</td>
<td style="vertical-align: top">
<asp:TextBox ID="txt_au" runat="server" CssClass="form-control" Width="100%" Height="50px" MaxLength="100" Enabled="false" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="auto-style1">Objet <span class="Ast">*</span></td>
<td style="vertical-align: top">
<asp:TextBox ID="txt_objet" runat="server" CssClass="form-control" Width="100%" Height="35px" MaxLength="100"></asp:TextBox>
</td>
</tr>
<tr runat="server" id="tr_confidentiel">
<td class="auto-style1">Confidentiel <span class="Ast">*</span></td>
<td style="vertical-align: top">
<asp:DropDownList ID="confidentiel" runat="server" CssClass="form-control" Width="100%" Height="35px">
<asp:ListItem></asp:ListItem>
<asp:ListItem>Non</asp:ListItem>
<asp:ListItem>Oui</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr runat="server" id="tr_doc">
<td class="auto-style1">Sélectionner document <span class="Ast">*</span></td>
<td style="vertical-align: top">
<asp:FileUpload ID="fu_doc" runat="server" Width="100%" Height="35px" CssClass="form-control" accept=".docx" />
</td>
</tr>
</table> |
et le code javascript
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <script src="./assets/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$("[id*=w_modele]").change(function () {
$("[id*=tr_dest]").hide();
$("[id*=tr_prov]").hide();
if ($("[id*=w_modele]").val() === '') {
return;
}
$("[id*=tr_dest]").show();
$("[id*=tr_prov]").show();
switch ($("[id*=w_modele]").val()){
case "Note d'intérim":
$("[id*=tr_prov]").hide();
$("[id*=tr_dest]").hide();
break;
case "Courrier externe":
break;
case "Note d'information":
break;
case "Note de service":
break;
}
}) |
Le problème, c'est que je n'ai aucune réaction quand je change la valeur du champ w_modele. Or le même code sur les balise <div>,<p> et autres marchent parfaitement.
Quel peut être le souci?
