Develop Reference

JQuery Toggle Class 1 toggle per click

I have this great reference here. I'm trying to toggle a class and will affect 1 at a time. But it seems to be not working without using a parent element to click just like in the reference. I want to use only 1 class with a click function and will toggle effect one at a time. Would be this possible?
$(document).ready(function() {
getQuoteButtton();
});
function getQuoteButtton() {
// button quote
$("body").on("click", ".btn-quote", function(e) {
var $this = $(this);
$this.toggleClass('quote-selected');
if ($this.hasClass('quote-selected')) {
$this.text('Selected');
} else {
$this.text('Select This Quote');
}
});
}
.section-block-table {
width: 100%;
margin: 0 auto;
position: relative;
border-collapse: separate;
color: #2E384D;
border-spacing: 0;
}
.btn-quote {
background: #fff;
position: relative;
text-align: center;
color: #49CD96;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 8px 9px;
border-radius: 6px;
border: 1px solid #49CD96;
min-width: 166px;
}
.btn-quote:hover {
background: #49CD96;
color: #fff;
}
.btn-quote.quote-selected {
background: #49CD96;
color: #fff;
}
.btn-quote.quote-selected:before {
content: "\f00c";
font-family: 'Font Awesome 5 Free';
color: #fff;
margin-right: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="section-block-table">
<tr>
<td><button class="btn-quote m-auto">Select This Quote</button></td>
<td><button class="btn-quote m-auto">Select This Quote</button></td>
<td><button class="btn-quote m-auto">Select This Quote</button></td>
</tr>
</table>

It is recommended to delegate. Why do you not want to use the parent element?
Note I added a recommended tbody and gave it an ID
$(function() {
getQuoteButtton()
})
function getQuoteButtton() {
const $tb = $('#tb');
$tb.on('click', '.btn-quote', function(e) {
$this = $(this);
$this
.toggleClass('quote-selected')
.text($this.hasClass('quote-selected') ? 'Selected' : 'Select This Quote');
$('.btn-quote', $tb).not(this)
.removeClass('quote-selected')
.text('Select This Quote');
});
}
.section-block-table {
width: 100%;
margin: 0 auto;
position: relative;
border-collapse: separate;
color: #2E384D;
border-spacing: 0;
}
.btn-quote {
background: #fff;
position: relative;
text-align: center;
color: #49CD96;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 8px 9px;
border-radius: 6px;
border: 1px solid #49CD96;
min-width: 166px;
}
.btn-quote:hover {
background: #49CD96;
color: #fff;
}
.btn-quote.quote-selected {
background: #49CD96;
color: #fff;
}
.btn-quote.quote-selected:before {
content: "\f00c";
font-family: 'Font Awesome 5 Free';
color: #fff;
margin-right: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="section-block-table">
<tbody id="tb">
<tr>
<td><button class="btn-quote m-auto">Select This Quote</button></td>
<td><button class="btn-quote m-auto">Select This Quote</button></td>
<td><button class="btn-quote m-auto">Select This Quote</button></td>
</tr>
</tbody>
</table>

To answer to the OP's question, "it seems to be not working without using a parent element to click just like in the reference", it can be done, like below. What is needed is some logic to remove the selected status from the previously selected button.
The strength of event delegation comes from the fact that it allows to listen to an event on elements created at runtime, as the event will bubble up to the element the listener is attached to. In other words, attaching the listeners directly to the button will work if and only if all the buttons needed during the app lifetime are already present in the dom when the listener is declared.
If that is not the case, as would happen for instance when a button is added by javascript after dom content is loaded, delegating to an ancestor element is the solution.
mplungjan's answer is more robust in general, there can indeed be cases where attaching the listener directly to the element is the way to go.
$(document).ready(function() {
$('button[role=option]').click(toggleSelected)
})
function toggleSelected(event) {
// as we are listening to an event
// event.target is the element that
// was clicked by the user
const $clickedButton = $(event.target)
const $otherButtons = $('button[role=option]').not(event.target)
// we can use 'aria-pressed' accessibility attribute
// to represent the state of the button
const newSelectedState = ! ($clickedButton.attr('aria-pressed') === 'true')
$clickedButton
.attr('aria-pressed', newSelectedState)
.text( newSelectedState
? 'Selected'
: 'Select This Quote'
)
$otherButtons
.attr('aria-pressed', false)
.text('Select This Quote')
}
button{
color: dimgray;
}
button[aria-pressed=true]{
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody>
<tr role="listbox">
<td><button role="option">Select This Quote</button></td>
<td><button role="option">Select This Quote</button></td>
<td><button role="option">Select This Quote</button></td>
</tr>
</tbody>
</table>
A couple of notes:
Be aware of the peculiarity of the keyword this inside javascript functions, as its behavior is dictated by the functional paradigm underlying the language and it can be confusing if compared to how it behaves in other OOP languages.
MDN: this
There are other tags that can represent a list of options directly, namely <select> with a list of nested <option> or <input type=radio>.
In this implementation, adding role tags to the options and to the containing element helps to define the semantic value of the html markup.
Accessible Rich Internet Applications
To represent the state of the button the attribute aria-pressed can be used. Again, when possible, it is advisable to use semantically significant tags.
MDN: ARIA state information
In this example no css class is needed.

How to highlight texts on table when searching?

I have a table and a search bar that can search contents from the table. It's working perfectly and only shows the rows that matches the text inputted.
What I want to add is, to highlight the text inputted.
I followed the codes specified here: https://www.w3schools.com/howto/howto_js_filter_table.asp
HTML:
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<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>
</table>
CSS:
#myInput {
background-image: url('/css/searchicon.png'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#myTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 18px; /* Increase font-size */
}
#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
JAVASCRIPT:
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
It's working but I wanted to highlight the texts found.
Like This Sample:
http://prntscr.com/pc20vp
I don't want to change too much in my code. I hope there's something I can add.

As long as there is just text inside the td this should work. I adapted this answer to your code, making the highlighting change and/or disappear appropriately as the search term changes. Read comments in the code for details. Run the snippet to test.
myFunction = function() {
// Declare variables
var input, filter, table, tr, td, i, txtValue, index;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
// first clear any previously marked text
// this strips out the <mark> tags leaving text (actually all tags)
td.innerHTML = txtValue;
index = txtValue.toUpperCase().indexOf(filter);
if (index > -1) {
// using substring with index and filter.length
// nest the matched string inside a <mark> tag
td.innerHTML = txtValue.substring(0, index) + "<mark>" + txtValue.substring(index, index + filter.length) + "</mark>" + txtValue.substring(index + filter.length);
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
#myInput {
background-image: url('/css/searchicon.png');
/* Add a search icon to input */
background-position: 10px 12px;
/* Position the search icon */
background-repeat: no-repeat;
/* Do not repeat the icon image */
width: 100%;
/* Full-width */
font-size: 16px;
/* Increase font-size */
padding: 12px 20px 12px 40px;
/* Add some padding */
border: 1px solid #ddd;
/* Add a grey border */
margin-bottom: 12px;
/* Add some space below the input */
}
#myTable {
border-collapse: collapse;
/* Collapse borders */
width: 100%;
/* Full-width */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
}
#myTable th,
#myTable td {
text-align: left;
/* Left-align text */
padding: 12px;
/* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<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>
</table>

Crosshair highlight for table on hover

I have the code below that works perfect for crosshair function. This is fine, however wondering if there is a way to stop the highlight beyond the cursor (hover).
For example, instead of a "cross" shape highlight you end up with a backward "L" shape highlight. So instead of highlighting the whole row & column it only highlights column 3 down to row 2 and row 2 only to column 3. No extended highlight. Hope that makes sense?
Here is my css code:
table {
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
.permissions table,
th,
td {
border: 2px solid #ccc;
width:90px;
height:90px;
text-align:center;
vertical-align:middle;
font-size:13px;
}
td, th, .row, .col, .ff-fix {
cursor: pointer;
position: relative;
}
tr, col {
border: 1px solid black;
}
td:hover {
background-color:red;
}
td:hover:first-child {
background-color:red;
}
td:hover:nth-child(3n) {
background-color:red;
}
tr:last-child td:hover {
background-color:red;
}
td:hover::before,
.row:hover::before,
.ff-fix:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after,
.col:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
Here is my html code:
<table>
<col /><col /><col />
<tr>
<th class="col">First Name</th>
<th class="col">Middle Name</th>
<th class="col">Last Name</th>
</tr>
<tr>
<td>Peter</td>
<td>Jeffery</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Marie</td>
<td>Griffin</td>
</tr>
<tr>
<td>Margie</td>
<td>Ann</td>
<td>Thatcher</td>
</tr>
</table>

Following the logic of your CSS, you apply a full-width ::before and a full-height ::after which are displayed over the table. To adjust how these are displayed (a cross vs a "backward L"), adjust the corresponding horizontal and vertical positioning.
Try replacing your td:hover::before and td:hover::after selectors with the following to display the highlighting as a "backward L". Note the positioning is set using right and bottom rule sets, as opposed to your original positioning using left and top.
td:hover::before,
.row:hover::before,
.ff-fix:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
right: 90px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after,
.col:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
bottom: 90px;
width: 100%;
z-index: -1;
}
See how it looks in this JSFiddle.

I know this is old, but here's a method using Javascript. I prefer this method because it allows for custom backgrounds, and doesn't require CSS workarounds.
HTML:
<table id="hoverTable">
<thead>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</thead>
<tbody>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
<tr>
<td>Item</td>
<td>Item</td>
<td>Item</td>
<td>Item</td>
</tr>
</tbody>
</table>
SCSS:
body {
background:grey;
}
.hoverHighlight {
background-color:yellow !important;
cursor:default;
}
#hoverTable {
font-family:arial;
border-spacing:0;
border-collapse: collapse;
th, td {
border:2px solid black;
text-align:center;
padding:5px;
margin:0;
}
th {
background:#1167b1;
color:white;
}
td {
text-align:center;
background:#d0efff;
}
}
Javascript:
window.addEventListener('load', function () {
addHoverEventsAndClasses();
})
function toggleHighlight(element, trueOrFalse) {
const currentRow = returnCurRow(element);
const index = element.currentTarget.cellIndex;
const table = document.getElementById('hoverTable').rows;
for (var i = 0; i < table.length; i++) {
const data = table[i];
const cells = data.querySelectorAll(".cell");
if(data.rowIndex === currentRow) {
cells.forEach((td) => {
trueOrFalse ? td.classList.add("hoverHighlight") : td.classList.remove("hoverHighlight");
});
}
cells.forEach((cell) => {
if(cell.cellIndex === index) {
trueOrFalse ? cell.classList.add("hoverHighlight") : cell.classList.remove("hoverHighlight");
}
});
}
};
function addHoverEventsAndClasses() {
const mainTableTDs = document.querySelectorAll("#hoverTable td");
const mainTableTRs = document.querySelectorAll("#hoverTable tr");
//Dynamically add class names to each row and cell to target
addClass(mainTableTDs, "cell");
addClass(mainTableTRs, "row");
mainTableTDs.forEach((td) => {
td.addEventListener("mouseenter", highlightCol);
td.addEventListener("mouseleave", removeHighlightCol);
});
}
//Helper function for adding highlight classes
function addClass(el, cl) {
el.forEach((child) => {
child.classList.add(cl);
});
};
//Toggle highlight functions. Did it this way so multiple arguments could be passed
function highlightCol(e) {
toggleHighlight(e, true);
}
function removeHighlightCol(e) {
toggleHighlight(e, false);
}
//Grab the current row
const returnCurRow = (e) => {
return e.currentTarget.parentElement.rowIndex;
}

How to open a dialog box on click of a dynamic cell value using jquery

I have an HTML table:
<tbody>
<tr>
<td> <ul id="element"></td>
</tr>
</tbody>
The values in the table are passed from the database using jquery:
element += '<li>' + valueOfElement.ELEMENTNAME + '</li>'
I want to show some information related to the element name in a dialog box when user clicks the element name. I am new to JavaScript so I don't know how to make a dynamic value clickable and how to open a dialog box on click of the element.

You can add an anchor tag around your element.
element += "<li><a href='javascript:void(0)' onclick='myDialogFunction()'>" + valueOfElement.ELEMENTNAME + "</a></li>";
To answer your styling question, just add this CSS rule to affect all anchor tags
a {
text-decoration: none;
color: #000;
}
or you can assign your links a class
<html>
<a class='mystyledlink' />
</html>
<style>
.mystyledlink {
text-decoration: none;
color: #000;
}
</style>

Using jquery you can bind a click event to the elements that will show the dialog box. Without seeing your dialog box or what all that entails I can't really include it but you could do something like this.
$('tbody').on('click','li',function(){
var value = $(this).text();
//do something with value and show dialog box
})

This approach is in vanilla JavaScript. You could try something like this: Make use of addEventListener to listen for click events on all your clickable cells. You could make use of document.querySelectorAll like I did to access all cells.
var tdGroup = document.querySelectorAll( 'td' ),
i;
for( i = 0; i < tdGroup.length; i++ ){
tdGroup[ i ].addEventListener( 'click', messages )
}
function messages(){
alert( 'you clicked' + this.textContent );
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
}
html {
font-family: sans-serif;
overflow: hidden;
}
body {
display: flex;
}
table {
margin: auto;
border-collapse: collapse;
position: relative;
top: 2rem;
}
th {
text-transform: uppercase;
}
th,
td {
padding: 1rem;
border: 1px #000 solid;
text-align: center;
transition-property: background;
transition-duration: 1s;
}
td:hover {
cursor: pointer;
background-color: #eee;
color: #333;
}
td:active {
background-color: #ddd;
color: #444;
transition-duration: 0.25s;
}
p {
width: 100%;
padding: 1rem;
text-align: center;
background-color: #000;
color: #eee;
position: absolute;
top: 0;
left: 0;
}
<p>Click a secondary item of the table for more information</p>
<table>
<tr>
<th>
Technology Field
</th>
<th>
Language
</th>
<th>
Resources
</th>
<th>
Related technologies
</th>
</tr>
<tr>
<td id="front-end">
Front End
</td>
<td id="javaScript">
JavaScript
</td>
<td id="stack">
StackOverflow
</td>
<td id="hcs">
HTML, CSS, SASS
</td>
</tr>
</table>

Jquery/TinySort Shifting Entire DIV Container

I am trying to setup a very simple way to sort content. I found TinySort and it seems to be able to do the job, however I need the sorting to move the entire container div not just rearrange the content.
Essentially, I have set up links to activate the sorting function and they are working to sort the spans I have it looking for, however it moves the spans around within the divs containing them.
I built a simply JSFIDDLE to display my struggle.
https://jsfiddle.net/og6jfLjf/
When you sort by Price the prices move and are in order, however they didn't pull the containers with them. They just moved within each container.
$(document).ready(function() {
$(".price-sort").click(function () {
tinysort("span.price");
});
$(".title-sort").click(function () {
tinysort("span.title");
});
});
div{
width: 100px;
height:100px;
background-color: #000;
color: #fff;
margin:10px;
}
#div1{
background-color:#666;
}
#div4{
background-color:#aaa;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.2/tinysort.js"></script>
<div id="div4"><span class="title">Title 1</span> - $<span class="price">5</span></div>
<div id="div1"><span class="title">Title 3</span> - $<span class="price">4</span></div>
<div id="div2"><span class="title">Title 2</span> - $<span class="price">6</span></div>
Sort By Price |
Sort By Title |

Solved the problem. I wasn't telling the function to include the div. So I adjusted the script to sort the divs based on the span within them. Here is a working JSFIDDLE to show it.
https://jsfiddle.net/oym96zL5/
$(document).ready(function() {
$(".price-sort").click(function () {
tinysort('div','span.price');
});
$(".title-sort").click(function () {
tinysort('div','span.title');
});
});

You can make a table, it's easier if you have a lot of data. Click the "Item" header and the "Price" header to sort the rows.
$(document).ready(function() {
var table = document.getElementById('xtable'),
tableHead = table.querySelector('thead'),
tableHeaders = tableHead.querySelectorAll('th'),
tableBody = table.querySelector('tbody');
tableHead.addEventListener('click', function(e) {
var tableHeader = e.target,
textContent = tableHeader.textContent,
tableHeaderIndex, isAscending, order;
if (textContent !== 'add row') {
while (tableHeader.nodeName !== 'TH') {
tableHeader = tableHeader.parentNode;
}
tableHeaderIndex = Array.prototype.indexOf.call(tableHeaders, tableHeader);
isAscending = tableHeader.getAttribute('data-order') === 'asc';
order = isAscending ? 'desc' : 'asc';
tableHeader.setAttribute('data-order', order);
tinysort(tableBody.querySelectorAll('tr'), {
selector: 'td:nth-child(' + (tableHeaderIndex + 1) + ')',
order: order
});
}
});
});
table.blue {
padding: 0;
box-shadow: 0 1px 9px 1px #ccc;
border-radius: 6px;
margin: 20px auto;
}
.blue th {
color: #FFF;
background: #2C7EDB;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.blue tr:nth-child(odd) {
background-color: #333;
color: #FFF;
}
.blue tr:nth-child(even) {
background-color: #D3E9FF;
color: #333;
}
.blue td {
border-style: solid;
border-width: 1px;
border-color: #264D73;
padding: 5px;
text-align: left;
vertical-align: top;
}
.blue thead th:first-child {
border-top-left-radius: 6px;
}
.blue thead th:last-child {
border-top-right-radius: 6px;
}
.blue tbody tr:last-child th:first-child {
border-bottom-left-radius: 6px;
}
.blue tbody tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
.blue tbody tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.2/tinysort.js"></script>
<table class="blue" id="xtable">
<thead>
<tr>
<th data-order="asc">
<a>Item
</a>
</th>
<th>Qty
</th>
<th data-order="asc"><a>Price</a> </th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr> <td> Porche </td><td>1</td> <td> $100, 000.00 </td><td>Sports car</td> </tr>
<tr><td>Toilet Paper</td> <td> 5 </td><td>$50.00</td> <td> 8 rolls </td></tr>
<tr> <td> Laptop </td><td>1</td> <td> $600.00 </td><td>HP i7 12GB 1TB</td> </tr>
</tbody>
</table>