J'ai écrit un code dans lequel au début, lorsque la page se charge, un signe plus apparaît dans la colonne 1 avec du texte. Lorsque l'utilisateur clique sur cette colonne (avec un signe +), la deuxième colonne de cette ligne se développe. À ce stade, je veux que le signe <+> devienne <->. Le reste du texte de cette colonne doit rester le même. De même, lorsque l'utilisateur clique à nouveau sur cette première colonne, la deuxième colonne se réduit et je veux à nouveau que le signe - se transforme en signe +.

Le code de réduction / expansion fonctionne correctement. Mais je ne peux pas convertir les signes de + en - et vice versa.

Quelqu'un peut-il m'aider?

Voici le code:

   <!DOCTYPE html>
<html lang="en">
    <head>
    <meta name="gwt:property" content="locale=en_US">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style type="text/css">
tr.even {
    background-color: #FFFFFF;
}
tr.odd {
    background-color: #EEEEEE;
}

.xhide
{
}

</style>



    </head>
    <!-- comments only
    -->
    <body>
<hr>

<table>
      <tbody>
    <tr>
          <td width="5%"></td>
          <td><table border="1" cellpadding="5" cellspacing="0">
              <thead>
              <tr style="font-size:16px; background-color:lightgray;">
                  <th><a name="table">&nbsp;</a>Column1</th>
                  <th>Column2</th>
                </tr>
            </thead>
              <tbody>
              <tr  class="odd">
                  <td id = "x"><span id="expand"><b style="font-size:30px">+</b></span> Country</td>
                  <td>
                       <p>India</p>
                       <p class = "xhide" >Europe</p>
                      <p class = "xhide" >Asia</p>
                      <p class = "xhide" >Russia</p>
                 </td>
                </tr>
                <tr  class="odd">
                  <td id = "x"><span id="expand"><b style="font-size:30px">+</b></span> Country</td>
                  <td>
                       <p>India</p>
                       <p class = "xhide" >Europe</p>
                      <p class = "xhide" >Asia</p>
                      <p class = "xhide" >Russia</p>
                 </td>
                </tr>

                 </tbody>
            </table></td>
          <td width="5%"></td>
        </tr>

  </tbody>
    </table>
</body>
<script>
$(document).ready(function(){
    $(".xhide").hide();

    $("#expand").click(function(){
        $(".xhide").toggle(300);        
        if($("#expand").html() == "-"){
            $("#expand").html("+");
        }
        else{
            $("#expand").html("-");
        };
        $("#expand").css("style" , "font-size:30px");
    });
});
</script>
</html>
0
Deepika Bansal 23 mai 2018 à 17:07

3 réponses

Meilleure réponse

EDIT: a mis en œuvre les commentaires

