时间戳

首页 > 解决方案 > 如何使用jquery在点击时更改表格行的文本

jquery - 如何使用jquery在点击时更改表格行的文本

问题描述

我编写了一个代码，其中在页面加载开始时，第 1 列中会出现一个加号以及一些文本。当用户单击该列（带有 + 号）时，该行中的第二列会展开。此时，我希望 <+> 符号应该更改为 <->。该列中的其余文本应保持不变。同样，当用户再次单击第一列时，第二列折叠，我希望 - 符号更改为 + 符号。

折叠/展开的代码工作正常。但我无法将符号从 + 转换为 - ，反之亦然。

有人可以帮帮我吗。

下面是代码：

   <!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>

标签： jqueryhtmlcss

解决方案

$(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>

推荐阅读