单击任何行时，如何切换（）显示/隐藏下一个表行

问题描述 投票：0回答：2

当我点击任何行时，如何切换（）隐藏/显示下一个表行内容？我正在尝试创建可扩展的表行。

这是我的Javascript代码：这里我试图最初隐藏所有行没有class =“accordion”然后通过任何单击我需要显示的下一行元素（rowContent）

 $(function() {
            var $research = $('.treat-table');
            $research.find("tr").not('.accordion').hide();
            $research.find("tr").eq(0).show();

            $research.find(".accordion").click(function(){
                $(this).next("tr").toggle();
            })
        });
table.basic-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  margin-bottom: 15px;
}

table.basic-table th {
  background-color: #66676b;
  text-align: left;
  color: #fff;
  vertical-align: top;
  font-weight: 500;
}

table.basic-table th:first-child {
  border-radius: 4px 0 0 4px;
}

table.basic-table th:last-child {
  border-radius: 0 4px 4px 0;
}

table.basic-table th,
table.basic-table td {
  padding: 15px 28px;
}

table.basic-table tr:nth-child(odd) {
  background-color: #f6f6f6
}

table.basic-table {
  margin-bottom: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<table class="basic-table treat-table">

  <tr>
    <th>ID</th>
    <th>Category</th>
    <th>Treatment Name</th>
    <th>Price</th>
    <th>+</th>
  </tr>
 
  <!-- Row -->
  <tr class="accordion">
    <td>1</td>
    <td>Plastic surgery</td>
    <td>Nose job</td>
    <td>from 2000$</td>
    <td>+</td>
  </tr>
  <tr class="rowContent">
    <td colspan="5">
    <h5>This is content</h5>
    <p>This area show hided content</p>
    </td>
  </tr>
 <!-- Row -->
  <tr class="accordion">
    <td>1</td>
    <td>Plastic surgery</td>
    <td>Nose job</td>
    <td>from 2000$</td>
    <td>+</td>
  </tr>
  <tr class="rowContent">
    <td colspan="5">
    <h5>This is content</h5>
    <p>This area show hided content</p>
    </td>
  </tr>


</table>

我正在尝试next（）方法来选择下一个元素，然后在运行onclick任何行的函数中调用toggle（）方法。

javascript jquery html
2个回答
0
投票

看起来有两件事正在发生。一方面，没有使用.research类，另一方面，Toggle（）不存在。检查切换（）。希望能帮助到你。

$(function() {
            var $research = $('.research');
            $research.find("tr").not('.accordion').hide();
            $research.find("tr").eq(0).show();

            $research.find(".accordion").click(function(){
                $(this).next("tr").toggle();
            })
        });
table.basic-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  margin-bottom: 15px;
}

table.basic-table th {
  background-color: #66676b;
  text-align: left;
  color: #fff;
  vertical-align: top;
  font-weight: 500;
}

table.basic-table th:first-child {
  border-radius: 4px 0 0 4px;
}

table.basic-table th:last-child {
  border-radius: 0 4px 4px 0;
}

table.basic-table th,
table.basic-table td {
  padding: 15px 28px;
}

table.basic-table tr:nth-child(odd) {
  background-color: #f6f6f6
}

table.basic-table {
  margin-bottom: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<table class="basic-table treat-table research">

  <tr>
    <th>ID</th>
    <th>Category</th>
    <th>Treatment Name</th>
    <th>Price</th>
    <th>+</th>
  </tr>
 
  <!-- Row -->
  <tr class="accordion">
    <td>1</td>
    <td>Plastic surgery</td>
    <td>Nose job</td>
    <td>from 2000$</td>
    <td>+</td>
  </tr>
  <tr class="rowContent">
    <td colspan="5">
    <h5>This is content</h5>
    <p>This area show hided content</p>
    </td>
  </tr>

</table>
0
投票

保持HTML DOM和CSS相同，用下面的jQuery替换你的code代码希望它有效。

$(function() {
    $('.rowContent').hide();
    $(".basic-table .accordion").click(function() {
       (".rowContent").not($(this).next()).hide();
        $(this).next(".rowContent").toggle();
    })
});


$(function() {
            $('.rowContent').hide();
            $(".basic-table .accordion").click(function(){
            $(".rowContent").not($(this).next()).hide();
                $(this).next(".rowContent").toggle();
            })
        });
table.basic-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  margin-bottom: 15px;
}

table.basic-table th {
  background-color: #66676b;
  text-align: left;
  color: #fff;
  vertical-align: top;
  font-weight: 500;
}

table.basic-table th:first-child {
  border-radius: 4px 0 0 4px;
}

table.basic-table th:last-child {
  border-radius: 0 4px 4px 0;
}

table.basic-table th,
table.basic-table td {
  padding: 15px 28px;
}

table.basic-table tr:nth-child(odd) {
  background-color: #f6f6f6
}

table.basic-table {
  margin-bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<table class="basic-table treat-table">

  <tr>
    <th>ID</th>
    <th>Category</th>
    <th>Treatment Name</th>
    <th>Price</th>
    <th>+</th>
  </tr>
 
  <!-- Row -->
  <tr class="accordion">
    <td>1</td>
    <td>Plastic surgery</td>
    <td>Nose job</td>
    <td>from 2000$</td>
    <td>+</td>
  </tr>
  <tr class="rowContent">
    <td colspan="5">
    <h5>This is content</h5>
    <p>This area show hided content</p>
    </td>
  </tr>
 <!-- Row -->
  <tr class="accordion">
    <td>1</td>
    <td>Plastic surgery</td>
    <td>Nose job</td>
    <td>from 2000$</td>
    <td>+</td>
  </tr>
  <tr class="rowContent">
    <td colspan="5">
    <h5>This is content</h5>
    <p>This area show hided content</p>
    </td>
  </tr>


</table>
Please leave a comment if it doesnot work.
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.