I have designed collapsible accordion and in that I placed a table.
I am unable to remove bottom boder of the td and side border of the table. I tried to make no-tr.no-bottom-border td {border-bottom: none; but it not working.
I tried to declare the class as outside and made tried border-bottom none but it didn't work.
Imported bootstrap js and css
<style>
table {
margin-left: 40px;
margin-right:auto;
margin-top: 10px;
}
tr.no-bottom-border td {
border-bottom: none;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
padding: 2px;
font-weight: lighter;
font-size: 11px;
line-height: 1.428571429;
vertical-align: top;
}
#outside{
border-style: none;
}
</style>
</head>
<body>
<div class="container ">
<div class="col-md-6 ">
<div class="panel panel-default ">
<div class="panel-heading " style="background-color: #b3daff; ">
<h4 class="panel-title ">
<a href="# "><span class="glyphicon glyphicon-remove "
style="color: red "></span></a> <a data-toggle="collapse "
data-parent="#accordion " href="#collapseTwo "> <span
style="font-weight: 700; ">Educational Details</span> <span
class="glyphicon glyphicon-plus " style="color: red "> </span>
<span class="glyphicon glyphicon-pencil " style="color: red "> </span>
</a>
</h4>
</div>
<div id="collapseTwo " class="panel-collapse collapse ">
<table class="table table-bordered responsive ">
<thead>
<tr>
<th bgcolor=" #b3daff ">Degree</th>
<th bgcolor=" #b3daff ">Stream</th>
<th bgcolor=" #b3daff ">Yr of Passing</th>
</tr>
</thead>
<tbody>
<tr>
<th>10th</th>
<td></td>
<td></td>
<td class="outside " style="border-style: none; border-bottom-style: none; "> View Edit</td>
</tr>
<tr>
<th style="font-weight: 400px; ">12th*</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row " >Bachelors*</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">Masters</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">C1</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">C2</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">C3</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">C4</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr class="no-bottom-border ">
<th >C5</th>
<td></td>
<td></td>
<td class="outside " style="border-style: none; border-bottom-style: none; "> View Edit</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!----Ends second column-------->
</div>
<!----Ends accordion column-------->
</div>
<!-- BS example ends here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Any Ideas?
Here is the updated code:
https://codepen.io/creativedev/pen/gKPXJR
I have added
.table-bordered{
border: none;
}
and removed
tr.no-bottom-border td {
border-bottom: none;
}
When I run your code snippet, I don't see any border-bottom in the table or any of the cells.
The underline below the links View, Edit is the default text-decoration style for tag. Set it to none like below if you don't want it
#outside a {
text-decoration: none;
}
Related
I need your help.
I am creating an N-level nested table with dynamic columns
So what I want to do is, I want to create a table having a variable number of columns based on user selection for that I have created a simple drop-down box, according to drop-down selection, those selected columns will appear in the table
What I want is my first column of the table should be always fixed and while others can be scroll-able horizontally, and the width of those columns should be adjusted as column displays or hides
I don't want to use any external libraries. I have created a custom table based on div along with grid CSS
Below are screenshots of things that I have done till now
Here is code for reference:
HTML:
<ng-container *ngFor="let rData of reportData; let i = index; last as isLast" >
<div class="myTr report-row">
<div class="myTd">
<button
class="btn report-btn-sm"
*ngIf="checkIfHaveMoreSplits(this.splitOpt[0].id) !== 0 && rData.isCollapsed == true"
(click)="splitData(rowWiseFilterObj(rData,this.splitOpt[0].id),this.splitOpt[0].id,sFilters,splitOpt,i,rData,selectedDate)"
row="rData">+</button>
<button
class="btn report-btn-sm"
*ngIf="checkIfHaveMoreSplits(this.splitOpt[0].id) !== 0 && rData.isCollapsed == false"
(click)="removeDynamicComponent(rData,i)"
>-</button>
<span *ngIf="this.splitOpt[0].id == 'campid'">{{rData['campaign_name']}}</span>
<span *ngIf="this.splitOpt[0].id !== '__time' && this.splitOpt[0].id !== 'campid'">{{rData[this.splitOpt[0].id]}}</span>
<span *ngIf="this.splitOpt[0].id === '__time'">{{ rData[this.splitOpt[0].id] | date:'dd-MM-yyyy HH:mm:ss Z'}}</span>
</div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd">{{convertToDecimals(rData.impressions,2)}}</div>
<div class="myTd">{{convertToDecimals(rData.conversions,2)}}</div>
<div class="myTd">{{convertToDecimals(rData.bids,2)}}</div>
<div class="myTd">{{convertToDecimals(rData.wins,2)}}</div>
<div class="myTd">$ {{convertToDecimals(rData.spend,2)}}</div>
<div class="myTd">
<button class="btn btn-secondary m-btn m-btn--label-danger m-btn--label-danger m-btn--bolder m-btn--uppercase btn-sm" *ngIf="this.splitOpt[0].id=='campid'" (click)="excludeReport(rowWiseFilterObj(rData,this.splitOpt[0].id))"> <i class="la la-close"></i> </button>
<button class="btn btn-secondary m-btn m-btn--label-danger m-btn--bolder m-btn--uppercase btn-sm" disabled="disabled" *ngIf="this.splitOpt[0].id!='campid'"> <i class="la la-ban"></i> </button>
</div>
</div></div>
</div>
<div *ngIf="isLast" class="text-right col-12">{{altrows("#ffffff","#f5f5f5")}}
<a href="javascript:void(0)" class="m-link" (click)="loadmore()" style=" margin: 10px -30px 15px 10px;
background: #5ccdde;
color: #fff;
padding: 2px 10px;
font-size: 12px;" *ngIf="reportData.length > 19"> Load more </a>
</div>
<ng-template #dynamic ></ng-template>
</ng-container>
<div class="myTr" style="margin-top:20px;">
<div class="myTd"></div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd"></div>
</div></div>
</div>
</div>
JS:
getReport() {
this.hidePopup();
if(this.splitOpt.length === 0) {
// this.updateGraph(this.currentGraphSelection);
return false;
}
var apiFilters: any = [{}];
for (var i = 0; i < this.sFilters.length; i++) {
if (this.sFilters[i].values.length > 0) {
var k;
k = this.sFilters[i].id
apiFilters[0][k] = this.sFilters[i].values
}
}
var split = this.splitOpt[0].id;
this.reportData=[];
this.reportLoading = true;
this._apis.getReportData(split, apiFilters[0],this.selectedDate,1,20).subscribe(response => {
if (response.status == 1200) {
this.reportData = response.data.split_by_data;
this.reportData.map(function(obj) {
obj.isCollapsed = true;
return obj;
});
this.totalImpressions=response.data.totalCount[0].impressions;
this.totalConversions=response.data.totalCount[0].conversions;
this.totalBids=response.data.totalCount[0].bids;
this.totalWins=response.data.totalCount[0].wins;
this.totalSpend=response.data.totalCount[0].spend;
this.reportLoading = false;
var contentGroups = document.querySelectorAll('.myTr:not(:last-child) .myTdGroupBox');
var ctrlGroup = document.querySelector('.myTr:last-child .myTdGroupBox');
ctrlGroup.addEventListener('scroll', (ev)=> {
contentGroups.forEach((g)=> g.scrollTo(ctrlGroup.scrollLeft, 0) );
});
this.cd.detectChanges();
}
});
}
You can remake the table using <div>s with flex layout.
I write a full example below. You don't have all flexibility of a table, however it's quite powerful. You can also fix the columns scroller to the page, and make it ever visible, even with a table bigger than the page height. And more...
You'll see, i make the scrollable columns all with the same width. You can set different widths. I would do this using classes for columns.
I believe the code is easy to understand. If you need a help, or want to use more of the power of flex layout, you can see this page: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The javascript to make all move together is the most simple thing here. The idea is to get the scroll event and apply the same scroll tho the lines with overflow: hidden.
To create new columns, is as simple as create it on a <table>, just crate <div>s into .myTdGroup elements.
<style>
.myTable {
font-family: sans-serif;
font-size: 15px;
width: 450px;
border: 2px solid #BBB;
position: relative;
}
.myTr {
display: flex;
align-items: center;
}
.myTr:nth-child(odd) { background: #DDD }
.myTdGroupBox {
overflow: hidden;
}
.myTdGroup {
display: flex;
align-items: center;
width: 500px;
}
.myTr:last-child { background: #777 }
.myTr:last-child .myTdGroupBox { overflow-x: scroll }
.myTr:last-child .myTd { padding: .1px 0 0 0 }
.myTd {
margin: 0 1em;
padding: .5em 0;
flex-grow: 1;
flex-basis: 50px;
overflow-x: auto;
white-space: nowrap;
}
.myTr > .myTd { flex-basis: 150px; }
</style>
<div class="myTable">
<div class="myTr">
<div class="myTd">Line A</div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd">A1</div>
<div class="myTd">A222</div>
<div class="myTd">A333</div>
<div class="myTd">A444</div>
<div class="myTd">A555</div>
<div class="myTd">A666</div>
</div></div>
</div>
<div class="myTr">
<div class="myTd">Line BBBBB</div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd">B111</div>
<div class="myTd">B2</div>
<div class="myTd">B333</div>
<div class="myTd">BX<br>444</div>
<div class="myTd">B555</div>
<div class="myTd">B666</div>
</div></div>
</div>
<div class="myTr">
<div class="myTd">Line<br>CCC<br>CCC</div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd">C111</div>
<div class="myTd">C222</div>
<div class="myTd">C3</div>
<div class="myTd">C 444 444 444 end</div>
<div class="myTd">C555</div>
<div class="myTd">C666</div>
</div></div>
</div>
<div class="myTr">
<div class="myTd">Line DDD</div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd">D111</div>
<div class="myTd">D222</div>
<div class="myTd">D333</div>
<div class="myTd">D444</div>
<div class="myTd">D555</div>
<div class="myTd">D666</div>
</div></div>
</div>
<div class="myTr">
<div class="myTd"></div>
<div class="myTdGroupBox"><div class="myTdGroup">
<div class="myTd"></div>
</div></div>
</div>
</div>
<script>
var contentGroups = document.querySelectorAll('.myTr:not(:last-child) .myTdGroupBox');
var ctrlGroup = document.querySelector('.myTr:last-child .myTdGroupBox');
ctrlGroup.addEventListener('scroll', (ev)=> {
contentGroups.forEach((g)=> g.scrollTo(ctrlGroup.scrollLeft, 0) );
});
</script>
Janak Prajapati, Earlier I have done something similar to fixed table.
https://jsfiddle.net/Sampath_Madhuranga/2o4h6u3f/10/
.tg {
border-collapse:collapse;
border-spacing:0;
border-color:#ccc;
}
.tg td{
font-family:Arial, sans-serif;
font-size:14px;
padding:9px 20px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:#ccc;
color:#333;
background-color:#fff;
}
.tg th{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:9px 20px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:#ccc;
color:#333;
background-color:#f0f0f0;
}
.tg .tg-29qf{
font-weight:bold;
background-color:#f0f0f0;
border-color:inherit;
text-align:left
}
.tg .tg-xldj{
border-color:inherit;
text-align:left
}
.tg .sticky-col-1{
left: 0;
position: absolute;
top: auto;
width: 120px;
}
.tg .sticky-col-2{
left: 160px;
position: absolute;
top: auto;
width: 70px;
}
.zui-scroller {
margin-left: 295px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 900px;
}
.tg .tg-kiyi{
font-weight:bold;
border-color:inherit;
text-align:left;
min-width:100px;
}
.tg .cover-head-cell{
min-width:300px;
text-align:center;
}
.tg .tg-29qf{
font-weight:bold;
background-color:#f0f0f0;
border-color:inherit;
text-align:left;
min-width:100px;
}
.tg .tg-xldj{
border-color:inherit;
text-align:left;
min-width:100px;
}
.tg .tg-dvid{
font-weight:bold;
background-color:#efefef;
border-color:inherit;
text-align:left;
vertical-align:top;
min-width:100px;
}
#media screen and (max-width: 767px) {
.tg {
width: auto !important;
}
.tg col {
width: auto !important;
}
.tg-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
<div class="tg-wrap">
<div class="zui-scroller">
<table class="tg">
<thead>
<tr>
<th class="tg-kiyi sticky-col-1" rowspan="2">Title 1</th>
<th class="tg-kiyi sticky-col-2" rowspan="2">Title 2</th>
<th class="tg-kiyi cover-head-cell" colspan="3">Title 3</th>
<th class="tg-kiyi" rowspan="2">Title 4</th>
<th class="tg-kiyi cover-head-cell" colspan="3">Title 5</th>
<th class="tg-kiyi" rowspan="2">Title 6</th>
<th class="tg-kiyi cover-head-cell" colspan="3">Title 7</th>
<th class="tg-kiyi" rowspan="2">Title 8</th>
</tr>
<tr>
<th class="tg-kiyi sticky-col-1" rowspan="2">Subtitle 1</th>
<th class="tg-kiyi sticky-col-2" rowspan="2">Subtitle 2</th>
<th class="tg-29qf">Subtitle 3</th>
<th class="tg-29qf">Subtitle 4</th>
<th class="tg-29qf">Subtitle 5</th>
<th class="tg-29qf">Subtitle 6</th>
<th class="tg-29qf">Subtitle 7</th>
<th class="tg-29qf">Subtitle 8</th>
<th class="tg-29qf">Subtitle 9</th>
<th class="tg-29qf">Subtitle 10</th>
<th class="tg-29qf">Subtitle 11</th>
</tr>
</thead>
<tr>
<td class="tg-xldj sticky-col-1">sdz</td>
<td class="tg-xldj sticky-col-2">saz</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">sa</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
</tr>
<tr>
<td class="tg-xldj sticky-col-1">as</td>
<td class="tg-xldj sticky-col-2">sa</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">sa</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">as</td>
<td class="tg-xldj">sa</td>
</tr>
<tr>
<td class="tg-dvid sticky-col-1">Total</td>
<td class="tg-dvid sticky-col-2">23</td>
<td class="tg-dvid">sd</td>
<td class="tg-dvid">ds</td>
<td class="tg-dvid">sd</td>
<td class="tg-dvid">sd</td>
<td class="tg-dvid">ds</td>
<td class="tg-dvid">dd</td>
<td class="tg-dvid">sd</td>
<td class="tg-dvid">ds</td>
<td class="tg-dvid">sd</td>
<td class="tg-dvid">ds</td>
<td class="tg-dvid">dd</td>
<td class="tg-dvid">sd</td>
</tr>
</table>
</div>
</div>
Please try this and let me know your idea.
Thanks.
I have a pricing table which contains some variables that depend on a dropdown list selection. The JSFIDDLE shows the desired outcome.
The desired outcome is dependable on the drop-down selection. As a selection is picked, then the following changes should take place in the table:
The "Item Cost" should display the price selected.
The "Total" price should be multiplied by the "Qty." to display the total shipping cost.
The grand "Total" should be the sum of the total column that includes Product + Shipping Costs.
Here's the dropdown options:
<div class="input-group full-width">
<span class="input-group-addon main-color hidden-sm hidden-xs">$</span>
<select id="shippingmethod" class="selectpicker form-control shipping-method" name="shippingmethod" aria-label="Shipping Method" tabindex="">
<option value="" selected="">Selet a Shipping Method</option>
<option value="2.95">US Mail - $2.95</option>
<option value="3.50">Priority Mail - $3.50</option>
<option value="4.67">Fedex - $4.67</option>
</select>
</div>
The table is as follows:
<table id="product-list">
<thead>
<tr>
<th class="text-left">Item</th>
<th class="text-center">Qty.</th>
<th class="text-center">Item Cost</th>
<th class="text-center">Tax</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr>
<td>Product Name</td>
<td class="qty">2</td>
<td class="item-cost">$10.00</td>
<td class="tax">$0.68</td>
<td class="total">$10.68</td>
</tr>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr>
<td>Shipping Cost</td>
<td class="qty red">1</td>
<td class="item-cost red">$2.95</td>
<td class="tax">$0.00</td>
<td class="total red">$5.90</td>
</tr>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr id="product-totals">
<td colspan="4"></td>
<td class="total red">$13.02</td>
</tr>
</tbody>
</table>
I would appreciate any help I can get regarding this scenario. Thanks.
If you want changes on the client-side to update some content, you'll need to use javascript/jQuery .change() function on the element you want to observe.
See here for more details
in your case, this would be:
$("#shippingmethod").change(function() {
// start by fetching the value of the selected option
var shippingPrice = $(this).val();
// do some other stuff to get other values, calculate, and display results
});
That other stuff you'll need to do will include using .html() function to change the values displayed in some elements of your table, like so: $("#shippingprice").html("$" + shippingPrice);
Note that the .html() func can also fetch a value form an element:
// Get the value displayed inside the id="shippingqty" td
var shippingQty = $("#shippingqty").html();
Please note however that this will provide you with a String type var, you'll need to use parseFloat(shippingQty); to make some maths with it.
Edit: As of your comment, there's a quick (and somewhat dirty) fiddle for you to examine (Note the comments in the html). Regarding javascript, best place to start id probably the javascript basics # MDN.
$("#shippingmethod").change(function() {
// Get the value from dropdown
var shippingPrice = $(this).val()
// Get the value from id="shippingqty" td content
var shippingQty = $("#shippingqty").html();
// get the value from id="producttotal" td content
var prodPriceWithSymbol = $("#producttotal").html();
// remove the $ symbol from prodPriceWithSymbol text
var productTotal = prodPriceWithSymbol.substring(1, prodPriceWithSymbol.length);
// strings to floats, multiply, round to 2 decimals
var shippingTotal = (parseFloat(shippingPrice) * parseFloat(shippingQty)).toFixed(2);
// strings to float, add, round to 2 decimals
var grandTotal = (parseFloat(shippingTotal) + parseFloat(productTotal)).toFixed(2);
// Set id="shippingprice" td content
$("#shippingprice").html("$" + shippingPrice);
// set id="shippingtotal" td content
$("#shippingtotal").html("$" + shippingTotal);
// set id='grandtotal" td content
$("#grandtotal").html("$" + grandTotal);
});
.pr8 {
padding-right: 8px;
}
.red {
font-weight: 600!important;
color: #ff0000;
}
.spacer,
.help-block {
clear: both;
padding: 0 7px;
}
.fw6 {
font-weight: 600;
}
.full-width {
width: 100%;
}
table#product-list {
width: 100%;
}
table#product-list thead tr th {
background-color: #fff !important;
font-weight: 500;
color: #0080a6 !important;
border-bottom: solid 2px #0080a6;
padding: 5px 2px 8px 2px;
}
table#product-list tbody {
background-color: #fff;
color: #333 !important;
}
table#product-list tbody tr td:first-child {
font-weight: 500;
text-align: left !important;
}
table#product-list tbody tr td {
font-weight: 300;
text-align: right !important;
}
table#product-list tbody tr td:last-child {
font-weight: 600;
text-align: right !important;
}
table#product-list tbody tr#product-totals {
clear: both;
padding-top: 10px;
margin-top: 10px;
}
table#product-list tbody tr#product-totals td:last-child {
border-top: dotted 1px #0080a6;
padding: 4px 0;
text-align: left;
font-weight: 600;
border-bottom: solid 1px #0080a6;
}
table#product-list tbody tr td.qty {
text-align: center !important;
}
table#product-list tbody tr td.item-cost {
padding: 0 4px 0 0;
}
table#product-list tbody tr td.tax {
margin: 0 5px 0 3px;
}
table#product-list tbody tr td.total {
margin: 0 0 0 5px;
}
<!-- Added jQuery loading -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ReviewShippingAndPayment" name="ReviewShippingAndPayment" method="post" action="/Distributor/Shop/Product-List">
<div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 p0">
<div class="pl8 bbcustom p0">
<h2 class="page-header"><i class="fa fa-cube pr8 hidden-sm hidden-xs"></i>Shipping Method Selection</h2>
<p>
The desired outcome is driven by the "<span class="fw6">Select a Shipping Method</span>" dropdown.<br /><br />When a shipping method is selected, then the "Item Cost" should be multiplied by the "Qty." and displayed in the Shipping Cost Total
column.<br /><br />Such selection should also update the final cost that include the Product Cost + Total Shipping.
</p>
<span class="spacer"></span>
</div>
<div class="spacer"></div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p0">
<div class="shipping-method-container">
<div class="field-wrapper">
<div class="input-group full-width">
<span class="input-group-addon main-color hidden-sm hidden-xs">$</span>
<select id="shippingmethod" class="selectpicker form-control shipping-method" name="shippingmethod" aria-label="Shipping Method" tabindex="">
<!-- Added value="0" here -->
<option value="0" selected="">Selet a Shipping Method</option>
<option value="2.95">US Mail - $2.95</option>
<option value="3.50">Priority Mail - $3.50</option>
<option value="4.67">Fedex - $4.67</option>
</select>
</div>
</div>
<span class="help-block"></span>
</div>
<div class="clearfix"></div>
<hr style="margim:0px;padding:0;" />
<div class="clearfix"></div>
<table id="product-list">
<thead>
<tr>
<th class="text-left">Item</th>
<th class="text-center">Qty.</th>
<th class="text-center">Item Cost</th>
<th class="text-center">Tax</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr>
<td>Product Name</td>
<td class="qty">1</td>
<td class="item-cost">$10.00</td>
<td class="tax">$0.68</td>
<td class="total" id="producttotal">$10.68</td>
</tr>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr>
<td>Shipping Cost</td>
<!-- Added id here -->
<td class="qty red" id="shippingqty">1</td>
<!-- Added id here -->
<td class="item-cost red" id="shippingprice">$2.95</td>
<!-- May add an id to be accessed if needed -->
<td class="tax">$0.00</td>
<!-- Added id here -->
<td class="total red" id="shippingtotal">$5.90</td>
</tr>
<tr>
<td colspan="5" class="pt5"></td>
</tr>
<tr id="product-totals">
<td colspan="4"></td>
<!-- Added id here -->
<td class="total red" id="grandtotal">$13.02</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
I am trying to add a blinking effect to my table when a button is pressed. My code kind of achieves this by making the whole table blink however it makes the data in the cells without an existing css hard to read. Therefore, I am trying to figure out if it is possible to make the just the border of each cell have the blinking effect instead of the whole cell so that the data is still easily readable as seen in the status row. Is this possible without having to add a css to every single cell?
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
background-color: white;
}
to {
background-color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1">hrgfawf</div>
</td>
<td>
<div id="p11">waffejtj</div>
</td>
<td>
<div id="c1">awfwhr</div>
</td>
<td>
<div id="ca1">afcascwef</div>
</td>
<td>
<div id="m1">grthrh</div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2">awegrthrth</div>
</td>
<td>
<div id="p21">DFAWFERGE</div>
</td>
<td>
<div id="c2">5687w43t</div>
</td>
<td>
<div id="ca2">fq3t34ytg5</div>
</td>
<td>
<div id="m2">oik768yq3</div>
</td>
<td>
<div id="mp2">90['97t</div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3">4t3twfe6u</div>
</td>
<td>
<div id="p31">76i4y3t3</div>
</td>
<td>
<div id="c3">vetg34wt43</div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
</body>
To achieve this you first need to put borders on the th and td elements. Then you can amend the .blink selector to amend the colours of the border, instead of the background, like this:
$("#alarm").click(function() {
$("#tableContainer").addClass("blink");
});
$("#stopAlarm").click(function() {
$("#tableContainer").removeClass("blink");
});
.heading {
text-align: center;
background-color: #C1C1C1;
}
.monitor {
text-align: center;
}
.row {
text-align: right;
background-color: powderblue;
}
div {
align-content: center;
}
table {
border-collapse: collapse;
}
th,
td {
min-width: 80px;
width: auto;
text-align: center;
padding-left: 10px;
padding-right: 10px;
border: 2px solid #FFF;
}
tr:nth-child(even) {
background-color: #F1F1F1;
}
.blink th,
.blink td {
animation: blink 200ms infinite alternate;
}
/*blink effect color switcher*/
#keyframes blink {
from {
border-color: white;
}
to {
border-color: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableContainer">
<tr>
<th class="heading">dsgegaw</th>
<th class="heading">fvsegwaf</th>
<th class="heading">peaagwwa</th>
<th class="heading">p76uihx</th>
<th class="heading">gdjhrdu3</th>
<th class="heading">sg45y7ids</th>
<th class="heading">30jqnfj</th>
<th class="heading">][2proq2=0-i</th>
<th class="heading">-20=riojwkfl</th>
<th class="heading">t-09tujkjgf</th>
</tr>
<tr>
<td class="column"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
<td class="monitor"></td>
</tr>
<tr>
<td class="row">System Time</td>
<td>
<div id="p1">hrgfawf</div>
</td>
<td>
<div id="p11">waffejtj</div>
</td>
<td>
<div id="c1">awfwhr</div>
</td>
<td>
<div id="ca1">afcascwef</div>
</td>
<td>
<div id="m1">grthrh</div>
</td>
<td>
<div id="mp1"></div>
</td>
</tr>
<tr>
<td class="row">Status</td>
<td>
<div id="p2">awegrthrth</div>
</td>
<td>
<div id="p21">DFAWFERGE</div>
</td>
<td>
<div id="c2">5687w43t</div>
</td>
<td>
<div id="ca2">fq3t34ytg5</div>
</td>
<td>
<div id="m2">oik768yq3</div>
</td>
<td>
<div id="mp2">90['97t</div>
</td>
</tr>
<tr>
<td class="row">Logged Time</td>
<td>
<div id="p3">4t3twfe6u</div>
</td>
<td>
<div id="p31">76i4y3t3</div>
</td>
<td>
<div id="c3">vetg34wt43</div>
</td>
</tr>
</table>
<button id="alarm" type="button">Start Alarm</button>
<button id="stopAlarm" type="button">Stop Alarm</button>
I am working with a MVC view that has a 3 columns table. The table displays a list of Products. Column #1 (product name) contains links to a product specific page. When a user clicks on the links, I want to expand and display the product description and at the end of the product description, I want to include a link that takes the user to the product page. If a user clicks on the link again, I want to collapse it back. I have a model that represents the product and the product description is stored in its own field.
The table is built and populated as below. Any insight on how to achieve the expand/collapse via jQuery is very much appreciated.
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th>Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
foreach (product p in model.products)
{
<tr>
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
}
</tbody>
</table>
The easiest way to to utilize product IDs as well. Add the specific product ID as a data attribute, then using jQuery, pull that attribute and reuse it to target rows containing the descriptions.
$('.productname').on('click', function() {
var id= $(this).attr('data-id');
$(this).toggleClass('active');
$('.data' + id).slideToggle(500);
});
.hide {display: none; }
/* -- below is just to "pretty up" the snippet ------ */
table {
width: 100%;
background: #eee;
border-collapse: collapse;
border: 1px solid #aaa;}
th { background: #cef; color: #4cf; text-transform: uppercase; font-size: 0.8em; padding: 3px;border: 1px solid #aaa;}
td { font-size: 1.1em; padding: 5px 10px; border: 1px solid #aaa; border-bottom: none; }
tr.collapsed td { padding: 0; border: none; }
.productname:hover, .active { background: #eff; }
.productdesc { padding: 5px 10px; background: #eff; border-top: 1px solid #aaa; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th>Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<!--
foreach (product p in model.products)
{
-->
<tr class="productname" data-id="prodID00">
<!-- Change data-id="prodID00" to data-id="#p.productID" -->
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID00">
<!-- Change class="hide productdesc dataprodID00" to class="hide productdesc data#p.productID" -->
<p>#p.productDescription #p.productLink</p></div>
</td>
</tr>
<!-- } -->
<!-- below are just manual iterations of the row above -->
<tr class="productname" data-id="prodID01">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID01">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID02">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID02">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID03">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID03">
<p>product description and link</p></div>
</td>
</tr>
<tr class="productname" data-id="prodID04">
<td>
#p.name
</td>
<td>
#p.type
</td>
<td>
#p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID04">
<p>product description and link</p></div>
</td>
</tr>
</tbody>
</table>
Note where the prodID is located in the rows.....
I removed the foreach function and brackets because it's invalid HTML. But if they are there and dynamically generate the HTML it'll work fine. The rows I used are just manual iterations opposed to dynamic iterations.
I have 5 listcell when I click on one listcell the color of it should be changed to green, next time when I click of another listcell, the color of previous should be reset and newly clicked should become green.i.e only one listcell can be green at one time.
5 listcell is just an example in actual case, the listcells are variable i.e of any number. They are created at runtime and appended to listitem.I donnot have ID of the listcells. The html is send from server side. How can i achieve this using java script.
I want an generic solution. What actually happens in case of radio Groups, can provide hint to my question.
My Table (Confusing ? Code is not needed to address my question. added it beacuse of first comment on question):
<TABLE style="TABLE-LAYOUT: fixed" id=d0DQ35-cave border=0 cellSpacing=0
cellPadding=0 width="100%">
<TBODY style="HEIGHT: 0px; VISIBILITY: hidden">
<TR id=d0DQ45-bdfaker class=z-listbox-faker>
<TH style="WIDTH: 222px" id=d0DQ55-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH style="WIDTH: 161px" id=d0DQ65-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH style="WIDTH: 161px" id=d0DQ75-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH style="WIDTH: 161px" id=d0DQ85-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH style="WIDTH: 161px" id=d0DQ95-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH id=d0DQ45-bdfakerflex></TH>
</TR>
</TBODY>
<TBODY id=d0DQ35-tpad>
<TR style="HEIGHT: 0px"></TR>
</TBODY>
<TBODY id=d0DQ35-rows>
<TR id=d0DQa5 class=z-listitem>
<TD id=d0DQb5 class=z-listcell>
<DIV id=d0DQb5-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN id=d0DQa5-cm class="z-listitem-img z-listitem-img-checkbox"></SPAN><SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQl5 class=z-label>LABEL</SPAN>
</DIV>
</TD>
<TD id=d0DQm5 class=z-listcell>
<DIV id=d0DQm5-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQn5 class=z-label>5</SPAN>
</DIV>
</TD>
<TD id=d0DQo5 class=z-listcell>
<DIV id=d0DQo5-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQp5 class=z-label>5 (100.0%)</SPAN>
</DIV>
</TD>
<TD id=d0DQx9 class=z-listcell>
<DIV id=d0DQx9-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQy9 class=z-label>5 (100.0%)</SPAN>
</DIV>
</TD>
<TD id=d0DQ_a class=z-listcell>
<DIV id=d0DQ_a-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQ1a class=z-label>0 (0.0%)</SPAN>
</DIV>
</TD>
</TR>
<TR id=d0DQe9 class="z-listitem z-listbox-odd">
<TD id=d0DQn1 class=z-listcell>
<DIV id=d0DQn1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN id=d0DQe9-cm class="z-listitem-img z-listitem-img-checkbox"></SPAN><SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQo1 class=z-label>ID</SPAN>
</DIV>
</TD>
<TD id=d0DQp1 class=z-listcell>
<DIV id=d0DQp1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQq1 class=z-label>5</SPAN>
</DIV>
</TD>
<TD id=d0DQr1 class=z-listcell>
<DIV id=d0DQr1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQs1 class=z-label>5 (100.0%)</SPAN>
</DIV>
</TD>
<TD id=d0DQt1 class=z-listcell>
<DIV id=d0DQt1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQu1 class=z-label>5 (100.0%)</SPAN>
</DIV>
</TD>
<TD id=d0DQv1 class=z-listcell>
<DIV id=d0DQv1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
id=d0DQw1 class=z-label>0 (0.0%)</SPAN>
</DIV>
</TD>
</TR>
</TBODY>
<TBODY id=d0DQ35-bpad>
<TR style="HEIGHT: 0px"></TR>
</TBODY>
<TBODY style="DISPLAY: none" id=d0DQ35-empty class=z-listbox-empty-body>
<TR>
<TD colSpan=5>No Columns Selected!</TD>
</TR>
</TBODY>
</TABLE>
Thanks,
Aman
css:
.selected { background: green }
js:
$('td').click(function () {
$('.selected').removeClass('selected');
$(this).addClass('selected');
});
EDIT: Proof of concept http://jsfiddle.net/SKUqG/