jquery - JQuery 和表格
问题描述
我正在努力使用 jquery 切换功能。
我尝试了不同的编码方式，但还没有找到解决方案。
当我在桌子上按 ZZZZ 时它应该向下滑动。
此外，表格的 css 格式不适用于 ZZZZ아반떼 AD강남지점-강남지점。
我想知道为什么 tablemain 的 css id 不适用于第二个数据集。
$(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>解决方案
约翰，您直接将表格包含在tr中，这是不允许的，您需要将其包含在td中，检查下面的代码片段：
<!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>希望它能达到你的目的。
推荐阅读
- python - 我想知道如何将带有值列表的字典映射到数据框
- spring-boot - 尝试使用 Tomcat 在 Docker 中将 Springboot 应用程序作为 war 文件运行时出现问题
- sbt - SBT 1.5.5 在使用 -mem 选项运行测试时出错
- python - pip：没有为检测器2找到匹配的分布
- nginx - 将 2 个 url (%20) 重定向到 nginx 中的一个
- angular - ChartJs：删除两点之间的线
- r - 仅选择具有子组且都具有观察值的组
- ios - 如何自定义 iOS/tvOS 中提供的 PiP 的 UI？
- sql - Postgres 转置一行
- azure - 将 Azure IoT 数据发送到 azure gen2