在这里，我创建了一个包含折叠选项表（即Accordion）的页面，以及它应该附加到表中的动态表。但是在这里我试图应用类“tableshow”它在HTML中应用但是不是在sricpt，Down我写了Jquery崩溃。我希望动态表点击它应该崩溃，请帮助我。
<style>
.btn-primary{
color: #fff;
background-color: #f57f20 !important;
border-color: #f57f20 !important;
}
.inner-block {
padding: 8em 2em 4em 2em;
background: #fafafa;
}
th{
padding: 10px;
color: #f57f20;
}
td{
color: rgba(60, 60, 60, 0.93); ;
}
.panel-default>.panel-heading {
color: #333;
background-color: #fafafa;
border-color: #ddd;
}
.text_label{
font-weight: 400;
}
.panel-body {
padding: 1px;
font-size: 1em;
}
.table tr.tableshow > td:first-child {
position: relative;
}
.table tr.tableshow span.collapseshow{
display: inline-block;
width: 20px;
height: 20px;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
left: -20px;
background: #f09d18;
border-radius: 5px 0 0 5px;
cursor: pointer;
font-size: 1.5em;
line-height: 1em;
}
.table tr.tableshow span.collapseshow:before {
content: "+";
}
.table tr.tableshow.open span.collapseshow
{
background: #eee;
color: #000;
border: 1px solid #ccc;
}
.table tr.tableshow.open span.collapseshow:before {
content: "-";
}
</style>
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<div class="row" style="float:right; display: flex; margin-bottom:10px;">
<p style="font-size: 18px; margin-right: 30px; "><b>Search </b> </p>
<div class="row" style="display: flex;">
<input type="text" style="margin-right: 10px;" class="search-member form-control" />
<button onclick="export_csv()" class="btn btn btn-primary btn-sm" type="button">Export to csv
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box">
<!-- /.box-header -->
<div class="box-body" id="alreadymember">
<div id="filtered_append">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr style="width: 100%;">
<th style="width:5%;" >S.No.</th> <th style="width:15%;">Full Name </th> <th style="width: 10%;"> Role </th> <th style="width: 15%;"> Email </th> <th style="width: 12%;">Date Joined </th> <th style="width: 12%;">Subscribed Date </th>
<th style="width: 12%;">Expiry
Date</th> <th style="width: 5%;">Edit </th> <th style="width: 5%;">Delete</th>
</tr>
</thead>
<tbody>
<?php foreach ($users['details'] as $key => $value) {
?>
<tr class="tableshow">
<td style="width: 5%;" class="text_label"> {{ $key+1 }}</td>
<td style="width:12%;" class="text_label" style="word-break: break-all;"> {{ $value['sc_fullname'] }}</td>
<td style="width: 10%;"> <select class="form-control" style="width: fit-content;"
data-id="{{ $value['id'] }}"
data-role="{{ $value['role'] }}"
onchange="change_role(this)"
id="admin_role_change">
<option disabled value="all" selected>Role</option>
<option <?php if ($value['role'] == 'pioneer') {
echo 'selected';
} ?> value="pioneer">Pioneer
</option>
<option
<?php if ($value['role'] == 'pioneer_plus') {
echo 'selected';
} ?> value="pioneer_plus">Pioneer+
</option>
<option
<?php if ($value['role'] == 'pioneer_gold') {
echo 'selected';
} ?> value="pioneer_gold">PioneerG
</option>
<option
<?php if ($value['role'] == 'pioneer_platinum') {
echo 'selected';
} ?> value="pioneer_platinum">PioneerP
</option>
<option <?php if ($value['role'] == 'regular') {
echo 'selected';
} ?> value="regular">Regular
</option>
<option <?php if ($value['role'] == 'team') {
echo 'selected';
} ?> value="team">Team
</option>
</select></td>
<td style="width:16%;">{{ $value['sc_email'] }}</td>
<td style="width: 12%;">{{ date('jS F Y',strtotime($value['created_at'])) }}</td>
<td style="width: 12%;">{{$value['subscribed_date']}}</td>
<td style="width: 12%;">{{$value['expiry_date']}}</td>
<td style="width: 5%;"> <a href="/admin/edit-pioneer-signup/{{ $value['id'] }}">Edit</a></td>
<td style="width: 5%;"> <a href="#" onclick="delete_user({{ $value['id'] }})">Delete</a></td>
</tr>
<tr style="display: none;">
<td colspan="9">
<table class="table" style="width: 100%; ">
<tr style="width: 100%;" >
<td>Name: {{ $value['sc_fullname'] }}</td>
<td>Role: {{ $value['role'] }}</td>
</tr>
<tr style="width: 100%;">
<td style="width:50%;">Location: {{ $value['sc_location'] }}</td>
<td style="width:50%;">Date Joined: {{ date('jS F Y',strtotime($value['created_at'])) }} </td>
</tr>
<tr style="width: 100%;">
<td style="width:50%;">Looking For:
@foreach($value['usermeta'] as $usermeta)
{{$usermeta['meta_value']}}
@endforeach
</td>
<td style="width:50%;">other Details:
@if(($value['user_other_detail']) != null)
Hotspot
: {{($value['user_other_detail']['hotspot'] == 1) ? 'Yes' : 'No'}}
Insurance
: {{($value['user_other_detail']['insurance'] == 1) ? 'Yes' : 'No'}}
Whatspp
: {{($value['user_other_detail']['whatsapp'] == 1) ? 'Yes' : 'No'}}
Target Customer
: {{$value['user_other_detail']['target_customer']}}
startups_name: {{$value['user_other_detail']['startups_name']}}
entrepreneur_level: {{$value['user_other_detail']['entrepreneur_level']}}
expectation: {{$value['user_other_detail']['expectation']}}
Note: {{$value['user_other_detail']['note']}}
@endif</td>
</tr>
</table>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<div id="pk"></div>
</div>
</div>
</div>
</section>
<script>
$('.search-member').keyup(function () {
if ($.trim($('.search-member').val())) {
$.get('/admin/search-member-pioneer-detail', {info: $('.search-member').val()}, function (data) {
var html = '';
html = `
<table class="table table-bordered">
<thead>
<tr>
<td style="width: 100%;">
<table style="width: 100%;">
<tr style="width: 100%;">
<th style="width:5%;" >S.No.</th>
<th style="width:15%;">Full Name </th>
<th style="width: 10%;"> Role </th>
<th style="width: 15%;"> Email</th>
<th style="width: 12%;">Date Joined</th>
<th style="width: 12%;">Subscribed Date</th>
<th style="width: 12%;">Expiry Date</th>
<th style="width: 5%;">Edit </th>
<th style="width: 5%;">Delete</th>
</tr>
</table>
</td>
</tr>
</thead>
`;
var sn = 1;
var usermeta = null;
var umeta = [];
var hotspot = null;
var insurance = null;
var whatsapp = null;
var otherDetail = null;
for (let i = 0; i < data.length; i++) {
usermeta = data[i]['usermeta'];
for (var j = 0; j < usermeta.length; j++) {
umeta.push(usermeta[j]['meta_value']);
}
if (data[i]['user_other_detail'] != null) {
hotspot = data[i]['user_other_detail']['hotspot'] == 1 ? 'Yes' : 'No';
insurance = data[i]['user_other_detail']['insurance'] == 1 ? 'Yes' : 'No';
whatsapp = data[i]['user_other_detail']['whatsapp'] == 1 ? 'Yes' : 'No';
otherDetail = data[i]['user_other_detail'];
}
html += `<tr>
<td>
这里我需要使用classname =“tableshow”的Accordion，我在下面写了Jquery
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse${sn}">
<table style="width: 100%; margin-bottom:10px;">
<tr style="width: 100%;" >
<td style="width: 5%;" class="text_label"> ${sn} </td>
<td style="width:12%;" class="text_label" style="word-break: break-all;"> ${data[i]['sc_fullname']}</td>
<td style="width: 5%;">
<select class="form-control" style="width: fit-content;"
data-id="${data[i]['id']}"
data-role="${data[i]['role']}"
onchange="change_role(this)"
id="admin_role_change">
<option disabled value="all" selected>Role</option>
<option ${(data[i]['role'] == 'pioneer') ? 'selected' : ''} value="pioneer">Pioneer
</option>
<option ${(data[i]['role'] == 'pioneer_plus') ? 'selected' : ''} value="pioneer_plus">Pioneer Plus
</option>
<option ${(data[i]['role'] == 'pioneer_gold') ? 'selected' : ''} value="pioneer_gold">Pioneer Gold
</option>
<option ${(data[i]['role'] == 'pioneer_platinum') ? 'selected' : ''} value="pioneer_platinum">Pioneer Platinum
</option>
<option ${(data[i]['role'] == 'regular') ? 'selected' : ''} value="regular">regular
</option>
<option ${(data[i]['role'] == 'team') ? 'selected' : ''} value="team">Team
</option>
<option ${(data[i]['role'] == 'founder') ? 'selected' : ''} value="founder">Founder
</option>
</select>
</td>
<td style="width:16%;">
${data[i]['sc_email']}
</td>
<td style="width:12%;">
${data[i]['created_at']}
</td>
<td style="width:12%;">
${data[i]['subscribed_date']}
</td>
<td style="width:12%;">
${data[i]['expiry_date']}
</td>
<td style="width:5%;"> <a href="/admin/edit-pioneer-signup/${data[i]['id']}">Edit</a></td>
<td style="width:5%;"> <a href="#" onclick="delete_user(${data[i]['id']})">Delete</a></td>
</a>
</h4>
</div>
<div id="collapse${sn}" class="panel-collapse collapse in">
<div class="panel-body">
<table class="table" style="width: 100%;">
<tr style="width: 100%;" >
<td style="width:50%;"> Name: Name: ${data[i]['sc_fullname']}</td>
<td style="width:50%;"> Role: ${data[i]['role']}</td>
</tr>
<tr style="width: 100%;">
<td style="width:50%;"> Email: ${data[i]['sc_email']} </td>
<td style="width:50%;"> Mobile: ${data[i]['sc_mobile_no']} </td>
</tr>
<tr style="width: 100%;">
<td style="width:50%;"> Location: ${data[i]['sc_location']} </td>
<td style="width:50%;">
Looking For: ${umeta.join()} <br>
Hotspot
: ${hotspot}<br>
Insurance
: ${insurance}<br>
Whatspp
: ${whatsapp}<br>
Target Customer
: ${(otherDetail != null) ? otherDetail['target_customer'] : ''}<br>
startups_name: ${(otherDetail != null) ? otherDetail['startups_name'] : ''}<br>
entrepreneur_level: ${ (otherDetail != null) ? otherDetail['entrepreneur_level'] : ''}<br>
expectation: ${ (otherDetail != null) ? otherDetail['expectation'] : ''}<br>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>`;
sn++;
}
html += `</table>`
console.log(data)
$('#alreadymember').hide();
$("#pk").empty();
$("#pk").append(html)
});
} else {
$('#alreadymember').show();
$("#pk").empty();
}
})
Jquery写在这里
$( document ).ready(function() {
$(".table tr.tableshow td:first-child").append('<span class="collapseshow"></span>');
});
$(document).on("click", ".collapseshow", function() {
$(this).parents(".tableshow").next().slideToggle();
$(this).parents(".tableshow").toggleClass("open");
});
</script>