Bollate

HTML

[ANSWERED] html – JQuery and table

By

Nov 20, 2022 ,

Solution 1 :

You have errors in your HTML. Inspect the snippet in the dev tools of your browser and you see that there is no next tr with the class breakdown

Fix these errors and your script should work.

Solution 2 :

John you were directly enclosing the table in tr which is not allowed, you need to enclosed it in td, check the code snippet below:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>차량이용내역</title>
<style>
    .outer{
        width:850px;
        /*height: 500px;*/
        /*height:500px;*/
        /*color:white;*/
        /*margin-top:50px;*/
        margin-left:auto;
        margin-right:auto;
    }

    .title{
        font-size:20px;
        font-weight:900;
    }

    hr.garo {
        border: 1px solid #757272;
        margin: 5px 0px -10px 0px;
    }

    #tableMain{
        width:800px;
        border:1px solid lightgray;
        border-left: none;
        border-right: none;
        border-collapse: separate;
        border-spacing:0px;
        margin-top:40px;
    }

    th{
        margin-top: 10px;
        background: lightgray;
    }

    th,td {
         padding: 15px 20px;
         text-align: center;
    }

    a{
        text-decoration:none;
        display:inline-block;
        padding: 8px 16px 8px 16px;
        margin-top: 20px;
    }

    a:hover{
        background-color: #ffc107;
        color:white;

    }

    .page{
        background-color:rgb(244, 244, 244);
        margin-top: 50px;
        color: black;
        border-radius:5px;
        font-size: 20px;
    }

    #pop{
        border: 1px solid gray;
        font-size: 10px;
        text-align:left
    }

    img{
        width:350px;
    }

    #bor{
        border: 1px solid gray;
    }

    .pay{
        text-align: left;
        font-weight: bold;
        background-color: rgba(211, 211, 211, 0.418);
    }

    .search{
        background: #ffc107;
        color:white;
        font-weight:bold;
        width: 80px;
        height: 20px;
        border-radius: 4px;
        float:right;
        text-align:center;
        margin-top: 15px;
        margin-right: 50px;
    }
    </style>
<script>
    $( document ).ready(function() {
        $(document).on('click', 'tr.breakrow',function(){	
            $(this).closest('tr').next("tr").slideToggle();
        });
    });
    </script>
    
    </head>
    <body>
        <div class="outer"> 
            <span class="title">차량이용 내역</span>
            <hr class="garo">
            <br><br>

            <button class="search" type="submit">사용자 지정</button>

            <table id="tableMain">
                    <thead>
                        <tr>
                          <th>이용기간</th>
                          <th>차종</th>
                          <th>지점명</th>
                        </tr>
                    </thead>
                    <tbody>

                                <tr class="breakrow"><td>ZZZZ</td><td>아반떼 AD</td><td>강남지점-강남지점</td></tr>
                                <tr> 
									<td colspan="3">
                                      <table style="border: 1px solid gray; border-collapse: collapse;">
                                      <tbody>
                                            <tr id="pop"><td id="bor" rowspan="2" colspan="2"><img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg"><td id="bor">대여일</td><td id="bor">2020년 02월 05일 09:00</td><td id="bor">대여 위치</td><td id="bor">강남지점</td></tr>
                                            <tr id="pop"><td id="bor">반납일</td><td id="bor"> 2020년 02월 07일 14:00 </td><td id="bor">반납 위치 </td><td id="bor">강남지점</td></tr>
                                              <tr><td colspan="2">아반떼AD/휘발유(145허3271)</td><td class="pay" colspan="3">총결제 금액</td><td class="pay">245,800원</td></tr>
                                          </tbody>
                                          </table>
										  </td>
                                  </tr> 

                                  <tr class="breakrow"><td>ZZZZ</td><td>아반떼 AD</td><td>강남지점-강남지점</td></tr>
                                <tr>  
									<td colspan="3">
                                      <table style="border: 1px solid gray; border-collapse: collapse;">
                                      <tbody>
                                            <tr id="pop"><td id="bor" rowspan="2" colspan="2"><img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg"><td id="bor">대여일</td><td id="bor">2020년 02월 05일 09:00</td><td id="bor">대여 위치</td><td id="bor">강남지점</td></tr>
                                            <tr id="pop"><td id="bor">반납일</td><td id="bor"> 2020년 02월 07일 14:00 </td><td id="bor">반납 위치 </td><td id="bor">강남지점</td></tr>
                                              <tr><td colspan="2">아반떼AD/휘발유(145허3271)</td><td class="pay" colspan="3">총결제 금액</td><td class="pay">245,800원</td></tr>
                                          </tbody>
                                          </table>
										  </td>
                                  </tr> 

                    </tbody>
                </table>
</body>
</html>

Hope it will serve your purpose.

Problem :

I am struggling with jquery toggle function.

I tried in different ways of coding, but have not found a solution yet.

It should be slide down when I press ZZZZ in the table.

