Is there any way to use slick carousel in a table? I tried to use it in common way but then the slick element is the whole table and not the column.
Maybe someone knows what to do or knows a working plugin for that.
Here's a screenshot what i want to do:
HTML:
<table class="js-table-slider table-responsive">
<tr class="table-slider-row">
<th class="table-slider-head">Top</th>
<th class="table-slider-head">Zimmer</th>
<th class="table-slider-head">Wohnfläche</th>
<th class="table-slider-head">Geschoss</th>
<th class="table-slider-head">Preis</th>
<th class="table-slider-head">Grundriss</th>
</tr>
<tr class="table-slider-row">
<td class="table-slider-cell">1</td>
<td class="table-slider-cell">4</td>
<td class="table-slider-cell">93,50 m2</td>
<td class="table-slider-cell">EG</td>
<td class="table-slider-cell">€ 195.000</td>
<td class="table-slider-cell"><i class="far fa-image"></i></td>
</tr>
<tr class="table-slider-row">
<td class="table-slider-cell">1</td>
<td class="table-slider-cell">4</td>
<td class="table-slider-cell">93,50 m2</td>
<td class="table-slider-cell">EG</td>
<td class="table-slider-cell">€ 195.000</td>
<td class="table-slider-cell"><i class="far fa-image"></i></td>
</tr>
<tr class="table-slider-row">
<td class="table-slider-cell">1</td>
<td class="table-slider-cell">4</td>
<td class="table-slider-cell">93,50 m2</td>
<td class="table-slider-cell">EG</td>
<td class="table-slider-cell">€ 195.000</td>
<td class="table-slider-cell"><i class="far fa-image"></i></td>
</tr>
JavaScript:
$(function (){
$('.js-table-slider').slick({
dots: false,
pauseOnHover: false,
autoplay: false,
dots: true,
prevArrow: "<div class='table-slider-arrow left'><i class='fal fa-chevron-left'></i></div>",
nextArrow: "<div class='table-slider-arrow right'><i class='fal fa-chevron-right'></i></div>"
});
});
Related
I need to automatically eliminate a column from a html table using javascript. The table is created automatically from a csv file using a framework so I can't modify it (ex. add an id, etc.). I managed to eliminate the column by adding a link to the column header, and on click it eliminates the column, but I can't find a way to do it automatically when the page loads. I'm new to javascript so please try to explain it for dummies.
function closestByTagName(el, tagName) {
while (el.tagName != tagName) {
el = el.parentNode;
if (!el) {
return null;
}
}
return el;
}
function delColumn(link) {
var idx = 2,
table = closestByTagName(link, "TABLE"),
rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
table.rows[i].deleteCell(idx);
}
return false;
}
window.onload = function() {
var th = document.querySelectorAll("th");
th[2].innerHTML += ' X';
}
<div class="table">
<table class="inline">
<tr class="row0">
<th class="col0">FullName</th>
<th class="col1">Country</th>
<th class="col2">Position</th>
<th class="col3">CellPhone</th>
<th class="col4">Email</th>
</tr>
<tr class="row1">
<td class="col0">magnus</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">22</td>
<td class="col4">magnus.gaylord#example.com</td>
</tr>
<tr class="row2">
<td class="col0">Phoebe Feest</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">23</td>
<td class="col4">ylittel#example.net</td>
</tr>
<tr class="row3">
<td class="col0">Prof. Tad Johnston</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">24</td>
<td class="col4">srau#example.org</td>
</tr>
<tr class="row4">
<td class="col0">Annabelle Ortiz</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">25</td>
<td class="col4">damore.walker#example.org</td>
</tr>
<tr class="row5">
<td class="col0">Mrs. Adella Schiller IV</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">26</td>
<td class="col4">jadyn.dibbert#example.com</td>
</tr>
</table>
</div>
The above code works but I have to press the x on the position column for it to be eliminated and I need it to happen automatically. In other words I don't want to use the code href="#" onclick="return delColumn(this)" but have it happen on load.
Since all your columns have a particular class, maybe one possible solution using ES6 is to use:
document.querySelectorAll(".col2").forEach(col => col.remove());
Or with a standard approach:
var cols = document.querySelectorAll(".col2");
for (var i = 0; i < cols.length; i++)
{
cols[i].remove();
}
Example:
window.onload = function()
{
var cols = document.querySelectorAll(".col2");
for (var i = 0; i < cols.length; i++)
{
cols[i].remove();
}
// Or with ES6:
//document.querySelectorAll(".col2").forEach(col => col.remove());
}
<div class="table">
<table class="inline">
<tr class="row0">
<th class="col0">FullName</th>
<th class="col1">Country</th>
<th class="col2">Position</th>
<th class="col3">CellPhone</th>
<th class="col4">Email</th>
</tr>
<tr class="row1">
<td class="col0">magnus</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">22</td>
<td class="col4">magnus.gaylord#example.com</td>
</tr>
<tr class="row2">
<td class="col0">Phoebe Feest</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">23</td>
<td class="col4">ylittel#example.net</td>
</tr>
<tr class="row3">
<td class="col0">Prof. Tad Johnston</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">24</td>
<td class="col4">srau#example.org</td>
</tr>
<tr class="row4">
<td class="col0">Annabelle Ortiz</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">25</td>
<td class="col4">damore.walker#example.org</td>
</tr>
<tr class="row5">
<td class="col0">Mrs. Adella Schiller IV</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">26</td>
<td class="col4">jadyn.dibbert#example.com</td>
</tr>
</table>
</div>
Shidersz's answer is fine, but it's also worth noting that you could do with with a single CSS rule instead of JavaScript:
.col2 {
display: none;
}
<div class="table">
<table class="inline">
<tr class="row0">
<th class="col0">FullName</th>
<th class="col1">Country</th>
<th class="col2">Position</th>
<th class="col3">CellPhone</th>
<th class="col4">Email</th>
</tr>
<tr class="row1">
<td class="col0">magnus</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">22</td>
<td class="col4">magnus.gaylord#example.com</td>
</tr>
<tr class="row2">
<td class="col0">Phoebe Feest</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">23</td>
<td class="col4">ylittel#example.net</td>
</tr>
<tr class="row3">
<td class="col0">Prof. Tad Johnston</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">24</td>
<td class="col4">srau#example.org</td>
</tr>
<tr class="row4">
<td class="col0">Annabelle Ortiz</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">25</td>
<td class="col4">damore.walker#example.org</td>
</tr>
<tr class="row5">
<td class="col0">Mrs. Adella Schiller IV</td>
<td class="col1">Guatemala</td>
<td class="col2">Lacayo</td>
<td class="col3">26</td>
<td class="col4">jadyn.dibbert#example.com</td>
</tr>
</table>
</div>
I am trying to only select a specific set of links in a table. I figure that the best way to do it is by selecting them by the title attribute that contains all contain the word 'ULD'.
Here is my code the allowed me to narrow it down to all links in a table but no further. I tried querySelectorAll() and selectElementsbyTitle but had no luck. Also keep in mind this needs to work in IE11 and no JQuery.
var tabl = document.getElementById("Func15543_tblMissedBagReport");var anchors = tabl.getElementsByTagName("a");
Here are the links I want to select out of the following table:
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SELAZ5 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="-5893118207572745590"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SELAZ5
</A>
Here is a sample of the table:
Missed Bag Report
<img src="../Content/images/icons/excel.gif" border="0" alt="Click to export to excel." title="Click to export to excel." height="13" width="13">
</a>
</SPAN>
<SPAN CLASS="CaptionRight">
<SPAN ID="Func15543_PagingControlOne"></SPAN>
</SPAN>
</CAPTION>
<THEAD>
<TR>
<TH ROWSPAN="2">#</TH>
<TH COLSPAN="5">Destination</TH>
<TH ROWSPAN="2">Load<BR>Create<BR>Sort</TH>
<TH ROWSPAN="2">Bag Close Time</TH>
<TH ROWSPAN="2">Age > 90 min (Red)</TH>
<TH ROWSPAN="2">Bag Tag #</TH>
<TH ROWSPAN="2">Pkgs<BR>in<BR>Bag</TH>
</TR>
<TR>
<TH>Cntry<BR>Code</TH>
<TH>SLIC</TH>
<TH>Sort</TH>
<TH>Serv Lvl</TH>
<TH>Location</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD CLASS="CenterText ">1</TD>
<TD CLASS="CenterText ">US</TD>
<TD CLASS="CenterText ">4009 </TD>
<TD CLASS="CenterText ">D</TD>
<TD CLASS="CenterText ">2DA</TD>
<TD CLASS="CenterText ">GRADE LANE HUB </TD>
<TD CLASS="CenterText ">T</TD>
<TD CLASS="CenterText ">
12/14/18 4:12 PM
</TD>
<TD CLASS="WhiteText CenterText G_CLR_Green5 ">
56 Mins. Old
</TD>
<TD CLASS="CenterText ">
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SELAZ5 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="-5893118207572745590"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SELAZ5
</A>
</TD>
<TD class="CenterText "> 6</TD>
</TR>
<TR>
<TD CLASS="CenterText G_CLR_6">2</TD>
<TD CLASS="CenterText G_CLR_6">US</TD>
<TD CLASS="CenterText G_CLR_6">0759 </TD>
<TD CLASS="CenterText G_CLR_6">N</TD>
<TD CLASS="CenterText G_CLR_6">GRD</TD>
<TD CLASS="CenterText G_CLR_6">SADDLEBROOK </TD>
<TD CLASS="CenterText G_CLR_6">T</TD>
<TD CLASS="CenterText G_CLR_6">
12/14/18 4:15 PM
</TD>
<TD CLASS="WhiteText CenterText G_CLR_Green5">
53 Mins. Old
</TD>
<TD CLASS="CenterText G_CLR_6">
<A
CLASS="ESR-Ajax"
TITLE="View ULD B1769SEL3I0 detail"
HREF="Javascript:void(0)"
AJAX-FUNCTION="Shared_ULDDetail"
intMasterReferenceNumber="5433550294352748012"
intULDReferenceNumber="8922482455613715109"
strULDTypeCode="01"
dtmReportDate="2018-12-14"
intPageNumber="1">
B1769SEL3I0
</A>
</TD>
<TD class="CenterText G_CLR_6"> 6</TD>
</TR>
You can use querySelectorAll with an attribute selector [attr] and a contains flag *=:
var table = document.querySelector('table');
var links = table.querySelectorAll('a[title*="ULD"]');
console.log(links);
<table>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
I tried tablesorter to sort the time in HH:MM:SS format .But I need a customizable sort to split and sort the time even if the time is varying by minuts or seconds
HTML table sort using Javascript.
HTML :
<table class="table-bordered" border="1">
<thead>
<tr class="Headers">
<th>Number</th>
<th>Date start
</th>
<th>Date end</th>
</tr>
</thead>
<tbody>
<tr class="Entries" data-id="13">
<td data-field-type="string">1234</td>
<td data-field-type="date">01-04-2015</td>
<td data-field-type="date">01-04-2015</td>
</tr>
<tr class="Entries" data-id="24">
<td data-field-type="string">1352</td>
<td data-field-type="date">04-10-2012</td>
<td data-field-type="date">23-10-2015</td>
</tr>
<tr class="Entries" data-id="8">
<td data-field-type="string">1124</td>
<td data-field-type="date">13-05-2014</td>
<td data-field-type="date">01-04-2015</td>
</tr>
<tr class="Entries" data-id="23">
<td data-field-type="string">1652</td>
<td data-field-type="date">07-11-2013</td>
<td data-field-type="date">22-10-2015</td>
</tr>
<tr class="Entries" data-id="23">
<td data-field-type="string">1652</td>
<td data-field-type="date">04-12-2013</td>
<td data-field-type="date">22-10-2015</td>
</tr>
</tbody>
</table>
Javascript :
$('tr.Entries').each(function() {
var $this = $(this),
t = this.cells[1].textContent.split('-');
$this.data('_ts', new Date(t[2], t[1]-1, t[0]).getTime());
}).sort(function (a, b) {
return $(a).data('_ts') > $(b).data('_ts');
}).appendTo('tbody');
Try it here
I'm using datatable and deleting multiple rows on the click of button now I'm trying to get back deleted rows from the datatable, below are the code I have written to reset the table but its not working, kindly help on this.
<html>
<head>
<script>
$(document).ready(function() {
var table = $('#scmJobs').DataTable({
"paging": false,
"bFilter": false,
"info": false
});
$('#scmJobs tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
$('#deleteButton').click( function () {
// alert( table.rows('.selected').data().length +' row(s) selected' );
table.rows('.selected').cache();
table.rows('.selected').remove().draw( false );
} );
$('#resetButton').click( function () {
$.fn.dataTable.ext.search.pop();
table.draw();
} );
} );
</script>
</head>
<body>
<input type="button" id="deleteButton" value="Delete"/>
<input type="button" id="resetButton" value="Reset"/>
<table id="scmJobs" border="0" cellspacing="0" cellpadding="0"
class="grid" width="100%">
<thead>
<tr style="background-color: silver;" >
<th style="text-align:left;" width="183px" >Attribute</th>
<th width="76px">DQ</th>
<th width="76px">QTY</th>
<th width="77px"> DQ</th>
<th width="77px">QTY </th>
<th width="77px">DQ</th>
<th width="77px">QTY</th>
<th width="77px">DQ</th>
<th width="77px">QTY</th>
<th width="77px">DQ</th>
<th width="77px">QTY</th>
<th width="74px">DQ</th>
<th width="74px" >QTY </th>
</tr>
</thead>
<tbody>
<tr data-user="End of new attach date">
<td style="text-align:left;">End of new attach date</td>
<td style="text-align:right;">100.000</td>
<td style="text-align:right;">9000000000</td>
<td style="text-align:right;">100.000</td>
<td style="text-align:right;">9000000000</td>
<td style="text-align:right;">100.000</td>
<td style="text-align:right;">9000000000</td>
<td style="text-align:right;">100.000</td>
<td style="text-align:right;">9000000000</td>
<td style="text-align:right;">100.000</td>
<td style="text-align:right;">9000000000</td>
<td style="text-align:right;">100.000</td>
<td style="text-align:right;">9000000000</td>
</tr>
<tr data-user="Contract bill-to">
<td style="text-align:left;">Contract bill-to</td>
<td style="text-align:right;">0.999907</td>
<td style="text-align:right;">89139</td>
<td style="text-align:right;">0.999907</td>
<td style="text-align:right;">89139</td>
<td style="text-align:right;">0.999907</td>
<td style="text-align:right;">89139</td>
<td style="text-align:right;">0.999907</td>
<td style="text-align:right;">89139</td>
<td style="text-align:right;">0.999907</td>
<td style="text-align:right;">89139</td>
<td style="text-align:right;">0.9999072</td>
<td style="text-align:right;">89139</td>
</tr>
<tr>
<td style="text-align:left;">Configuration</td>
<td style="text-align:right;">100.000</td>
<td style="text-align:right;">9000000000</td>
<td style="text-align:right;">100.000</td>
<td style="text-align:right;">9000000000</td>
<td style="text-align:right;">100.000</td>
<td style="text-align:right;">9000000000</td>
<td style="text-align:right;">100.000</td>
<td style="text-align:right;">9000000000</td>
<td style="text-align:right;">100.000</td>
<td style="text-align:right;">9000000000</td>
<td style="text-align:right;">100.000</td>
<td style="text-align:right;">9000000000</td>
</tr>
</tbody>
</table>
</body>
</html>
From DataTables row().remove() API: "This method (and its plural counterpart, rows().remove()) will remove the selected row from the DataTable completely, deleting the allocated memory for data and node from the browser."
Solution A) Refresh the page on reset and make sure the server serves up the original version.
Solution B) Create a Recycle Bin array or a hidden table and move the rows there instead of remove(). Then on $('#resetButton').click() move them or add them back. Make sure to clear the recycle bin when reset is clicked.
I have created a GSP page with two dynamic table with data and now i have to compare the data (inner html) and if any difference then highlight in table 2.
how to do it on clicking button using JS/jquery on clientside?
Table 1 is -
<table class="table loadTable" id ="table1">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode </td>
<td nowrap="">int </td>
<td nowrap="">YES </td>
<td nowrap="">NULL </td>
<td nowrap="">10 </td>
</tr>
<tr>
<td nowrap="">Number </td>
<td nowrap="">varchar </td>
<td nowrap="">NO </td>
<td nowrap="">20 </td>
<td nowrap="">NULL </td>
<td nowrap="">PRI </td>
</tr><tr>
<td nowrap="">Type </td>
<td nowrap="">tinyint </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">3 </td>
<td nowrap="">PRI </td>
</tr>
<tr>
<td nowrap="">Date </td>
<td nowrap="">smalldatetime </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">NULL </td>
</tr>
</tbody>
table 2 is -
<table class="table loadTable" id ="table2">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode</td>
<td nowrap="">int</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">10</td>
<td nowrap=""></td>
</tr>
<tr>
<td nowrap="">PhoneNumber</td>
<td nowrap="">varchar</td>
<td nowrap="">NO</td>
<td nowrap="">20</td>
<td nowrap="">NULL</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">Type</td>
<td nowrap="">tinyint</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">3</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">EffectiveDate</td>
<td nowrap="">datetime</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">NULL</td>
<td nowrap=""></td>
</tr>
</tbody>
</table>
if we click on following button then table 2 should get highlighted with any non matching data with table2.
<div style="align:right"><input type="submit" value="Compare IVR & TNS" /></div>
I wrote a quick function that should work as long as the number of rows is always the same and the user can't remove a row. in which case you should add id's to the rows and compare the rows by id or key.
function compareTables(t1, t2){
var t2rows = t2.find('tbody > tr');
t1.find('tbody > tr').each(function(index){
var t1row = $(this);
var t2row = $(t2rows[index]);
var t2tds = t2row.find('td');
t1row.find('td').each(function(index){
if($(this).text().trim() != $(t2tds[index]).text().trim() ){
console.log('difference: table1:('+$(this).text()+') table2:('+$(t2tds[index]).text()+')');
//set row in error
return;
}
});
});
}