javascript - CSS 未在动态表中应用，也未折叠
问题描述
在这里，我创建了一个页面，其中包含带有折叠选项（即 Accordion）的表格以及应该附加到它的表格中的动态表格。但是这里我试图应用它在 HTML 中应用的类“tableshow”而不是在sricpt, Down 我写了 Jquery 用于崩溃。我希望动态表 onclick 它应该崩溃，请帮我解决这个问题。
<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>
在这里，我需要使用我在下面写的 Jquery 的 classname="tableshow" 的手风琴
<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>
解决方案
推荐阅读
- php - 在网站/Web 应用程序中随处使用相同数组的正确方法
- spotfire - 在 spotfire 中自动绘制图表上的线条
- java - 用于 SOAP 消息的 Spring Cloud Gateway RouteLocator
- .net - 在数据库更新期间更改环境
- python - 升级 pip 卸载了我的 pip，现在我无法在 Mac OS X 上重新安装它
- docker - 使用 Web 服务和 Docker 通过 HTTPs 服务多个站点
- angular5 - 使用代理时，Angular 5 或 6 订阅不起作用
- python-3.x - 即使模块可用，python 模块未找到错误
- python - 如何在python中访问嵌套字典
- algorithm - 根据与输入字符串匹配的单词对字符串数组进行排序