Also, css format for the table does not apply to ZZZZ아반떼 AD강남지점-강남지점.

What I am wondering is why css id for tablemain does not apply to second data set.

$(document).ready(function() {
  $('#tableMain').on('click', 'tr.breakrow', function() {
    $(this).nextUntil('tr.breakrow').slideToggle(200);
  });
});
.outer {
  width: 850px;
  /*height: 500px;*/
  /*height:500px;*/
  /*color:white;*/
  /*margin-top:50px;*/
  margin-left: auto;
  margin-right: auto;
}

.title {
  font-size: 20px;
  font-weight: 900;
}

hr.garo {
  border: 1px solid #757272;
  margin: 5px 0px -10px 0px;
}

#tableMain {
  width: 800px;
  border: 1px solid lightgray;
  border-left: none;
  border-right: none;
  border-collapse: separate;
  border-spacing: 0px;
  margin-top: 40px;
}

th {
  margin-top: 10px;
  background: lightgray;
}

th,
td {
  padding: 15px 20px;
  text-align: center;
}

a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px 8px 16px;
  margin-top: 20px;
}

a:hover {
  background-color: #ffc107;
  color: white;
}

.page {
  background-color: rgb(244, 244, 244);
  margin-top: 50px;
  color: black;
  border-radius: 5px;
  font-size: 20px;
}

#pop {
  border: 1px solid gray;
  font-size: 10px;
  text-align: left
}

img {
  width: 350px;
}

#bor {
  border: 1px solid gray;
}

.pay {
  text-align: left;
  font-weight: bold;
  background-color: rgba(211, 211, 211, 0.418);
}

.search {
  background: #ffc107;
  color: white;
  font-weight: bold;
  width: 80px;
  height: 20px;
  border-radius: 4px;
  float: right;
  text-align: center;
  margin-top: 15px;
  margin-right: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="UTF-8">
<title>차량이용내역</title>
<div class="outer">
  <span class="title">차량이용 내역</span>
  <hr class="garo">
  <br><br>

  <button class="search" type="submit">사용자 지정</button>

  <table id="tableMain">
    <thead>
      <tr>
        <th>이용기간</th>
        <th>차종</th>
        <th>지점명</th>
      </tr>
    </thead>
    <tbody>

      <tr class="breakrow">
        <td>ZZZZ</td>
        <td>아반떼 AD</td>
        <td>강남지점-강남지점</td>
      </tr>
      <tr>
        <table style="border: 1px solid gray; border-collapse: collapse;">
          <tbody>
            <tr id="pop">
              <td id="bor" rowspan="2" colspan="2"><img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg">
                <td id="bor">대여일</td>
                <td id="bor">2020년 02월 05일 09:00</td>
                <td id="bor">대여 위치</td>
                <td id="bor">강남지점</td>
            </tr>
            <tr id="pop">
              <td id="bor">반납일</td>
              <td id="bor"> 2020년 02월 07일 14:00 </td>
              <td id="bor">반납 위치 </td>
              <td id="bor">강남지점</td>
            </tr>
            <tr>
              <td colspan="2">아반떼AD/휘발유(145허3271)</td>
              <td class="pay" colspan="3">총결제 금액</td>
              <td class="pay">245,800원</td>
            </tr>
          </tbody>
        </table>
      </tr>

      <tr class="breakrow">
        <td>ZZZZ</td>
        <td>아반떼 AD</td>
        <td>강남지점-강남지점</td>
      </tr>
      <tr>
        <table style="border: 1px solid gray; border-collapse: collapse;">
          <tbody>
            <tr id="pop">
              <td id="bor" rowspan="2" colspan="2"><img src="http://www.cctoday.co.kr/news/photo/201509/925979_306258_1646.jpg">
                <td id="bor">대여일</td>
                <td id="bor">2020년 02월 05일 09:00</td>
                <td id="bor">대여 위치</td>
                <td id="bor">강남지점</td>
            </tr>
            <tr id="pop">
              <td id="bor">반납일</td>
              <td id="bor"> 2020년 02월 07일 14:00 </td>
              <td id="bor">반납 위치 </td>
              <td id="bor">강남지점</td>
            </tr>
            <tr>
              <td colspan="2">아반떼AD/휘발유(145허3271)</td>
              <td class="pay" colspan="3">총결제 금액</td>
              <td class="pay">245,800원</td>
            </tr>
          </tbody>
        </table>
      </tr>



    </tbody>
  </table>
</div>

Comments

Comment posted by jsfiddle.net/4uhjtwnz

Not the question you asked, but note that HTML doesn’t allow a

Comment posted by john

Thank you so much your help. I understand all the comments above, but I am pretty new to coding. Sadly, I could not apply… this helped me a lot and served my purpose. Thank you!

Comment posted by Qaseem Saleem

You can now copy the above code snippet, hope it will server your purpose! And if so please mark the above answer useful.

By

Related Post

HTML

[ANSWERED] html – Child div has an offset border

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] problem in selecting list item in html/css

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022