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>
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 html table with some rows of data which has a column called status. There are three status they are In progress, To do, Completed. I have a drop down at the top. The drop down contains Any,In progress, To do, Completed. How can I load the data based on the selected drop down value. Here below I have attached an image of my page.
My code is here below. Table data is coming from database.
<div class="table-wrapper">
<div class="table-title">
</div>
<div class="table-filter">
<div class="row">
<div class="col-sm-3">
<div class="show-entries">
<span>Show</span>
<select class="form-control">
<option>5</option>
<option>10</option>
</select>
<span>entries</span>
</div>
</div>
<div class="col-sm-9">
<div class="filter-group">
<label>Status</label>
<select class="form-control">
<option>Any</option>
<option>Completed</option>
<option>In Progress</option>
<option>To Run</option>
</select>
</div>
<span class="filter-icon"><i class="fa fa-filter"></i></span>
</div>
</div>
</div>
<form method="post" action="activeInactive.php">
<table class="paginated table table-striped table-hover">
<thead>
<tr>
<th>Test Name</th>
<th>Created By</th>
<th>Last updated</th>
<th>Test status</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="test_table">
<?PHP
$test_access = 0;
while($row = mysqli_fetch_array($tests_under_user)){
echo '<td width=250px; title="'.$testName.'">'.$row['name'].'</td>';
echo '<td title="'.$row['created'].'">'.$row['created'].'</td>';
echo '<td title="'.$row['edited'].'">'.$row['edited'].'</td>';
echo '<td>In Progress</td>';
echo '<td>';
echo '<i class="material-icons" data-toggle="tooltip" title="Edit"></i>';
echo '<i class="material-icons" data-toggle="tooltip" title="Delete"></i>';
echo '<i class="material-icons" data-toggle="tooltip" title="Copy" style="color: #2874A6">file_copy</i>';
echo '</td>';
}
?>
</tbody>
</table>
</form>
</div>
This may help you.
Visit here to try filtering with select tag.
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("mylist");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#mylist {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
<h2>My Customers</h2>
<select id="mylist" onchange="myFunction()" class='form-control'>
<option>A</option>
<option>b</option>
<option>c</option>
</select>
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</table>
Since you have lots of data, the best way to go is by making a call to the server and filter the data on the SQL level.
This way you can ask the server for a specific page and your filter parameters and get only that data, making the response time a lot smaller.
Additionally, you don't have to worry about any filtering logic in the client side. You just show the data you receive from the server.
Update:
If you insist on doing the work on the client side, you first need to realize that the part inside of <?PHP ?> is rendered on the server side.
In this case, you need to get all the data from the server into something you can run filtering logic on like a JavaScript object (usually using AJAX to get JSON data).
After you got the data and filtered it you can use JavaScript to dynamically create the table rows and update the pagination data.
There are numerous JavaScript libraries and frameworks for making AJAX calls and for templating (e.g. Angular, React and Vue), but you can also do it yourself with vanilla JavaScript (see AJAX, createElement and removeChild).
Note
While Aman Deep's answer was helpful, there are a cases in which it is lacking:
When you have more than one page of results you can't just change the display property. You will also need some mechanism to get results from the next pages.
If you have some CSS that is applied to even lines, once you filter using the display property your rendered result might be messed up (see example).
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;
}
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.
So far so good i have been able to merge table rows with the text in the td, but text in the textarea has not gone through. My table
Column1 | column2 | column3 | Column4
--------------------------------------
Assay | Source | label | 3%
-------------------------------------
Assay | Source | label | 10%
-------------------------------------
What I would like to accomplish
Column1 | column2 | column3 | Column4
-------------------------------------- //Note that Column1 has
| | | 3% //no textarea, just td text
Assay - Source - label ----------- //While all the rest have
| | | 10% //textareas in the tds
------------------------------------- // from column 2 - 4
I have this code that works only for tds without textareas. How do I merge also rows that have textareas having same data?
function merge() {
$('.result_table').each(function() {
var Column_number_to_Merge = 1;
// Previous_TD holds the first instance of same td. Initially first TD=null.
var Previous_TD = null;
var i = 1;
$("tbody", this).find('tr').each(function() {
// find the correct td of the correct column
// we are considering the table column 1, You can apply on any table column
var Current_td = $(this).find('td:nth-child(' + Column_number_to_Merge + ')');
if (Previous_TD == null) {
// for first row
Previous_TD = Current_td;
i = 1;
} else if (Current_td.text() == Previous_TD.text()) {
// the current td is identical to the previous row td
// remove the current td
Current_td.remove();
// increment the rowspan attribute of the first row td instance
Previous_TD.attr('rowspan', i + 1);
i = i + 1;
} else {
// means new value found in current td. So initialize counter variable i
Previous_TD = Current_td;
i = 1;
}
});
});
}
HTML
<table class="table table-condensed col-md-12 result_table">
<thead style="border:solid black 1px;">
<td class="side">TEST</td>
<td class="tdbold">METHOD</td>
<td class="tdbold">COMPENDIA</td>
<td class="tdbold">SPECIFICATION</td>
<td class="tdbold">DETERMINED</td>
<td class="side">REMARKS</td>
</thead>
<tbody>
<tr valign="middle" align="center">
<td style="font-size:13px; " class="tbody_data side" rowspan="2">Assay</td>
<td valign="middle" align="center" style="padding: 0px;" class="tbody_data">
<input type="hidden" value="6" name="tests[]">
<textarea style="border: medium none; vertical-align: middle; height: 79px;" class="det_st form-control">HPLC</textarea>
</td>
<td style="padding: 0px;" class="tbody_data">
<textarea style="border: medium none; height: 79px;" class="det_st form-control">Adopted In-House Method</textarea>
</td>
<td style="padding: 0px;" class="tbody_data">
<textarea style="border: medium none; height: 79px;" class="det_st form-control">92.5 - 107.5%</textarea>
</td>
<td style="padding: 0px;" class="tbody_data">
<textarea style="border: medium none; height: 82px;" class="det_st form-control">Day 1 105.3% (RSD=1.5%; n=6)</textarea>
</td>
<td class="tbody_data side">
<select style="border:none; margin:15px; width:145px;" class="select" selected="selected">
<option value="COMPLIES">COMPLIES</option>
<option value="COMPLIES">COMPLIES</option>
<option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
</select>
</td>
</tr>
<tr valign="middle" align="center">
<td valign="middle" align="center" style="padding: 0px;" class="tbody_data">
<input type="hidden" value="6" name="tests[]">
<textarea style="border: medium none; vertical-align: middle; height: 79px;" class="det_st form-control">HPLC</textarea>
</td>
<td style="padding: 0px;" class="tbody_data">
<textarea style="border: medium none; height: 79px;" class="det_st form-control">Adopted In-House Method</textarea>
</td>
<td style="padding: 0px;" class="tbody_data">
<textarea style="border: medium none; height: 79px;" class="det_st form-control">92.5 - 107.5%</textarea>
</td>
<td style="padding: 0px;" class="tbody_data">
<textarea style="border: medium none; height: 102px;" class="det_st form-control">Day 7 102.9% (RSD=0.27%; n=6)</textarea>
</td>
<td class="tbody_data side">
<select style="border:none; margin:15px; width:145px;" class="select" selected="selected">
<option value="COMPLIES">COMPLIES</option>
<option value="COMPLIES">COMPLIES</option>
<option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
</select>
</td>
</tr>
</tbody>
</table>
I'm not entirely sure what you're trying to do, but it looks like this line:
if (Current_td.text() == Previous_TD.text())
could be changed to:
if (Current_td.text() == Previous_TD.text()
|| Current_td.find("textarea").val() == Previous_TD.find("textarea").val())
The issue seems to be on this line
var Current_td = $(this).find('td:nth-child(' + Column_number_to_Merge + ')');
On your First row, The var Column_number_to_Merge = 1; will result in the column containing Assay to be set to Previous_TD.
On your second row, Current_td is pointing to the textarea. so the contents never match.
I'd recommend setting a data attribute on the columns and comparing the values using them. or group your data on the server and write it on the dom in the way you need it to be displayed.