How do I highlight a table column on selecting a cell [duplicate] - javascript

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>

Related

Content inside table row in react component not aligning with other row after applying overflow hidden with other css styling

In my react component, I have an html table with some css properties. Everything works well presently but the content of the first row is not aligning with other two rows of the table. It goes ahead of other row contents. I was applying overflow hidden and other properties. Here is the link to my codesandbox of what i have
Codesandboxlink
App.js
import "./styles.css";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<table id="customers">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td> <div>
bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj
bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj
bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj
bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj
bvgsbdhbhksbhsbuihbsn nbhbhsbdh, sbhsb shbdhb vbhbjhbsjnbjsnjs k njlnljnljnjnjnb njnjjnjnj
</div>
</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</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>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</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>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</tbody>
</table>
</div>
);
}
Style.css
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td,
#customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(odd) {
background-color: #f2f2f2;
/* height: 20px;
overflow-y: hidden; */
}
#customers tr:hover {
background-color: #ddd;
}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04aa6d;
color: white;
}
tbody tr td {
max-width: 100px;
}
tbody tr td div {
height: 50px;
overflow: hidden;
-webkit-column-width: 150px;
column-width: 150px;
}

Shrink a table to fit columns?

This seems like a pretty basic fix, but I couldn't find anything. I want to be able to shrink a table so it fits its contents. In the picture below the table extends beyond its columns.
Here's what I have:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
max-width: 80%;
background-color: #f4f0ea;
margin: 20px;
}
td, th {
border: 1px solid lightgray;
text-align: left;
padding: 8px;
}
th {
background: #ababab;
position: sticky;
top: 0;
}
<table id='sample1'>
<caption>Sample table 1</caption>
<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>

Horizontal scrolling for some columns in a table?

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>

Table Head not taking full width of page

Hello below you can see my table, however, it does not take the full width of the page, I believe it has something to do with my
<div style={{ overflow: 'auto', height: '250px' }}>
However, I need the table headers to stay within the page and not be allowed to be scrolled down with the table body

This solution works perfectly in chrome. This doesn't work in IE.Refer here for more solutions that work with Javascript and jQuery that works for IE
table thead tr th {
position: -webkit-sticky;
position: sticky;
background-color: white;
z-index: 100;
top:-1px;
}
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
table thead tr th {
background-color: white;
position: sticky;
z-index: 100;
top: -1px;
}
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<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>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>

Unable to assign style to dynamically created columns in table [duplicate]

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.

Categories

Resources