In my Html Report everything working fine, but when i taking print, tables design disturbed between two pages. I also convert it into div structure but same issue occurred, I didn't find solution so far.
Please help.
Screenshot attached here
<div class="madeup-grid-section grid-detail-style" ng-show="nsDivReadyMade">
<lable class="grid-heading">Ready Made</lable>
<table class="table table-bordered table-striped page_table table_stylelike_count"
style="border-right:1px solid #000 !important;">
<thead>
<tr class="first_row">
<th ng-show="nsSnR">S#</th>
<th ng-show="nsItemR">Item</th>
<th ng-show="nsPileR">Pile</th>
<th ng-show="nsWeftR">Weft</th>
<th ng-show="nsGroundR">Ground</th>
<th ng-show="nsQualityR">Quality</th>
<th ng-show="nsSizeR">Size</th>
<th ng-show="nsProcessR">Treatment</th>
<th ng-show="nsShadeR">Shade</th>
<th ng-show="nsWeightR">Weight</th>
<th ng-show="nsQtyR">Quantity</th>
<th ng-show="nsPriceR">Price</th>
<th ng-show="nsAmountR">Amount</th>
</tr>
</thead>
<tbody>
<tr class="article-items {{item.trbgColor}}" ng-repeat="item in DetailDataList"
ng-if="item.ArticleType=='readymade'" style="border-right:1px solid #000;">
<td colspan="{{ttlRowColspanR+3}}" ng-if="item.RecordType=='ItemDesc'" style="text-align:left !important;">
<span>{{item.ItemDesc}}</span>
</td>
<td ng-show="nsSnR" rowspan="{{item.NoOfSubItems}}" ng-if="item.RecordType=='Article'"><span>{{item.GroupNum}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsItemR" ng-if="item.RecordType=='Article'"><span>{{item.ReadymadeItem}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsPileR" ng-if="item.RecordType=='Article'"><span>{{item.varPile}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsWeftR" ng-if="item.RecordType=='Article'"><span>{{item.varWeft}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsGroundR" ng-if="item.RecordType=='Article'"><span>{{item.varGround}}</span></td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsQualityR" ng-if="item.RecordType=='Article'"><span>{{item.Quality}}</span></td>
<td ng-if="item.RecordType!='ItemDesc'" ng-show="nsSizeR" ><span>{{item.varSizeWidth}}<span ng-if="item.RecordType=='Article'">*{{item.varSizeLength}}</span> {{item.SizeUnitAbbr}}</span></td>
<td ng-show="nsProcessR" ng-if="item.RecordType!='ItemDesc'">{{item.ProcesName}}</td>
<td ng-show="nsShadeR" ng-if="item.RecordType!='ItemDesc'">{{item.Shadname}}</td>
<td rowspan="{{item.NoOfSubItems}}" ng-show="nsWeightR" ng-if="item.RecordType=='Article'"><span>{{item.Weight}}</span></td>
<td ng-show="nsQtyR" class="numeric-field" ng-if="item.RecordType!='ItemDesc'">{{item.flQty | number:0}} {{item.UnitAbbr}}</td>
<td ng-show="nsPriceR" class="numeric-field" ng-if="item.RecordType!='ItemDesc'"><span>{{item.flPrice | number:2}}</span></td>
<td ng-show="nsAmountR" class="numeric-field" ng-if="item.RecordType!='ItemDesc'"><span>{{item.CurAbbr}} {{(item.flQty*item.flPrice) | number:0}}</span></td>
</tr>
<tr class="footer-row">
<td colspan="{{ttlRowColspanR}}" style="text-align:center;">Total</td>
<td ng-show="nsQtyR" class="numeric-field">{{ttlQtyRM}}</td>
<td ng-show="nsPriceR" class="numeric-field"></td>
<td ng-show="nsAmountR" class="numeric-field">{{CurrAbrr}} {{ttlAmntRM}}</td>
</tr>
</tbody>
</table>
</div>
Related
So I am trying to grey out an HTML table row upon expiry date. I don't want the data to disappear or hide. I just want the row to fade grey or something similar. Maybe make it unclickable? Is this possible with javascript. Apologies for this, but I am not very well versed in javascript, however I do have a light grasp of how it works.
Here's a basic example of my html table (the original is in a div with the bootstrap class: col-lg-8)
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
I'd like to grey out and disable the register link a day after the training date. Not sure if this would require the use of a class="" or id="". The data is obviously static data written in html code, as displayed above.
If this question has been asked, I'm sorry, I just haven't been able to find anything on this. Any help is highly appreciated.
A javascript approach would be something like this:
Find all <tr> elements in your table body
For each of those elements, look up the 4th cell, which has the date in it
Parse that date text to a timestamp
Compare the timestamp to the browser time
If the timestamp is earlier than the current time, add a class indicating that the row is expired
Style the expired class in CSS
Here's how that works in code:
const rowIsExpired = tr => {
const dateCell = tr.querySelector("td:nth-child(4)");
const dateString = dateCell.innerText;
const timestamp = Date.parse(dateString);
return timestamp < Date.now();
}
const tableRows = document.querySelectorAll("tbody > tr");
tableRows.forEach(tr => {
tr.classList.toggle("expired", rowIsExpired(tr));
});
.expired {
opacity: .4;
}
<table class="table table-striped">
<thead class="table-dark" align="center">
<tr>
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</tr>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Another Computer Training</b></td>
<td align="center" valign="middle"><b>expensive</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-August-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
Watch out!
There are some catches here:
You need to disable the link if you want to make sure it can't be clicked. It's best to not only use pointer-events in css for that, but actually disable it in the HTML source
This uses the browser's time. If the user loading the page has a wrong system clock or weird timezone, results may vary!
Parsing dates from strings can give unexpected results. Make sure your cell's text is formatted in a way that gives you the right outcomes.
The way I find the expiry date is brittle. If you change the order of your columns, it will break. It's best to add a specific attribute or class in the HTML so you can be sure it's easy to find in javascript.
You can use jquery to iterate your table tr to find what tr has time expired as below code.
Use addClass method to add grey class with expired row.
Use can use Date.parse to get extract time to compare, and add class disable-click to disable Register button.
$('tr').each(function(index, tr) {
let date = $(tr).find("td:eq(3)").text();
let day = date.split('-')[0];
if(day != undefined && index > 1 && day < 11){ // assume that 11 is expired day
$(tr).addClass('grey');
}
});
$('tr').each(function(index, tr) {
let date = $(tr).find("td:eq(3)").text();
let day = date.split('-')[0];
let datetime = Date.parse(date);
console.log(datetime);
if(day != undefined && index > 1 && datetime < new Date()){ // assume that 11 is expired day
$(tr).addClass('grey');
//alert($(tr).find("td:eq(4)").find("a").text())
$(tr).find("td:eq(4)").find("a").addClass("disable-click");
}
});
.grey{
background-color: grey;
}
.disable-click{
pointer-events:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr class='disabled'>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">13-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">10-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">19-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
I am not sure if you want to disable the link like this:
and then you can change the link color to grey by CSS & JavaScript or whatsoever
If you check this example, the first row of the table is disabled, while others are clickable. If the data is static, you can give the classname to any row based on your requirement, and if not, give the classname to the row specifically from the code.
tbody tr {
background-color: #eee;
}
tbody tr.disabled {
background-color: gray;
pointer-events: none;
}
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr class='disabled'>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
// calculate the difference, in days, between 2 dates
const dd=(d1,d2)=>Math.ceil( ( d1 - d2 ) / (1000 * 3600 * 24 ) );
//find all suitable anchor tags - of type button
document.querySelectorAll('td a[type="button"]').forEach(a=>{
// find the date from previous table cell and create as a Date object
let date=new Date(a.parentNode.previousElementSibling.textContent);
// calculate the difference
let diff=dd( new Date(), date );
// if beyond the threshold - do stuff
if( diff > 1 ){
a.parentNode.parentNode.classList.add('expired');
a.onclick=(e)=>{
e.preventDefault();
return false;
};
}
})
.expired td{
background:rgba(0,0,0,0.25);
color:rgba(0,0,0,0.5);
font-style:italic;
text-decoration:line-through;
}
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead><th colspan="5" align="center">JUNE 2021</th></thead>
<tbody>
<tr>
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Basic Banana Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Banana</td>
<td align="center" valign="middle">16-July-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr>
<td align="left" valign="middle"><b>Intensive Banana Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">classroom</td>
<td align="center" valign="middle">18-July-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
If you can add a data-expdate custom attribute to your rows, it would greatly simplify your life; it would be something like this:
const rows = document.querySelectorAll('tr[data-expdate]');
const today = new Date();
rows.forEach(row => {
const expDate = new Date(row.dataset.expdate);
if (expDate <= today) {
row.classList.add('expired');
row.querySelector('a').parentElement.innerHTML = '<span>Expired<span>';
}
})
.expired {
background-color: #efefef;
color: #999;
}
<table class="table table-striped">
<thead class="table-dark" align="center">
<th scope="col" align="center" width="400">Training Description</th>
<th scope="col" align="center">Cost (Excl Vat)</th>
<th scope="col" align="center">Location</th>
<th scope="col" align="center">Training Date</th>
<th scope="col" align="center"></th>
</thead>
<thead>
<th colspan="5" align="center">JUNE 2021</th>
</thead>
<tbody>
<tr data-expdate="2021-06-11">
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">11-June-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr data-expdate="2021-08-30">
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">30-August-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
<tr data-expdate="2021-07-16">
<td align="left" valign="middle"><b>Basic Computer Training</b></td>
<td align="center" valign="middle"><b>free</b></td>
<td align="center" valign="middle">Online - Zoom</td>
<td align="center" valign="middle">16-July-2021</td>
<td align="center" valign="middle"><a class="btn btn-dark" href="#" target="_blank" type="button">Register</a></td>
</tr>
</tbody>
</table>
I'm trying to add entire row data of a table to my array of object whenever someone click on anchor tag named view/edit. I wrote some logic but I guess I'm missing something.
index.html file
<table class="table">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Order No</th>
<th scope="col">Order Date</th>
<th scope="col">Status</th>
<th scope="col">Total Amount</th>
<th scope="col">Total Qty</th>
<th scope="col">Total Products</th>
<th scope="col">View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="user-name">Alice</td>
<td id="order-no">8536</td>
<td id="order-date">13/07/2020</td>
<td id="status" >Pending</td>
<td id="total-amount" >1800</td>
<td id="total-qty" >3</td>
<td id="total-products" >3</td>
<td>
<a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
</td>
</tr>
<tr>
<td id="user-name">Michael</td>
<td id="order-no">4354</td>
<td id="order-date">12/07/2020</td>
<td id="status" >Approved</td>
<td id="total-amount" >1500</td>
<td id="total-qty" >2</td>
<td id="total-products" >2</td>
<td>
<a id="view-data" href="#" class="text-success stretched-link">View/Edit</a>
</td>
</tr>
</tbody>
</table>
app.js file
let usersData = []; // array to store user table objects
$('#view-data').click(function(){
var row = $(this).closest("tr");
// userData object to store data from a table complete row
var userData = {
"order_no": row.find('#order-no').text(),
"order_date": row.find('#order-date').text(),
"totalproducts": row.find('#total-products').text(),
"total_amount": row.find('#total-amount').text(),
"total_qty": row.find('#total-qty').text(),
"status": row.find('#status').text(),
"user_name": row.find('#user-name').text(),
}
usersData.push(userData)
console.log(usersData)
})
Note: I should use button instead a tag but I'm using anchor tag because it'll open another tab in future for same data manipulation.
Selector need to change to class (view-data) instead of id
let usersData = []; // array to store user table objects
$('.view-data').click(function(ev){
ev.preventDefault();
ev.stopPropagation();
var row = $(ev.currentTarget).closest("tr");
// userData object to store data from a table complete row
var userData = {
"order_no": row.find('#order-no').text(),
"order_date": row.find('#order-date').text(),
"totalproducts": row.find('#total-products').text(),
"total_amount": row.find('#total-amount').text(),
"total_qty": row.find('#total-qty').text(),
"status": row.find('#status').text(),
"user_name": row.find('#user-name').text(),
}
usersData.push(userData)
console.log(userData)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">User Name</th>
<th scope="col">Order No</th>
<th scope="col">Order Date</th>
<th scope="col">Status</th>
<th scope="col">Total Amount</th>
<th scope="col">Total Qty</th>
<th scope="col">Total Products</th>
<th scope="col">View/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="user-name">Alice</td>
<td id="order-no">8536</td>
<td id="order-date">13/07/2020</td>
<td id="status" >Pending</td>
<td id="total-amount" >1800</td>
<td id="total-qty" >3</td>
<td id="total-products" >3</td>
<td>
<a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
</td>
</tr>
<tr>
<td id="user-name">Michael</td>
<td id="order-no">4354</td>
<td id="order-date">12/07/2020</td>
<td id="status" >Approved</td>
<td id="total-amount" >1500</td>
<td id="total-qty" >2</td>
<td id="total-products" >2</td>
<td>
<a id="view-data" href="#" class="view-data text-success stretched-link">View/Edit</a>
</td>
</tr>
</tbody>
</table>
I am trying to duplicate a specific line in my table when I click in "duppliquer" button
See my code to create my table below
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
<tr>
<th style="width: 5%">Col 1</th>
<th style="width: 5%">Col 2</th>
<th style="width: 5%">Col 3</th>
<th style="width: 5%">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Test1</td>
<td align="center">Test2</td>
<td align="center">Test3</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
<tr>
<td align="center">Test4</td>
<td align="center">Test5</td>
<td align="center">Test6</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
</tbody>
I know that I have to use Javascript ou Jquery, but I don't understand how to get the line that i want to duplicate
I made a lot of research on this subject, but cannot find any answer ...
You should get the current row element and then use clone(true) function to clone it and finally append the cloned row into the table so that it is placed after the current row elemnt. Here is an example:
$(".Duppliquer").click(function(){
var $rw = $(this).closest( "tr" );
var $new_rw = $rw.clone( true );
$rw.after($new_rw);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
<tr>
<th style="width: 5%">Col 1</th>
<th style="width: 5%">Col 2</th>
<th style="width: 5%">Col 3</th>
<th style="width: 5%">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Test1</td>
<td align="center">Test2</td>
<td align="center">Test3</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
<tr>
<td align="center">Test4</td>
<td align="center">Test5</td>
<td align="center">Test6</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
</tbody>
EDIT:
according to the comments the following code will also change the first cell of copied row:
$(".Duppliquer").click(function(){
var $rw = $(this).closest( "tr" );
var $new_rw = $rw.clone( true );
var $first_cell = $new_rw.find("td:first");
$first_cell.html($first_cell.html() + " Copy!");
$rw.after($new_rw);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
<tr>
<th style="width: 5%">Col 1</th>
<th style="width: 5%">Col 2</th>
<th style="width: 5%">Col 3</th>
<th style="width: 5%">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Test1</td>
<td align="center">Test2</td>
<td align="center">Test3</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
<tr>
<td align="center">Test4</td>
<td align="center">Test5</td>
<td align="center">Test6</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
</tbody>
//I also recommend using lowercase ids and classes.
$(document).ready(function(){
$(document).on('click', '.Duppliquer', function(e){
e.preventDefault();
var row = $(e.target).closest('tr'),
copy = row.clone();
copy.insertAfter(row);
});
});
Use JQuery find:
$('#myTable').find('tr').click(function () {
var indx = $(this).index() +1; --gets row index
var tr = $(this); --gets row
});
I have a table in which after clicking on a row I want to show new child table just after the row I clicked. I am calling new api on row click so I have to show it in new table just after the row clicked. see the snapshot
After clicking on first row the new table is showing like 1, ABC_1, DEF
Here is code for template
<table md-table class="md-primary md-data-table">
<thead md-head md-order="vm.query.order">
<tr md-row>
<th md-column><span>S. No.</span></th>
<th md-column><span>Project Name</span></th>
<th md-column><span>Deadline</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-click="vm.ShowDetailed($index)" ng-repeat="project in vm.projects | limitTo : vm.query.limit : (vm.query.page-1)*vm.query.limit">
<td md-cell>{{($index+1)+(vm.query.page-1)*vm.query.limit}}</td>
<td md-cell>{{project.fields.project_name}}</td>
<td md-cell>{{project.fields.end_date}}</td>
<table md-table ng-show="vm.detailedShow[$index]">
<thead md-head>
<tr md-row>
<th md-column><span>Project Name</span></th>
<th md-column><span>District</span></th>
<th md-column><span>City</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="site in sites">
<td md-cell>{{site.projectName}}</td>
<td md-cell>{{site.district}}</td>
<td md-cell>{{site.city}}</td>
</tr>
</tbody md-body>
</table>
</tr>
</tbody>
</table>
Here is the functions for show/hide
vm.detailedShow = [];
vm.ShowDetailed = function(index){
vm.detailedShow[index] = !vm.detailedShow[index];
}
The value of vm.detailedShow[$index] is getting true/false on click still I am not able to show the table.
The first thing is you can't insert <table> just like a <tr> or <td>. But you can insert the table inside a <td> tag.
Try the below one.
<table md-table class="md-primary md-data-table">
<thead md-head md-order="vm.query.order">
<tr md-row>
<th md-column><span>S. No.</span></th>
<th md-column><span>Project Name</span></th>
<th md-column><span>Deadline</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-click="vm.ShowDetailed($index)" ng-repeat-start="project in vm.projects | limitTo : vm.query.limit : (vm.query.page-1)*vm.query.limit">
<td md-cell>{{($index+1)+(vm.query.page-1)*vm.query.limit}}</td>
<td md-cell>{{project.fields.project_name}}</td>
<td md-cell>{{project.fields.end_date}}</td>
</tr>
<tr ng-show="vm.detailedShow[$index]" ng-repeat-end>
<td> </td>
<td colspan="2">
<table md-table ng-show="vm.detailedShow[$index]">
<thead md-head>
<tr md-row>
<th md-column><span>Project Name</span></th>
<th md-column><span>District</span></th>
<th md-column><span>City</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="site in sites">
<td md-cell>{{site.projectName}}</td>
<td md-cell>{{site.district}}</td>
<td md-cell>{{site.city}}</td>
</tr>
</tbody md-body>
</table>
</td>
</tr>
</tbody>
</table>
I'm using table plugin of datatables.net. I'm having the problem with complex header columns and have the following error when using it.
Uncaught TypeError: Cannot call method 'fnSetData' of undefined at jquery.dataTables.js line 820
this html code (actually this is a template)
<!-- BEGIN:main -->
<table id='myTable' style='width: 100%'>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="4">Contract Details</th>
<th colspan="4">Delivery</th>
<th rowspan="2">Basis Terminal Month</th>
<th colspan="5">Fixed</th>
<th colspan="4">Unfixed</th>
<th colspan="3">Trigger</th>
<th colspan="2">Payment</th>
<th colspan="2" rowspan="2"></th>
</tr>
<tr>
<th>Contract Ref</th>
<th>Supplier/Buyer</th>
<th>Grade</th>
<th>Days Pending</th>
<th>Tons</th>
<th>Delivered</th>
<th>Balance</th>
<th>Status</th>
<th>Tons</th>
<th>Contract Price</th>
<th>Contract FOB Price</th>
<th>Mark To Market Price</th>
<th>Outright Exposure FOB</th>
<th>Tons</th>
<th>Contract FOB Diff</th>
<th>Mark To Market FOB Diff</th>
<th>Differential Exposure FOB</th>
<th>Strike Price</th>
<th>Variance</th>
<th>Days</th>
<th>Due Date</th>
<th>Days Late</th>
</tr>
</thead>
<tbody>
<!-- BEGIN:row -->
<tr id="row_{id}">
<td>{count}</td>
<td>{ref_number}</td>
<td>{supplier}</td>
<td>{grade}</td>
<td class="formatNumber alignRight">{pending_day}</td>
<td class="formatNumber alignRight">{contract_tons}</td>
<td class="formatNumber alignRight">{delivered_tons}</td>
<td class="formatNumber alignRight">{pending_tons}</td>
<td><input type="checkbox" id="rd_{id1}" value="{delivery_status}" {checked}/></td>
<td class="alignCenter">{terminal_month}</td>
<td class="formatNumber alignRight">{fixed_tons}</td>
<td class="formatNumber alignRight">{contract_price}</td>
<td class="formatNumber alignRight">{contract_fob_price}</td>
<td class="formatNumber alignRight">{market_price}</td>
<td class="formatNumber alignRight">{outright_fob}</td>
<td class="formatNumber alignRight">{unfixed_tons}</td>
<td class="formatNumber alignRight">{contract_fob_diff}</td>
<td class="formatNumber alignRight">{market_fob_diff}</td>
<td class="formatNumber alignRight">{differential_fob}</td>
<td class="formatNumber alignRight">{strike_price}</td>
<td class="formatNumber alignRight">{variance}</td>
<td class="formatNumber alignRight">{trigger_days}</td>
<td>{payment_due_date}</td>
<td class="formatNumber alignRight">{payment_days_late}</td>
<td><input type="button" value="Detail" onclick="ContractDetail('{id2}')"/></td>
<td><input type="button" value="Traffic" onclick="trafficMovement('{id3}')"/></td>
</tr>
<!-- END:row -->
</tbody>
</table>
<input type="hidden" id="action" name="action" value=""/>
<input type="hidden" id="contract_id" name="contract_id" value=""/>
<!-- END:main -->
and this is the javascript where I call datatable
$(document).ready(function() {
$("#myTable").dataTable();
});
I don't know what is the problem, I saw in datatables.net they say that it supports complex header column by call datatable(). I think my problem is from the html code.
The issue is in the header for the last two columns that you add for your buttons. You're declaring it as both rowspan="2" and colspan="2" and DataTables is interpreting it as a single column.
Simply change the
<th colspan="2" rowspan="2"></th>
to be:
<th rowspan="2"></th>
<th rowspan="2"></th>
And you will be good to go.