I'm working on a table which contains hidden details for each row. Table rows are made with Bootstrap accordion.
Accordion rows and hidden details are working fine but the JS that changes the chevron icon when toggling [collapsed/expanded] is not working properly. It should change the chevron icon just on the clicked row but currently it changes the chevron icon for all rows.
I have read some related posts regarding my question and have tried them all but I'm unable to get it working. What I'm missing?
There is a Bootply Demo here
HTML
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1><i class="fa fa-file-text"></i> Maintenance Work Requests <small>List</small></h1>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Home</li>
<li class="active">Listado de Solicitudes</li>
</ol>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-wrench"></i> Maintenance Work Requests</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="solicitudes" class="table table-bordered table-hover table-striped tablesorter" style="vertical-align:middle; border-collapse:collapse">
<thead>
<tr>
<th class="header" style="text-align:center"></th>
<th class="header" style="text-align:center"># <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Títle <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Component<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Created <i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Type<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Approved By<i class="fa fa-sort"></i></th>
<th class="header" style="text-align:center">Status <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#1" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3325</td>
<td>Trabajo sobre Sistema Eléctrico</td>
<td>710.100.00.00 - Sistema Eléctrico</td>
<td style="text-align:center">2014/05/24</td>
<td><p class="text-info" style="text-align:center"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="info" style="text-align:center"><span class="label label-primary" style="font-size:small">Creada <i class="fa fa-bolt"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="1">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #1
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#2" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3324</td>
<td>AVERIA: Correa transmisión Motor Aux</td>
<td>620.100.20.00 - Transmisión</td>
<td style="text-align:center">2014/05/01</td>
<td style="text-align:center"><p class="text-danger"><b>Avería</b></p></td>
<td style="text-align:center">Supervisor Mantenimiento</td>
<td class="success" style="text-align:center"><span class="label label-success" style="font-size:small">Aceptada <i class="fa fa-thumbs-o-up"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="2">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #2
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#3" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3327</td>
<td>Revisión Panel Eléctrico</td>
<td>710.100.60.10 - Panel Nº 1</td>
<td style="text-align:center">2014/04/27</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="warning" style="text-align:center"><span class="label label-warning" style="font-size:small">Revisión <i class="fa fa-eye"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="3">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #3
</p>
</div>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#4" class="accordion-toggle" style="cursor:pointer">
<td style="text-align:center"><i class="fa fa-plus-square"></i></td>
<td style="text-align:center">3323</td>
<td>Chequeo cableado catenaria</td>
<td>320.200.60.30 - Catenaria</td>
<td style="text-align:center">2014/04/26</td>
<td style="text-align:center"><p class="text-info"><b>Solicitud</b></p></td>
<td style="text-align:center"></td>
<td class="danger" style="text-align:center"><span class="label label-danger" style="font-size:small">Rechazada <i class="fa fa-thumbs-o-down"></i></span></td>
</tr>
<tr>
<td colspan="8" class="hiddenRow">
<div class="accordion-body collapse" id="4">
<div class="bs-callout bs-callout-info" style="margin:0px;">
<h4><i class="fa fa-info"></i> Detalles</h4>
<p>
Details for row #4
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div><!-- /.row -->
<div>
<p><button type="button" onclick="location.href='#Url.Action(" index",="" "maintworequests",="" null)';return="" false;"="" class="btn btn-primary btn-lg" style="font-size: 25px"><i class="fa fa-mail-reply"></i> Volver</button></p>
</div>
</div><!-- /#page-wrapper -->
JS
$('tr').on('shown.bs.collapse', function(){
$(this).parent().find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});
Change your .parent() to .prev() or .prev('tr')
$('tr').on('shown.bs.collapse', function(){
$(this).prev('tr').find(".fa-plus-square").removeClass("fa-plus-square").addClass("fa-minus-square");
}).on('hidden.bs.collapse', function(){
$(this).prev('tr').find(".fa-minus-square").removeClass("fa-minus-square").addClass("fa-plus-square");
});
This should work:
$(".accordion-toggle").on("click", function () {
if($(this).find(".fa").hasClass("fa-plus-square")) {
$(this).find(".fa").removeClass("fa-plus-square").addClass("fa-minus-square");
} else {
$(this).find(".fa").removeClass("fa-minus-square").addClass("fa-plus-square");
}
});
Related
I need help to solve this problem, i know AlpineJs must use something for "fragments", its fine when i workin on div, but when i do loop table row, and have another row, it become a problem, because i cant use div for the fragment. is there any solution?
here's my code
<template x-for="data in data">
<tr>
<td>
<div class="d-flex justify-content-between">
<i class="fa fa-lock"></i>
<i class="fa fa-caret-up"></i>
</div>
</td>
<td>100</td>
<td>Akun 1</td>
<td>Kategori Akun A</td>
<td class="text-end">Rp 0,00</td>
</tr>
<template x-for="data2 in data.children">
<tr>
<td>
<div class="d-flex justify-content-between">
<i class="fa fa-lock"></i>
<i class="fa fa-caret-up"></i>
</div>
</td>
<td>100</td>
<td>Akun 1</td>
<td>Kategori Akun A</td>
<td class="text-end">Rp 0,00</td>
</tr>
<template x-for="data3 in data2.children">
<tr>
<td>
<div class="d-flex justify-content-between">
<i class="fa fa-lock"></i>
<i class="fa fa-caret-up"></i>
</div>
</td>
<td>100</td>
<td>Akun 1</td>
<td>Kategori Akun A</td>
<td class="text-end">Rp 0,00</td>
</tr>
</template>
</template>
</template>
I am making the project, in which I am trouble in Jquery.
Description: I have two tables.
First: Select User Type
second: Selected Users
The first table has 3 user type and the Second table have a User name with user Type.
What I try: In Project If I selected User type: vendor, then all the user of table second whose Vendor is select and change background color to red.
$(".RTtbl .fa").click(function () {
$(this).find(".fa").addClass(".bg-info");
});
.RTtbl{
background:#fcffe5;
}
td{cursor: pointer;}
.bg-info{
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h5>
Select User Type
</h5>
<table class="table table-bordered RTtbl " style="font-size:14px;">
<tr>
<td style="width:33.33%;">
<i class=" fa fa-user"</i>
User
</td>
<td style="width:33.33%">
<i class="fa fa-user-o" ></i>
Vendor
</td>
<td style="width:33.33%">
<i class="fa fa-user-circle-o" ></i>
Celeb
</td>
</tr>
</table>
<h5>
Selected Users
</h5>
<table class="table table-bordered Fatbl">
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
</table>
This is JQuery code to achieve Answer:
$("#user").click(function(){
$('.fa').parent('td').removeClass('bg-info bg-success bg-warning');
$('.fa-user').parent('td').addClass('bg-info');
});
$("#vendor").click(function(){
$('.fa').parent('td').removeClass('bg-info bg-success bg-warning');
$('.fa-user-o').parent('td').addClass('bg-success');
})
$("#celeb").click(function(){
$('.fa').parent('td').removeClass('bg-info bg-success bg-warning');
$('.fa-user-circle-o').parent('td').addClass('bg-warning');
})
.RTtbl{
background:#fcffe5;
}
td{cursor: pointer;}
.bg-info{
background:red;
}
.bg-success{
background:green;
}
.bg-warning{
background:orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h5>
Select User Type
</h5>
<table class="table table-bordered RTtbl " style="font-size:14px;">
<tr>
<td id="user" style="width:33.33%;">
<i class=" fa fa-user"></i>
User
</td>
<td id="vendor" style="width:33.33%">
<i class="fa fa-user-o" ></i>
Vendor
</td>
<td id="celeb" style="width:33.33%">
<i class="fa fa-user-circle-o" ></i>
Celeb
</td>
</tr>
</table>
<h5>
Selected Users
</h5>
<table class="table table-bordered Fatbl">
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
</table>
suppose if you want single color for active
$(".RTtbl td").click(function(){
$('td').removeClass('bg-info');
var clName = $(this).children('i').attr('class');
clName = clName.split(' ');
$('.'+clName[1]+'').parent('td').addClass('bg-info');
$('.'+clName[1]+'').parent('td').siblings('td').addClass('bg-info');
$(this).siblings().removeClass('bg-info');
});
.RTtbl{
background:#fcffe5;
}
td{cursor: pointer;}
.bg-info{
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h5>
Select User Type
</h5>
<table class="table table-bordered RTtbl " style="font-size:14px;">
<tr>
<td id="user" style="width:33.33%;">
<i class="fa fa-user"></i>
User
</td>
<td id="vendor" style="width:33.33%">
<i class="fa fa-user-o" ></i>
Vendor
</td>
<td id="celeb" style="width:33.33%">
<i class="fa fa-user-circle-o" ></i>
Celeb
</td>
</tr>
</table>
<h5>
Selected Users
</h5>
<table class="table table-bordered Fatbl">
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
<td>
Kisan </td>
</tr>
</table>
I believe this is what you want to do: http://jsfiddle.net/mer29tsv/16/
Please let me know if the output is as expected. When you use $(this).find() you are finding in the cell of the first table, and applying the class to it.
You need to apply it to the second table by using the appropriate className. Also, using data-attributes would be better to connect the upper table to the lower table, the code I have attached will only work if the icon className is in a specific format.
I had to change the bg-info class name because it's already declared somewhere which is giving a background color of blue.
// you need to click the tabel cell, not the icon
$(".RTtbl td").click(function() {
// Get the icon class
let cls = $(this).find('i').attr('class');
// Reset selection
$(this).siblings().removeClass('bg-info');
$(`.Fatbl i`).parent().removeClass('bg-info');
// Select the cells accordingly
// Do not write ".bg-info" because it's for query onlyu
$(this).addClass('bg-info');
$(`.Fatbl i[class="${cls}"]`).parent().addClass('bg-info');
});
.RTtbl {
background: #fcffe5;
}
td {
cursor: pointer;
}
/* bg-info is a built-in bootstrap class, not recommended to change it */
/*
.bg-info {
background: red;
}
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h5>
Select User Type
</h5>
<table class="table table-bordered RTtbl " style="font-size:14px;">
<tr>
<td style="width:33.33%;">
<i class="fa fa-user" </i> User
</td>
<td style="width:33.33%">
<i class="fa fa-user-o"></i> Vendor
</td>
<td style="width:33.33%">
<i class="fa fa-user-circle-o"></i> Celeb
</td>
</tr>
</table>
<h5>
Selected Users
</h5>
<table class="table table-bordered Fatbl">
<tr>
<td> <i class="fa fa-user-circle-o"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user"></i> Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o"></i> Kisan </td>
</tr>
</table>
$(".menu").click(function () {
var elem = $(this).find('.fa');
//console.log($(this));
$(".Fatbl").find('.fa').parent().removeClass("bg-info");
$(".Fatbl").find(`.${elem.attr('class').split(" ")[1]}`).parent().addClass("bg-info");
$('.menu').removeClass("bg-info");
elem.parent().addClass("bg-info");
});
.RTtbl{
background:#fcffe5;
}
td{cursor: pointer;}
.bg-info{
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<h5>
Select User Type
</h5>
<table class="table table-bordered RTtbl" style="font-size:14px;">
<tr>
<td class="menu" style="width:33.33%;">
<i class="fa fa-user"></i>
User
</td>
<td class="menu" style="width:33.33%">
<i class="fa fa-user-o"></i>
Vendor
</td>
<td class="menu" style="width:33.33%">
<i class="fa fa-user-circle-o"></i>
Celeb
</td>
</tr>
</table>
<h5>
Selected Users
</h5>
<table class="table table-bordered Fatbl">
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-circle-o" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user" ></i>
Kisan </td>
</tr>
<tr>
<td> <i class="fa fa-user-o" ></i>
Kisan </td>
</tr>
</table>
I am new to the webDevelopment and angular. I have added the table header fix thing. But because of this, headers misaligned with the data in the table.
.tableBodyScroll tbody {
display:block;
max-height:300px;
overflow-y:scroll;
}
.tableBodyScroll thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
<div class="col-xs-12 col-md-12 nopadding tableBodyScroll">
<div class="table-responsive">
<table class="table table-striped table-bordered col-xs-12 col-lg-12">
<thead class="text-center text-info text-capitalize">
<th class="text-center">Sr.No.</th>
<th class="text-center">Document</th>
<th class="text-center">Score</th>
<th class="text-center">Actions</th>
</thead>
<tbody>
<tr ng-repeat="file in processResumeFiles">
<td class="text-center">{{ file.id }}</td>
<td class="view-orphan uploadResumeTableCellOverFlow">
{{ file.attributes.name }}
</td>
<td class="text-center">{{file.totalScore}}</td>
<td class="text-center">
<button class="btn btn-labeled btn-info" title="click to see" ng-disabled="!file.attributes.isUploadedDocument" data-ng-click="somemethod($index)">
<i class="fa fa-eye" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="click to move" ng-disabled="!file.attributes.isCommitted || !file.attributes.isUploadedDocument" data-ng-click="somemethod(file.attributes.name)">
<i class="fa fa-share" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="click to delete " data-ng-click="deleteResume(file.attributes.name)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="click to Move " ng-disabled="!file.attributes.isCommitted || !file.attributes.isUploadedDocument" data-ng-click="somemethod(file.attributes.name)">
<i class="fa fa-sign-out" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Click to move " ng-disabled="!file.attributes.isCommitted || !isjdDeleted || !jdSelected" data-ng-click="moveToJobDescription(file.attributes.name)">
<i class="fa fa-check-square" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
So, now here I am using this tableBodyScroll then it is fixing the header as well as adding the scroll bar but giving that error.
Can any one help me with this? Buttons are also not in the one line. can any one help me with this ?
You should use table with titles like this :
<table ng-table="vm.tableParams" class="table" show-filter="true">
<tr ng-repeat="user in $data">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
{{user.name}}</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
{{user.age}}</td>
</tr>
</table>
From what i can understand. Your "text-center" class is not being applied correctly to the data in . I have added text-center class to your css. The data is aligned now.
.tableBodyScroll tbody {
display:block;
max-height:300px;
overflow-y:scroll;
}
.tableBodyScroll thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
.text-center {
text-align: center;
}
<div class="col-xs-12 col-md-12 nopadding tableBodyScroll">
<div class="table-responsive">
<table class="table table-striped table-bordered col-xs-12 col-lg-12">
<thead class="text-center text-info text-capitalize">
<th class="text-center">Sr.No.</th>
<th class="text-center">Document</th>
<th class="text-center">Score</th>
<th class="text-center">Actions</th>
</thead>
<tbody>
<tr ng-repeat="file in processResumeFiles">
<td class="text-center">{{ file.id }}</td>
<td class="view-orphan uploadResumeTableCellOverFlow">
{{ file.attributes.name }}
</td>
<td class="text-center">{{file.totalScore}}</td>
<td class="text-center">
<button class="btn btn-labeled btn-info" title="click to see" ng-disabled="!file.attributes.isUploadedDocument" data-ng-click="somemethod($index)">
<i class="fa fa-eye" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="click to move" ng-disabled="!file.attributes.isCommitted || !file.attributes.isUploadedDocument" data-ng-click="somemethod(file.attributes.name)">
<i class="fa fa-share" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="click to delete " data-ng-click="deleteResume(file.attributes.name)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="click to Move " ng-disabled="!file.attributes.isCommitted || !file.attributes.isUploadedDocument" data-ng-click="somemethod(file.attributes.name)">
<i class="fa fa-sign-out" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Click to move " ng-disabled="!file.attributes.isCommitted || !isjdDeleted || !jdSelected" data-ng-click="moveToJobDescription(file.attributes.name)">
<i class="fa fa-check-square" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I'm trying to create a table which I can delete a row by clicking a button on it's last cell but It doesn't work. I move it to a test project (without laravel), it works, but doesn't work on blade laravel. I have tried as many ways as I can but still couldn't figure it out.
<link rel="stylesheet" type="text/css" href=" {{asset('public/css/cart.css')}}">
<script type="text/javascript">
$("td.cart_delete").on("click", function () {
alert("On click");
$(this).closest("tr").remove();
});
</script>
#extends('layouts.layout')
#section('content')
<section id="cart_items">
<div class="container">
<div class="breadcrumbs">
<ol class="breadcrumb">
<li>Trang chủ</li>
<li class="active">Giỏ hàng</li>
</ol>
</div>
<div class="table-responsive cart_info">
<table class="table table-condensed">
<thead>
<tr class="cart_menu">
<td class="image">Mặt hàng</td>
<td class="description">Mô tả</td>
<td class="price">Giá</td>
<td class="quantity">Số lượng</td>
<td class="total">Thành tiền</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="cart_product">
<img src="images/cart/one.png" alt=""> <!-- Cái này chứa ảnh của sp -->
</td>
<td class="cart_description">
<h4>Tên sản phẩm</h4> <!-- Tên sản phẩm -->
<p><a>Phan Thanh Tuyên</a></p>
</td>
<td class="cart_price">
<p>120.000 VNĐ</p> <!-- Giá -->
</td>
<td class="cart_quantity"> <!-- Số lượng -->
<div class="cart_quantity_button">
<!-- <a class="cart_quantity_up" href=""> + </a> -->
<button class="add-btn">+</button>
<input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2" id="so_luong"> <!-- Đây cần thay đổi số lượng sản phẩm mua theo csdl -->
<!-- <a class="cart_quantity_down" href=""> - </a> -->
<button class="minus-btn">-</button>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">$59</p>
</td>
<td class="cart_delete">
<!-- <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a> Đây là nút delete một sản phẩm trong giỏ hàng. Chưa biết nên để <button> hay <a>. Cái này tùy cách xử lý của ô -->
<button class="quantity_delete"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="images/cart/two.png" alt="">
</td>
<td class="cart_description">
<h4>Colorblock Scuba</h4>
<p>Web ID: 1089772</p>
</td>
<td class="cart_price">
<p>$59</p>
</td>
<td class="cart_quantity">
<div class="cart_quantity_button">
<button class="add-btn">+</button>
<input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
<button class="minus-btn">-</button>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">$59</p>
</td>
<td class="cart_delete">
<!-- <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a> -->
</td>
</tr>
<tr>
<td class="cart_product">
<img src="images/cart/three.png" alt="">
</td>
<td class="cart_description">
<h4>Colorblock Scuba</h4>
<p>Web ID: 1089772</p>
</td>
<td class="cart_price">
<p>$59</p>
</td>
<td class="cart_quantity">
<div class="cart_quantity_button">
<button class="add-btn">+</button>
<input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
<button class="minus-btn">-</button>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">$59</p>
</td>
<td class="cart_delete">
<!-- <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a> -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section> <!--/#cart_items-->
<section id="do_action">
<div class="container">
<div class="row">
<!-- <div class="col-sm-6">
</div> -->
<div class="col-sm-6">
<div class="total_area">
<ul>
<li>Cart Sub Total <span>$59</span></li>
<li>Eco Tax <span>$2</span></li>
<li>Shipping Cost <span>Free</span></li>
<li>Total <span>$61</span></li>
</ul>
<a class="btn btn-default update" href="{{url('cart')}}">Update</a>
<a class="btn btn-default check_out" href="{{url('checkout')}}">Check Out</a>
</div>
</div>
</div>
</div>
</section><!--/#do_action-->
#endsection
Thanks for any help!
Assume you are jQuery is working.
Here it is,
<link rel="stylesheet" type="text/css" href=" {{asset('public/css/cart.css')}}">
#extends('layouts.layout')
#section('content')
<section id="cart_items">
<div class="container">
<div class="breadcrumbs">
<ol class="breadcrumb">
<li>Trang chủ</li>
<li class="active">Giỏ hàng</li>
</ol>
</div>
<div class="table-responsive cart_info">
<table class="table table-condensed">
<thead>
<tr class="cart_menu">
<td class="image">Mặt hàng</td>
<td class="description">Mô tả</td>
<td class="price">Giá</td>
<td class="quantity">Số lượng</td>
<td class="total">Thành tiền</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="cart_product">
<img src="images/cart/one.png" alt=""> <!-- Cái này chứa ảnh của sp -->
</td>
<td class="cart_description">
<h4>Tên sản phẩm</h4> <!-- Tên sản phẩm -->
<p><a>Phan Thanh Tuyên</a></p>
</td>
<td class="cart_price">
<p>120.000 VNĐ</p> <!-- Giá -->
</td>
<td class="cart_quantity"> <!-- Số lượng -->
<div class="cart_quantity_button">
<!-- <a class="cart_quantity_up" href=""> + </a> -->
<button class="add-btn">+</button>
<input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2" id="so_luong"> <!-- Đây cần thay đổi số lượng sản phẩm mua theo csdl -->
<!-- <a class="cart_quantity_down" href=""> - </a> -->
<button class="minus-btn">-</button>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">$59</p>
</td>
<td class="cart_delete">
<!-- <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a> Đây là nút delete một sản phẩm trong giỏ hàng. Chưa biết nên để <button> hay <a>. Cái này tùy cách xử lý của ô -->
<button class="quantity_delete" id="c_delete"><i class="fa fa-times"></i></button>
</td>
</tr>
<tr>
<td class="cart_product">
<img src="images/cart/two.png" alt="">
</td>
<td class="cart_description">
<h4>Colorblock Scuba</h4>
<p>Web ID: 1089772</p>
</td>
<td class="cart_price">
<p>$59</p>
</td>
<td class="cart_quantity">
<div class="cart_quantity_button">
<button class="add-btn">+</button>
<input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
<button class="minus-btn">-</button>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">$59</p>
</td>
<td class="cart_delete">
<!-- <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a> -->
</td>
</tr>
<tr>
<td class="cart_product">
<img src="images/cart/three.png" alt="">
</td>
<td class="cart_description">
<h4>Colorblock Scuba</h4>
<p>Web ID: 1089772</p>
</td>
<td class="cart_price">
<p>$59</p>
</td>
<td class="cart_quantity">
<div class="cart_quantity_button">
<button class="add-btn">+</button>
<input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
<button class="minus-btn">-</button>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price">$59</p>
</td>
<td class="cart_delete">
<!-- <a class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a> -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section> <!--/#cart_items-->
<section id="do_action">
<div class="container">
<div class="row">
<!-- <div class="col-sm-6">
</div> -->
<div class="col-sm-6">
<div class="total_area">
<ul>
<li>Cart Sub Total <span>$59</span></li>
<li>Eco Tax <span>$2</span></li>
<li>Shipping Cost <span>Free</span></li>
<li>Total <span>$61</span></li>
</ul>
<a class="btn btn-default update" href="{{url('cart')}}">Update</a>
<a class="btn btn-default check_out" href="{{url('checkout')}}">Check Out</a>
</div>
</div>
</div>
</div>
</section><!--/#do_action-->
<script type="text/javascript">
$("td.cart_delete").on("click", function () {
alert("On click");
$(this).closest("tr").remove();
});
</script>
#endsection
Before click,
After click
I am trying to achieve an expand and collapse row for ng-table, basically what I want is if you click on row it expands with more detail.But currently all the rows get expanded on click. Does anyone know how to achieve this?
Any help appreciated thanks
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="user.expanded" ng-click="user.expanded = false">-</button>
<button ng-if="!user.expanded" ng-click="user.expanded = true">+</button>
</td>
</tr>
<tr ng-if="user.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>
You have to put your variable expanded for your line instead of a general var. It means that it won't be user.expanded but it have to be ticket.expanded
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat-start="ticket in ng">
<td data-title="'Id'">{{ticket.requestId}}</td>
<td style="width:60%;" data-title="'Subject'" >{{ticket.subject}}</td>
<td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
<td data-title="'Priority'">{{ticket.priority}}</td>
<td >
<a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
<!-- <a class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa" >+/-</i></a>-->
<button ng-if="ticket.expanded" ng-click="ticket.expanded = false">-</button>
<button ng-if="!ticket.expanded" ng-click="ticket.expanded = true">+</button>
</td>
</tr>
<tr ng-if="ticket.expanded" ng-repeat-end="" >
<td colspan="8" >Test</td>
</tr>
</table>
Working Fiddle