$(document).ready(function(){
    $(".xhide").hide();
    $(".expand").click(function(){
        if($(this).hasClass('expanded')) this.innerHTML= this.innerHTML.replace('-','+');
        else this.innerHTML= this.innerHTML.replace('+','-');
        $(this).parent('tr').find(".xhide").toggle(500);
        $(this).toggleClass('expanded');
    });
});
tr.even {
    background-color: #FFFFFF;
}
tr.odd {
    background-color: #EEEEEE;
}
.expand b{
    font-size:30px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
      <tbody>
    <tr>
          <td width="5%"></td>
          <td><table border="1" cellpadding="5" cellspacing="0">
              <thead>
              <tr style="font-size:16px; background-color:lightgray;">
                  <th><a name="table">&nbsp;</a>Column1</th>
                  <th>Column2</th>
                </tr>
            </thead>
              <tbody>
              <tr  class="odd">
                  <td class = "expand"><b>+</b> Country</td>
                  <td>
                       <p>India</p>
                       <p class = "xhide" >Europe</p>
                      <p class = "xhide" >Asia</p>
                      <p class = "xhide" >Russia</p>
                 </td>
                </tr><tr  class="odd">
                  <td class = "expand"><b>+</b> Country</td>
                  <td>
                       <p>India</p>
                       <p class = "xhide" >Europe</p>
                      <p class = "xhide" >Asia</p>
                      <p class = "xhide" >Russia</p>
                 </td>
                </tr> </tbody>
            </table></td>
          <td width="5%"></td>
        </tr>
  </tbody>
</table>
0
Domenik Reitzner 23 mai 2018 à 15:12

La solution ci-dessous de Domenik fonctionne bien:

$(document).ready(function(){
    $(".xhide").hide();
    $(".expand").click(function(){
        if($(this).hasClass('expanded')) this.innerHTML= this.innerHTML.replace('-','+');
        else this.innerHTML= this.innerHTML.replace('+','-');
        $(this).parent('tr').find(".xhide").toggle(500);
        $(this).toggleClass('expanded');
    });
});
tr.even {
    background-color: #FFFFFF;
}
tr.odd {
    background-color: #EEEEEE;
}
.expand b{
    font-size:30px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
      <tbody>
    <tr>
          <td width="5%"></td>
          <td><table border="1" cellpadding="5" cellspacing="0">
              <thead>
              <tr style="font-size:16px; background-color:lightgray;">
                  <th><a name="table">&nbsp;</a>Column1</th>
                  <th>Column2</th>
                </tr>
            </thead>
              <tbody>
              <tr  class="odd">
                  <td class = "expand"><b>+</b> Country</td>
                  <td>
                       <p>India</p>
                       <p class = "xhide" >Europe</p>
                      <p class = "xhide" >Asia</p>
                      <p class = "xhide" >Russia</p>
                 </td>
                </tr><tr  class="odd">
                  <td class = "expand"><b>+</b> Country</td>
                  <td>
                       <p>India</p>
                       <p class = "xhide" >Europe</p>
                      <p class = "xhide" >Asia</p>
                      <p class = "xhide" >Russia</p>
                 </td>
                </tr> </tbody>
            </table></td>
          <td width="5%"></td>
        </tr>
  </tbody>
</table>
0
Deepika Bansal 23 mai 2018 à 15:21
$(document).ready(function(){
    $(".xhide").hide();

    $("tr.odd").click(function(){
        $(this).find(".xhide").toggle(500);
        var currentRow = $(this).find("#expand");
        if(currentRow.hasClass('expanded')){
        	currentRow.html("+");
        }
        else{
        	currentRow.html("-");
        }
        currentRow.toggleClass('expanded');
    });
});
tr.even {
    background-color: #FFFFFF;
}
tr.odd {
    background-color: #EEEEEE;
}

.xhide
{
}
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta name="gwt:property" content="locale=en_US">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    </head>
    <!-- comments only
    -->
    <body>
<hr>

<table>
      <tbody>
    <tr>
          <td width="5%"></td>
          <td><table border="1" cellpadding="5" cellspacing="0">
              <thead>
              <tr style="font-size:16px; background-color:lightgray;">
                  <th><a name="table">&nbsp;</a>Column1</th>
                  <th>Column2</th>
                </tr>
            </thead>
              <tbody>
              <tr  class="odd">
                  <td id = "x"><span id="expand">+</span> Country</td>
                  <td>
                       <p>India</p>
                       <p visibility:hidden;  class = "xhide" >Europe</p>
                      <p class = "xhide" >Asia</p>
                      <p class = "xhide" >Russia</p>
                 </td>
                </tr>
              <tr  class="odd">
                  <td id = "x"><span id="expand">+</span> Country</td>
                  <td>
                       <p>India</p>
                       <p visibility:hidden;  class = "xhide" >Europe</p>
                      <p class = "xhide" >Asia</p>
                      <p class = "xhide" >Russia</p>
                 </td>
                </tr>                
                </tbody>
            </table></td>
          <td width="5%"></td>
        </tr>
  </tbody>
    </table>
</body>
</html>
1
mbadeveloper 23 mai 2018 à 15:21