This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I am unable to assign style to a dynamically created column in a table.
On selecting a cell in the table, both the row and column are highlighted.
this however does not work if the element is added later on.
I used delegated binding by using on() but without the desired result.
A search on the internet didn't give me a solution.
Any ideas?
$("td").on("click", function(event) {
var table = 'table'
var styleA = {'-webkit-box-shadow':'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
'-moz-box-shadow':'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)',
'box-shadow':'inset 10px 10px 0px 200px rgba(213, 228, 237, 1)'};
var styleB = {'-webkit-box-shadow':'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
'-moz-box-shadow':'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
'box-shadow':'inset 10px 10px 0px 200px rgba(220, 231, 237, 1)',
'outline':' 3px solid #086aa7'};
$(table).find("td,tr").removeAttr('style');
$(table).find("td").removeAttr('style');
$(this).parent('tr').css(styleA);
$('td:eq(' + this.cellIndex + ')','tr').css(styleA);
$(this).css(styleB);
});
$(document).mouseup(function(e){
var container = $("table");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
$("table").find("tr,td").removeAttr('style');
$("table").find("td").removeAttr('style');
}
});
$(window).on("load", function () {
$( 'table tr th:nth-child(1)').after('<th>');
$( 'table tr td:nth-child(1)').after('<td></td>');
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 500px;
margin: 50px 0 0 50px;
}
td,th {
border: 1px solid #cacaca;
text-align: left;
padding: 8px;
background-color: #f5f5f5;
}
th {
background-color: #dce0e3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus </td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari </td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
Your method is not getting bound to elements created in the future. You need to add a "delegated" binding in your on() binding: source
Do this:
$('table').on('click', $('td'), function() { ... });
where $('table') is a static element in which you add dynamic nodes.
So, you have a table which is hard-coded into the HTML source code:
<table>
...
</table>
and you fill it with dynamic content. The idea is to delegate the events to that table wrapper, instead of binding handlers directly on the dynamic elements.
Related
Within a table I need to 'pin' a column in place and have other other colums horizontally scrollable. Here is a visual example:
I tried using overflow scroll but it appears to do nothing:
.horizontal-scrolling {
display: flex;
width: 500px;
overflow: scroll;
}
.horizontal-scrolling th {
width: 250px;
}
<table>
<thead>
<tr>
<th>First</th>
<span class="horizontal-scrolling">
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
</span>
</tr>
<thead>
</table>
I've modified the w3schools standart table, to where one column sticks to the left. this kind of styling can be applied to a specific column of your table by javascript
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 1000px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
tr th:nth-of-type(1),/*this is where the table column gets its*/
tr td:nth-of-type(1){/*styling to stick to the left and stay ontop of the rest*/
position:sticky;
left: 0;
z-index: 1;
background: white;
width: 150px
}
div {
width: 600px;
overflow: auto;
}
<body>
<h2>HTML Table</h2>
<div>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</div>
</body>
I have html tables,and I would like to click each cells and change it's classes to outpatient
td, th {
border: 5px ;
cursor: pointer;
padding: 2.5px;*/
position: relative;
}
.outpatient {
background-color: rgb(0,255,0);
border: 5px solid aqua;
}
When I tried this class the result is like below.
It seems border is not collapsed and some cells are distorted.
https://gyazo.com/a6e5ef991b345934c070ed77d8949305
I guess it must be inner bordered to it's cells.
How can I fix it?
Thanks
I hope that you will agree with it. Thanks
$(function() {
$("td").click(function() {
$(this).addClass('outpatient');
});
});
td, th {
border:1px solid #ccc;
cursor: pointer;
padding: 2.5px;
position: relative;
text-align:center;
box-sizing:border-box;
}
.outpatient {
background-color: rgb(0,255,0);
outline: 3px solid #546565;
outline-offset: -4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
</table>
You can set to the td, th style box-sizing:border-box and it will make the border to be in the inner width, and not the outer. as I understand, it is what you looking for
set a 5px border for cells and test it now!
td, th {
border:5px solid transparent;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I've been able to follow the following tutorial that allows me to create a filter on 1 table.
https://www.w3schools.com/howto/howto_js_filter_table.asp
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table
I would like to be able to filter multiple tables for the same input.
So:
1 input form
multiple definitions
same filter on all tables
show/hide on all tables if match
Would this be possible?
This might help you. Just add the attribute data-table to all tables. And iterate over them.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
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;
}
.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;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable" class="mytable" data-name="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>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
</table>
<br><br>
<table id="myTable2" class="mytable" data-name="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>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i,alltables;
alltables = document.querySelectorAll("table[data-name=mytable]");
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
alltables.forEach(function(table){
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";
}
}
}
});
}
</script>
</body>
</html>
This question already has answers here:
How to highlight a column in html table on click using js or jquery?
(4 answers)
Closed 5 years ago.
I managed to 'highlight' a cell (td-element) when clicked by the user.
I'd like however the whole column to be heightlighted and the cell itself slightly different.
I can't get the last part done (highlighting the whole column).
all help in this is appreciated.
The desired outcome would be something like below:
function handleBlur(event) {
event.target.contentEditable = false;
}
document.querySelector('body').addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'td') {
event.target.contentEditable = true;
event.target.focus();
event.target.addEventListener("blur", handleBlur);
}
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 500px;
margin: 50px 0 0 50px;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: white;
}
table td[contentEditable=true]{
-webkit-box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
-moz-box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
box-shadow: inset 0px 0px 0px 200px rgba(186,210,225,0.51);
outline: 3px solid #086AA7;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus </td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari </td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
Nowadays you can do this easily without jQuery by using the native DOM apis.
Find the index of the selected cell in the children of it's parent (using cellIndex), then iterate the cols, and change the background of the relevant col in the colgroup:
function handleBlur(event) {
event.target.contentEditable = false;
}
var cols = document.querySelectorAll('col'); // find the cols and cache
document.querySelector('body').addEventListener('click', function(event) {
var t = event.target;
if (t.tagName.toLowerCase() !== 'td') {
return;
}
t.contentEditable = true;
t.focus();
t.addEventListener("blur", handleBlur);
var highlightIndex = t.cellIndex; // the index of the clicked item in the row
cols.forEach(function(col, index) { // iterate the cols
col.style.background = index === highlightIndex ? 'lightblue' : null; // set the background to the clicked col, remove from others
});
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 500px;
margin: 50px 0 0 50px;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
table td[contentEditable=true] {
box-shadow: inset 0px 0px 0px 200px rgba(186, 210, 225, 0.51);
outline: 3px solid #086AA7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<colgroup> <!-- add a colgroup with a col item for each column -->
<col>
<col>
<col>
</colgroup>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus </td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari </td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
I have a simple jquery script to highlight DOM element on hover. But this script failed to highlight the rows of my table, there're no problem with cells.
In my script, I need to be able to select any type of elements, not just tables, so I cant't code a solution based on table selection, like DataTables for example. Any suggestions?
$(document).ready(function() {
$("body").on('mouseover', function(event) {
var highlightTarget = $(event.target);
highlightTarget.addClass("highlight");
}).on('mouseout', function(event) {
$(event.target).removeClass('highlight');
});
});
.highlight {
border: 1px solid green;
background-color: darkseagreen;
z-index: 99999;
}
.main {
border-top: 1px solid #9EBACF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #9EBACF;
border-right: 1px solid #FFFFFF;
}
.cat {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #9EBACF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #9EBACF;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="main" cellspacing="0" cellpadding="4">
<tr>
<td class="cat">data 1</td>
<td class="cat">data 2</td>
</tr>
<tr>
<td class="cat">data 3</td>
<td class="cat">data 4</td>
</tr>
<tr>
<td class="cat">data 5</td>
<td class="cat">data 6</td>
</tr>
</table>
One way of doing this using CSS would be to use the :hover selector.
.hoverable:hover {
background: rgba(150, 150, 150, 0.5);
}
All elements of class .hoverable will be highlighted. Note that in the following example, on hovering the first row, both <tr> and <td> are highlighted. In the second row, only the <td> is highlighted, while in the third row, only the <tr> is highlighted.
.hoverable:hover {
background: rgba(180, 180, 180, 0.5);
}
<table class="main" cellspacing="0" cellpadding="4">
<tr class="hoverable">
<td class="hoverable">data 1</td>
<td class="hoverable">data 2</td>
</tr>
<tr>
<td class="hoverable">data 3</td>
<td class="hoverable">data 4</td>
</tr>
<tr class="hoverable">
<td>data 5</td>
<td>data 6</td>
</tr>
</table>
Logic
Bind mouse events on every element.
Create a map for elements where parent is to be considered.
Now, on hover, just check if map has value for this element type.
If yes, fetch parent selector and navigate to it.
If not, use current element as default element.
Remove class from any other element
Add class to stored element.
Note: step 6 is required because, you will have a div. This div will have a table and on till td, but you just want to access current element and not all.
Sample
$(document).ready(function() {
createHover()
});
function createHover() {
const map = {
"TD": "tr"
}
$(document).on('mouseenter mouseout', '*', function(e) {
var myClass = "highlight"
var parent = map[this.nodeName];
var $this = $(this)
var el = $this;
$('.' + myClass).removeClass(myClass)
if (parent) {
el = $this.closest(parent)
}
el.toggleClass(myClass, $this.is(":hover"))
e.stopPropagation()
})
}
.highlight {
border: 1px solid green;
background-color: darkseagreen;
}
.main {
border-top: 1px solid #9EBACF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #9EBACF;
border-right: 1px solid #FFFFFF;
}
.cat {
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #9EBACF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #9EBACF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<table class="main" cellspacing="0" cellpadding="4">
<tr>
<td class="cat">
<strong>Edge case</strong>
</td>
<td class="cat">data 2</td>
</tr>
<tr>
<td class="cat">data 3</td>
<td class="cat">data 4</td>
</tr>
<tr>
<td class="cat">data 5</td>
<td class="cat">data 6</td>
</tr>
</table>
<ul>
<li>This is a test</li>
</ul>
<p>This is also a test</p>
</body>
you don't need JS for that, simple css hover would do it :
.cat:hover{
border: 1px solid green;
background-color: darkseagreen;
z-index: 99999;
}
you dont need .highlight either