How to pull a string from a table (see screenshot) with a custom Js for google tag manager dataLayer.See here :http://i.stack.imgur.com/RtpbO.jpg 1
I tried this
function () {
document.getElementsByClassName('shop_table order_details');
return;
}
But no way, i always get : undefined
Tks for the help
your function
function () {
document.getElementsByClassName('shop_table order_details');
return;
}
returns undefined always as you made it so. return; will always return undefined.
and to get value from table cell
html
<table>
<thead>
<tr>
<td>some text</td>
</tr>
</thead>
<tbody>
<tr>
<td>some text</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>some text</th>
<td>some text</td>
</tr>
<tr>
<th>some text</th>
<td>your text</td>
</tr>
<tr>
<th>some text</th>
<td>some text</td>
</tr>
</tfoot>
</table>
js
var tfoot = document.getElementsByTagName("tfoot");
var tr = tfoot[0].getElementsByTagName("tr");
console.log(tr[1].getElementsByTagName("td")[0].innerText);
Related
I have a table with several rows, I have row that has anchor element when clicking this anchor some rows that have display none should be shown.
I need when clicking the anchor with class .pending-wide-col-name to toggle the class .dis-none on the table rows with class .results-secondary-hidden-row
Here is my HTML code:
<table>
<tbody>
<tr class="results-main-row has-hidden-row">
<td>
<a class="pending-wide-col-name">some text</a>
</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
</tbody>
</table>
Here is my CSS code:
.dis-none {
display: none;
}
Here is my javaScript code:
var mainRowWithHiddenChild = document.querySelector('.has-hidden-row .pending-wide-col-name');
var secondaryHiddenRow = document.querySelectorAll('.results-secondary-hidden-row');
mainRowWithHiddenChild.addEventListener('click', function () {
for (let i = 0; i < mainRowWithHiddenChild.length; i++) {
secondaryHiddenRow[i].classList.toggle('dis-none');
}
});
I tried this JS code but it is not working.
You need to use secondaryHiddenRow.length in iteration instead of mainRowWithHiddenChild.length
var mainRowWithHiddenChild = document.querySelector('.has-hidden-row .pending-wide-col-name');
var secondaryHiddenRow = document.querySelectorAll('.results-secondary-hidden-row');
mainRowWithHiddenChild.addEventListener('click', function () {
for (let i = 0; i < secondaryHiddenRow.length; i++) {
secondaryHiddenRow[i].classList.toggle('dis-none');
}
});
.dis-none {
display: none;
}
<table>
<tbody>
<tr class="results-main-row has-hidden-row">
<td>
<a class="pending-wide-col-name">some text</a>
</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
<tr class="results-secondary-hidden-row dis-none">
<td>some text</td>
</tr>
</tbody>
</table>
could someone help me with this block of code please.
I have a table that usually comes with more than 5 rows.
I want to show only 5 when loading the page, and when clicking on "SHOW MORE" show the rest, when clicking on "SHOW LESS" show only 5.
SHOW MORE and SHOW LESS must be the same button
Can someone help me. I started using Jquery, but I wanted to use pure JS
$("[id*='trid'] > tr").each(function(index) {
if (index >= 5) {
$(this).hide();
}
});
function mostrarRegistros() {
$("[id*='trid'] > tr").each(function(index) {
$(this).show();
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tbody id="trid">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<br />
<br />
<br />
<button type="button" onclick="mostrarRegistros()">Show More/ Show Less</button>
Here is a solution using vanilla js, its one way to do it but could do it differently like attach the button dynamically which would simplify it abit.
If you have multiple tables use a class to define that the table should have reveal functionality, then grab all tables and pass in the element to a function which provides the functionality, then return the set of methods which can call on the buttons, using an id as an identifier.
const tableReveal = function(elm, options) {
// merge options
options = Object.assign({}, {
limit: 3
}, options)
// the tr's
let trs = elm.querySelectorAll('tbody tr')
// shown state
let shown
// funcs
const hide = () => {
trs.forEach((tr, index) => index >= options.limit ? tr.style.display = 'none' : '')
shown = false
}
const show = () => {
trs.forEach((tr) => tr.style.display = 'table-row')
shown = true
}
// initial state
hide()
// reveal funcs
return {
toggle: () => shown ? hide() : show(),
hide,
show
}
}
/**
* Usage:
* - For each over every table-reveal class, init reveal func and pass in element + options, return and assign table[id] for button
*/
let table = {}
document.querySelectorAll('.table-reveal').forEach(el => table[el.getAttribute('id')] = tableReveal(el, {
limit: 5
}))
<table style="width:100%" class="table-reveal" id="table-reveal-1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<button type="button" onclick="table['table-reveal-1'].toggle()">Show More / Show Less</button>
<table style="width:100%" class="table-reveal" id="table-reveal-2">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<button type="button" onclick="table['table-reveal-2'].toggle()">Show More / Show Less</button>
And this is a solution from me on jquery, using the pseudo-classes :visble, which determines the visible tags of the tr, as well as the lt() selector to determine the minimum value of the rows in the table.
Also in my example, the button changes the text depending on the need to hide or show the text:
$('button').text('Show More');
and
$('button').text('Show Less');
$('#trid tr').hide();
$('#trid tr:lt(5)').show();
$('button').text('Show More');
function mostrarRegistros() {
if ($('#trid tr:visible').length <= 5) {
$('#trid tr').show();
$('button').text('Show Less');
} else {
$('#trid tr').hide();
$('#trid tr:lt(5)').show();
$('button').text('Show More');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tbody id="trid">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<br />
<br />
<br />
<button type="button" onclick="mostrarRegistros()"></button>
I am unable to edit the HTML directly in a form and would like to move some things around. I created a very simplified version of what is going on below. So for example, if I would like to move the row with class "comments" to just below the row with class "matching" how could I do this on page load?
I tried doing something like:
$('tr.comments').closest('tr').after($('tr.matching').closest('tr'));
Here is the basic code, thank you for your help!! :)
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
Try with this $('tr.matching').after($('tr.comments'));.
$('tr.matching').after($('tr.comments'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
</table>
$(".matching").after($(".comments"));
Is it possible to make sorting function using only javaScript, without any other library for sorting?
Let's say I have one table, and it's first column that has date values in this format: MM/dd/yyyy. Table has two more columns, like this:
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
<tr>
<td>07/08/2015</td>
<td>Test Name</td>
<td>Raven</td>
</tr>
<tr>
<td>05/04/2015</td>
<td>Test Name 4</td>
<td>Raven 3</td>
</tr>
<tr/>
<td>01/08/2017</td>
<td>Test Name 2</td>
<td>PCT</td>
</tr>
</thead>
</table>
Would it be possible to lets say add one button, and on click event sort rows by values in Date column?
I have to accomplish this using only plain javaScript and HTML, so no jQuery unfortunately :(
Here's a little something I whipped up to give you some ideas. Obviously you could extend this to sort by other data types.
I've "cheated" on the date comparisons by just changing the string format date directly to an eight-digit number in the form 20140312 from "12/03/2014" - note that I've assumed the date input format is dd/mm/yyyy, so if for some reason you're actually using mm/dd/yyyy you'll have to tweak the convertDate() function.
Also I've introduced a <tbody> into your table so that I can just sort the data rows and completely ignore the header row.
function convertDate(d) {
var p = d.split("/");
return +(p[2]+p[1]+p[0]);
}
function sortByDate() {
var tbody = document.querySelector("#results tbody");
// get trs as array for ease of use
var rows = [].slice.call(tbody.querySelectorAll("tr"));
rows.sort(function(a,b) {
return convertDate(a.cells[0].innerHTML) - convertDate(b.cells[0].innerHTML);
});
rows.forEach(function(v) {
tbody.appendChild(v); // note that .appendChild() *moves* elements
});
}
document.querySelector("button").addEventListener("click", sortByDate);
<table id="results" width="360" border="1">
<thead>
<tr>
<th scope="col" width="120">Date Created</th>
<th scope="col" width="120">Name</th>
<th scope="col" width="120">Tests</th>
</tr>
</thead>
<tbody>
<tr>
<td>04/04/2015</td>
<td>Test Name 2</td>
<td>1</td>
</tr>
<tr>
<td>09/08/2017</td>
<td>Test Name 5</td>
<td>2</td>
</tr>
<tr>
<td>07/08/2015</td>
<td>Test Name 4</td>
<td>3</td>
</tr>
<tr>
<td>05/04/2015</td>
<td>Test Name 3</td>
<td>4</td>
</tr>
<tr>
<td>12/08/2017</td>
<td>Test Name 6</td>
<td>5</td>
</tr>
<tr>
<td>21/03/2014</td>
<td>Test Name 1</td>
<td>6</td>
</tr>
</tbody>
</table>
<button>Sort by date</button>
Assuming this table (actually it could have more columns and rows):
<table id="vehicles">
<tr>
<th>Type</th>
<th>Color</th>
<th>Wheels</th>
</tr>
<tr>
<td>Car</td>
<td>Red</td>
<td>4</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Bike</td>
<td>Blue</td>
<td>2</td>
</tr>
<tr>
<td>Car</td>
<td>Blue</td>
<td>4</td>
</tr>
<tr>
<td>Bike</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Red</td>
<td>2</td>
</tr>
</table>
Now my goal is to be able to click on the table data (cells), for example "Car", and then show only the two cars. Another click on "Car" should show the hole table again. Or one click on "Red", and then only the red vehicles (red car and red motorcycle) should be shown. How can this be achieved using jQuery?
$(function () {
$( "td" ).on( "click", function() {
var type = $(this).text();
$('td:first-child').parent('tr:not(:contains('+type+'))').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="vehicles">
<tr>
<th>Type</th>
<th>Color</th>
<th>Wheels</th>
</tr>
<tr>
<td>Car</td>
<td>Red</td>
<td>4</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Bike</td>
<td>Blue</td>
<td>2</td>
</tr>
<tr>
<td>Car</td>
<td>Blue</td>
<td>4</td>
</tr>
<tr>
<td>Bike</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Red</td>
<td>2</td>
</tr>
</table>
Stores the text from current td, hides tr nodes which do not contain the text.
Here's a really really simple test that might help you get started.
$(function () {
$("#vehicles tr td").click(function () {
var desc = $(this).html();
$("#vehicles tr").css("background-color", "white");
$("#vehicles").find(":contains(" + desc + ")").closest("tr").css("background-color", "red");
});
});
This assigns a click event to every TD element, stores its value somewhere and then checks if said value exists in the table, highlighting the elements that are matched. Give it a spin, I think it'll set you off in the right direction.