The code basically edit a table cell.
I want to use the not() method so that everytime I click outside the temporary input created I replace it with a table cell. I guess the code run in a block and doesn't detect any input with an id of "replace" so how can I fix that ?
Also I want to store the element (th or td) that fire the first event(dblclick) so that I can use it to replace the input with the right type of cell but it seems to only stores the element that first triggers the event and I don't really understand why.
Full code here
$(function () {
$(document).on("dblclick", "th, td", function (event) {
var cellText = $(this).text();
$(this).replaceWith("<input type='text' id='replace' value='" + cellText + "'>");
var $typeCell = $(event.currentTarget); // Store element which trigger the event
$("body").not("#replace").on("click", function () { // .not() method
cellText = $("#replace").val();
if ($typeCell.is("th")) {
$("#replace").replaceWith("<th scope='col'>" + cellText + "</th>");
}
else {
$("#replace").replaceWith("<td>" + cellText + "</td>");
}
});
});
});
I have modified HTML and JavaScript to avoid any possible errors. The correct practice is to wrap all th's in a thead and all td's in tbody.
$(document).on("dblclick", "th, td", function(event) {
var cellText = $(this).text();
$(this).replaceWith("<input type='text' id='replace' value='" + cellText + "'>");
});
$("body").on("click", function() {
if (event.target.id != 'replace' && $('#replace').length != 0) {
var cellText = $("#replace").val();
if ($('#replace').parents().is('thead'))
$("#replace").replaceWith("<th scope='col'>" + cellText + "</th>");
else
$("#replace").replaceWith("<td>" + cellText + "</td>");
}
});
table {
border-collapse: collapse;
margin: 20px;
min-width: 100px;
}
table,
th,
td {
border: 1px solid grey;
padding: 4px;
}
th {
background: springgreen;
}
tr:nth-child(odd) {
background: rgba(0, 255, 127, 0.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table>
<thead>
<tr>
<th scope="col">Uno</th>
<th scope="col">Dos</th>
<th scope="col">Tres</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
<tr>
<td>Data4</td>
<td>Data5</td>
<td>Data6</td>
</tr>
</tbody>
</table>
</div>
Related
I have a table that is filled dynamically with a csv file. I created a table that inside itself has dropdowns in some columns.
What I want to do now is to check if a value exists in the cell where the dropdown is supposed to be, if so to check if it exists in the dropdownlist if yes then set this as selected in dropdown list otherwise selected is at default value and the cell gets red margine around.
Here is a jsFiddle with an example as how my code currently looks like:
https://jsfiddle.net/r236uy5k/
EDIT : I corrected my jsfiddle:
https://jsfiddle.net/kcau7jhd/
$(function(){
var firstDDM = ['aaa','bbb','ccc','ddd'];
var firstshortcut = ['a','b','c','d'];
var option = "",
select = "";
for(var i=0; i<firstDDM.length;i++){
option += '<option value="'+ firstshortcut[i] + '">' + firstDDM[i] + '</option>';
}
select = '<select class="firstDDM" type="firstDDM">' + option + '</select>';
$("tr").each(function() {
$(this).find("td:eq(3)").append(select);
});
});
$(function(){
var secondDDM = ['Default','AAA','BBB','B1','C'];
var secondshortcut = ['Default','a','b','b1','c'];
var option = "",
select = "";
for(var i=0; i<secondDDM.length;i++){
option += '<option value="'+ secondshortcut[i] + '">' + secondDDM[i] + '</option>';
}
select = '<select class="secondDDM" type="secondDDM">' + option + '</select>';
$("tr").each(function() {
$(this).find("td:eq(5)").append(select);
});
});
$("#addRow").click(function(){
$("#my_id").each(function(){
var tds='<tr>';
jQuery.each($('tr:last th', this), function(){
tds += '<th>' +'<input type="checkbox" name="record" tittle="Delete this row"></input>' + '</th>';
});
jQuery.each($('tr:last td', this), function(){
if($('select',this).length){
tds+= '<td>' + $(this).html() + '</td>';
}else{
tds+= '<td></td>';
}
});
tds+= '</tr>';
$('tbody',this).append(tds);
$('#my_id tbody tr:last').attr("contentEditable", true);
});
});
//for the columns that need to be imported with dropdowns create editable option - temporarlly
$(function() {
$("tr").each(function() {
$(this).find("td:eq(3), td:eq(4),td:eq(5)").attr("contentEditable", true);
});
});
//Find and remove selected table rows
$('#delete-row').click(function(){
var r = confirm('Are you sure you want to delete them all?');
$("tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
if(r == true){
$(this).parents("tr").remove();
}else{
return false;
}
}
});
});
table {
border-collapse: collapse;
border: 1px black solid;
font: 12px sans-serif;
width: 100%;
table-layout:auto;
}
td {
border: 1px black solid;
text-align: left;
padding: 2px;
}
thead:hover{
text-decoration: none !important;
}
thead tr:first-child{
color:white;
text-align: center;
background-color: #5bc0de;
padding: 10px;
}
tr:nth-child(even){
background-color: #f2f2f2
}
tr:hover{
background-color: #5bc0de;
}
button{
display: inline;
padding: 50px;
}
input button{
display: inline;
}
.dropbtn{
background-color: blue;
}
.table-responsive {
overflow-y: auto;
height: 800px;
}
.table-responsive table {
border-collapse: collapse;
width: 100%;
}
.table-responsive thead th{
position: sticky;
top: 0;
background-color: #5bc0de;
padding: 2px;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
.myButtons{
display: inline;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Filtered CSV File</title>
</head>
<body>
<h1>
Filtered CSV FIle
</h1>
<br/>
<br/>
<div class="myButtons">
<input type="button" value="Add new row" class="btn btn-info" id="addRow">
<input type="button" value="Delete rows" id="delete-row" class="btn btn-info">
</div>
<br/>
<div class="table-responsive">
<table class="dataframe my_class" id="my_id">
<thead>
<tr style="text-align:right;">
<th> </th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
<th>col7</th>
<th>col8</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td></td>
<td>row1</td>
<td>B1</td>
<td>row1</td>
<td>row1</td>
</tr>
<tr>
<th>2</th>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td></td>
<td>row2</td>
<td>AAA</td>
<td>row2</td>
<td>row2</td>
</tr>
<tr>
<th>3</th>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td></td>
<td>row3</td>
<td>C</td>
<td>row3</td>
<td>row3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You can edit the select text you are entering. Following are the things which I think you want to achieve:
Identify if the dropdown has a certain value and preselect them if possible.
If the dropdown does not have correct value for pre selection then mark them as error field.
If the above mentioned points are incorrect please let me know i will make the relevant changes which are required.
I have added a condition check if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML) you can replace it with any condition that you want.
Replace the following jquery snippets
$("tr").each(function () {
var option = "",
select = "",
classObject = '',
isSelected = false;
if($(this).find("td:eq(3)")[0]){
for (var i = 0; i < firstDDM.length; i++) {
if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML) {
option += '<option selected="selected" value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
isSelected = true;
}
else
option += '<option value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
}
classObject = !isSelected ? 'errorDropDown' : '';
select = '<select class="firstDDM' + ' ' + classObject + '" type="firstDDM">' + option + '</select>'
$(this).find("td:eq(3)").append(select);
}
});
Add this class to the css file:
.errorDropDown {border: 1px solid red;}
I have a HTML table in which there are child rows , I want to make those child rows column clickable to perform particular action.
I have parent rows and when I click on those rows, child rows are being shown, in which there is a column col2 , on which when I click it should perform some action for each child rows column.
I want col2 of child row to be clickable to show some more information using JavaScript and HTML. I don't know, but on click function(onclick('col2')) something like that can be helpfull or not??
var $container = $("#container");
var $row = $("#container table tbody tr");
// Loop through items in JSON data..
var $button = $("<button>" + 'abc' + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>col1</th><th>col2</th></tr>"));
// Button click handler..
$button.on("click", function() {
for (var i = 0; i < 2; i++) {
// Replace row HTML..
//parent row
var row = $('<tr class="parent_row" ><td>' + 'data' + '</td>' + +'<td>' + "" + '</td></tr>');
table.append(row);
for (var j = 0; j < 2; j++) {
//child row
var row = $('<tr style="display: none"><td>' + "" + '</td>' + '<td>' + 'data' + '</td></tr>');
table.append(row);
}
}
$("#table").html(table);
$('.parent_row').click(function() {
$(this).nextUntil(".parent_row").toggle();
})
// Show table if it's not already visible..
});
table {
margin-top: 20px;
border: 1px solid silver;
width: 500px;
}
th {
text-align: left;
}
button {
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="table">
</div>
</div>
To catch clicks on any column in a table, simply add a click listener to all cells in that column:
const column2cells = document.querySelectorAll('#table tr>*:nth-child(2)');
for (const cell of column2cells) {
cell.addEventListener('click', function(event) {
console.log(`You clicked cell [${cell.cellIndex}, ${cell.parentElement.rowIndex}] with content "${cell.textContent}"`);
})
}
<table id="table">
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
As a note for the logging output: Remember cellIndex and rowIndex start at 0, not at 1.
var $container = $("#container");
var $row = $("#container table tbody tr");
// Loop through items in JSON data..
var $button = $("<button>" + 'abc' + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>col1</th><th>col2</th></tr>"));
// Button click handler..
$button.on("click", function() {
for (var i = 0; i < 2; i++) {
// Replace row HTML..
//parent row
var row = $('<tr class="parent_row" ><td>' + 'data' + '</td>' + +'<td>' + "" + '</td></tr>');
table.append(row);
for (var j = 0; j < 2; j++) {
//child row
var row = $('<tr style="display: none"><td>' + "" + '</td></tr>');
$('<td>data</td>')
.on('click', function() { alert('some action') })
.appendTo(row);
table.append(row);
}
}
$("#table").html(table);
$('.parent_row').click(function() {
$(this).nextUntil(".parent_row").toggle();
})
// Show table if it's not already visible..
});
table {
margin-top: 20px;
border: 1px solid silver;
width: 500px;
}
th {
text-align: left;
}
button {
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="table">
</div>
</div>
You could give a specific class name to each <td> in col2 when you are creating them, and then using a regular onclick event based on that class name.
So:
var row = $('<tr class="parent_row" ><td>' + 'data' + '</td>' + +'<td class="col2">' + "" + '</td></tr>');
And then:
$(".col2").on("click", function() {
//whatever you want to do here
});
I want to append rows to the table one by one, not all at once. Problem i'm facing is, no. of rows is very large, say 10,000. It append all the rows at once after loop terminates. I want it to work like, with each iteration, it should append the row to the table.
$(document).ready(function(){
for(var i=0;i<1000;i++){
var name = "name "+i;
var email = "email"+i+"#vvv.com";
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
//$("table tbody").append(markup);
//$("tbody").parent("table").append(markup);
$("tbody").after(markup);
}
});
table{
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td>Name</td>
<td>email#vvv.com</td>
</tr>
</tbody>
</table>
I see what you are trying to do. You may try to use setTimeout to achieve this. You are trying to loop an array but in your code you are just generating new rows. So I tried to implement your code into this solution. If you are trying to loop an array you need to modify this.
$(document).ready(function(){
appendOneByOne(1000)
});
function appendOneByOne(i){
if(i !== 0){
setTimeout(function(){
var name = "name "+i;
var email = "email"+i+"#vvv.com";
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
$("tbody").after(markup);
appendOneByOne(--i)
});
}
}
You can also use window.requestAnimationFrame(); but take care for cross-browser issues.
I have a table that I add columns to it on the fly. Each column has an [X] icon on the top, when a user clicks on it, I need to delete the entire column.
I created a Fiddler page to show you what I have done.
As you can see I have [X] icon on the top and when I click it, it is deleting the 3rd column in the table because I am specifying a fixed column i.e. 3. But I need to be able to remove the current column not the 3rd column.
How can I determine what is the current column and delete every tr with in the table matching the correct position?
Could try something like this:
$('.removeMe').click(function() {
var indexToRemove = $(this).index();
$(".defaultTable tbody tr").each(function() {
$(this).find("td:eq("+indexToRemove+")").remove();
});
});
Edit:
Here's a fiddle which will remove them, the headers, and any dynamically-created columns as well. It uses jQuery's .on() method with delegated events so that even elements which are created dynamically will have this event listener added to them. .click() is a direct binding and will only bind it to elements which already exist so newly-created elements won't have the event listeners binded to them.
Fiddle: http://jsfiddle.net/stevenelberger/dsL31yek/
You may use https://api.jquery.com/nth-child-selector/:
$('#testTable1').on('click', '.removeMe', function () {
$(".defaultTable thead tr th:nth-child(" + ($(this).index() + 1) + ")").remove();
$(".defaultTable tbody tr td:nth-child(" + ($(this).index() + 1) + ")").remove();
});
Snippet:
$(document).ready(function () {
$('.defaultTable').dragtable();
$('#test1').click(function () {
$("#testTable1 > thead > tr").each(function () {
$(this).append('<th>New Column</th>');
});
$("#testTable1 > tbody > tr").each(function (i, e) {
if (i == 0) {
$(this).append('<td class="removeMe">[X]</td>');
} else {
$(this).append('<td>New cell in the column</td>');
}
});
$('.defaultTable').removeData().dragtable();
});
$('#testTable1').on('click', '.removeMe', function () {
$(".defaultTable thead tr th:nth-child(" + ($(this).index() + 1) + ")").remove();
$(".defaultTable tbody tr td:nth-child(" + ($(this).index() + 1) + ")").remove();
});
$('.defaultTable').removeData().dragtable();
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://akottr.github.io/css/akottr.css" rel="stylesheet"/>
<link href="http://akottr.github.io/css/reset.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="//rawgithub.com/akottr/dragtable/master/dragtable.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//rawgithub.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<!-- only for jquery.chili-2.2.js -->
<script src="//code.jquery.com/jquery-migrate-1.1.1.js"></script>
<script type="text/javascript" src="//akottr.github.io/js/jquery.chili-2.2.js"></script>
<div class="sample">
<button type="button" id="test1">Add column</button>
<div class="demo">
<h4>demo</h4>
<div class="demo-content">
<table class="defaultTable sar-table" id="testTable1">
<thead>
<tr>
<th>TIME</th>
<th>%user</th>
<th>%nice</th>
<th>%system</th>
<th>%iowait</th>
<th>%idle</th>
</tr>
</thead>
<tbody>
<tr>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
<td class="removeMe">[X]</td>
</tr>
<tr>
<td>12:10:01 AM</td>
<td>28.86</td>
<td>0.04</td>
<td>1.65</td>
<td>0.08</td>
<td>69.36</td>
</tr>
<tr>
<td>12:20:01 AM</td>
<td>26.54</td>
<td>0.00</td>
<td>1.64</td>
<td>0.08</td>
<td>71.74</td>
</tr>
<tr>
<td>12:30:01 AM</td>
<td>29.73</td>
<td>0.00</td>
<td>1.66</td>
<td>0.09</td>
<td>68.52</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
var index = $(this).index();
$(".defaultTable tr").each(function() {
//remove body
$(this).find("td:eq("+index+")").remove();
//and head
$(this).find("th:eq("+index+")").remove();
});
DEMO
You could try by getting column number from table
$('.removeMe').click(function(){
var colNum = $(this).parent().children().index($(this));// getting the column number
console.log(colNum);
$(".defaultTable tbody tr").each(function() {
$(this).find("td:eq("+colNum+")").remove();
});
});
Adding mine in with the lot of answers:
Working Example:
http://jsfiddle.net/Twisty/h0asbe6o/
jQuery
function removeColumn(n, o) {
o = (o != "undefined") ? o : $("#testTable1");
console.log("Removing Column '" + o.find("thead tr th:eq(" + n + ")").text() + "' (" + n + ") from " + o.attr("id"));
o.find("tr").each(function(k, e) {
$(e).find("th:eq(" + n + ")").empty().remove();
$(e).find("td:eq(" + n + ")").empty().remove();
});
return true;
}
Also you'd want to fix a few creation issues:
$(document).ready(function() {
$('.defaultTable').dragtable();
$('#test1').click(function() {
$("#testTable1 > thead > tr").append('<th>New Column</th>');
$("#testTable1 > tbody > tr").each(function(key, el) {
if (key == 0) {
var rm = $("<span>", {
class: "removeMe"
})
.html("[X]")
.click(function() {
removeColumn($(this).index());
$(this).remove();
});
rm.appendTo(el);
} else {
$(el).append('<td>New cell in the column</td>');
}
});
$('.defaultTable').removeData().dragtable();
});
$('.removeMe').on("click", function() {
removeColumn($(this).index());
$('.defaultTable').removeData().dragtable();
});
});
This will create new columns properly and allow you to delete either static or dynamically created elements.
EDIT
If you felt like improving the UI, you could do something like this:
http://jsfiddle.net/Twisty/h0asbe6o/4/
HTML
<div class="sample">
<button type="button" id="test1">Add column</button>
<div class="demo">
<h4>demo</h4>
<div class="demo-content">
<table class="defaultTable sar-table" id="testTable1">
<thead>
<tr>
<th><span class="cTitle handle">TIME</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%user</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%nice</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%system</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%iowait</span><span class="removeMe">[x]</span></th>
<th><span class="cTitle handle">%idle</span><span class="removeMe">[x]</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>12:10:01 AM</td>
<td>28.86</td>
<td>0.04</td>
<td>1.65</td>
<td>0.08</td>
<td>69.36</td>
</tr>
<tr>
<td>12:20:01 AM</td>
<td>26.54</td>
<td>0.00</td>
<td>1.64</td>
<td>0.08</td>
<td>71.74</td>
</tr>
<tr>
<td>12:30:01 AM</td>
<td>29.73</td>
<td>0.00</td>
<td>1.66</td>
<td>0.09</td>
<td>68.52</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS
.removeMe {
font-size: .65em;
float: right;
cursor: pointer;
margin-top: -0.5em;
color: #aaa;
}
.removeMe:hover {
color: #222;
}
jQuery
function removeColumn(n, o) {
o = (o != "undefined") ? o : $("#testTable1");
o.find("tr").each(function(k, e) {
if (k == 0) {
$(e).find("th").eq(n).hide("slow").remove();
} else {
$(e).find("td").eq(n).hide("slow").remove();;
}
});
return true;
}
var dragOptions = {
dragHandle: '.handle'
};
$(document).ready(function() {
$('.defaultTable').dragtable(dragOptions);
$('#test1').click(function() {
var head = $("<th>").html("<span class='cTitle handle'>New Column</span>");
var rm = $("<span>", {
class: "removeMe"
})
.html("[X]")
.click(function() {
removeColumn($(this).parent().index());
$(this).remove();
});
rm.appendTo(head);
head.appendTo("#testTable1 > thead > tr");
$("#testTable1 > tbody > tr").each(function(key, el) {
$(el).append('<td>New Cell</td>');
});
$('.defaultTable').removeData().dragtable(dragOptions);
});
$('.removeMe').on("click", function() {
removeColumn($(this).parent().index());
$('.defaultTable').removeData().dragtable(dragOptions);
});
});
I have this table:
<table border="1">
<tr>
<td></td>
<td>Banana</td>
<td>Orange</td>
<td>Plum</td>
</tr>
<tr>
<td>Banana</td>
<td>1:1</td>
<td>1:2</td>
<td>1:3</td>
</tr>
<tr>
<td>Orange</td>
<td>2:1</td>
<td>1:1</td>
<td>1,5:1</td>
</tr>
<tr>
<td>Plum</td>
<td>1:3</td>
<td>2:1</td>
<td>1:1</td>
</tr>
and CSS:
td {
height:60px;
width:60px;
text-align:center;
}
td:hover{
background-color:red;
}
What I want to do, is when I for example point my mouse on 1:3 table cell, it should highlight together with Banana and Plum cells.
Any easy way to do it?
Here's fiddle:
http://jsfiddle.net/CZEJT/
If you dont mind a bit of Javascript in there to ensure compatibility, take a look at this JSFiddle
HTML:
<table>
<tr>
<th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
</tr>
<tr>
<th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>
<tr>
<th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>
<tr>
<th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>
<tr>
<th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>
CSS:
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th, .ff-fix {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
tr:hover{
background-color: #ffa;
}
}
JS:
function firefoxFix() {
if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {
var tds = document.getElementsByTagName( 'td' );
for( var index = 0; index < tds.length; index++ ) {
tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';
};
var style = '<style>'
+ 'td { padding: 0 !important; }'
+ 'td:hover::before, td:hover::after { background-color: transparent !important; }'
+ '</style>';
document.head.insertAdjacentHTML( 'beforeEnd', style );
};
};
firefoxFix();
below is an example from one of my sites (css):
/*when hover over shape 5 dim shape 5*/
#shape5{
opacity:1.0;
filter:alpha(opacity=100);}
#shape5:hover{
opacity:0.4;
filter:alpha(opacity=40);}
/*When hoverover text5 dim shape 5!*/
#text5:hover + #shape5{opacity:0.4;
filter:alpha(opacity=40);}
Hope that helps!!
Oh Also view: How to affect other elements when a div is hovered
would you like something like this?
unfortunately it would be necessary some javascript
HTML
<table border="1">
<tr>
<td></td>
<td id='1'>Banana</td>
<td id='2'>Orange</td>
<td id='3'>Plum</td>
</tr>
<tr>
<td>Banana</td>
<td class='o1'>1:1</td>
<td class='o2'>1:2</td>
<td class='o3'>1:3</td>
</tr>
<tr>
<td>Orange</td>
<td class='o1'>2:1</td>
<td class='o2'>1:1</td>
<td class='o3'>1,5:1</td>
</tr>
<tr>
<td>Plum</td>
<td class='o1'>1:3</td>
<td class='o2'>2:1</td>
<td class='o3'>1:1</td>
</tr>
</table>
JAVASCRIPT
var cells1 = $('.o1');
cells1.on('mouseover', function(){
$($(this).parent().children()[0]).css({background: '#ddd'})
$('#1').css({background: '#ddd'})
})
cells1.on('mouseout', function(){
$($(this).parent().children()[0]).css({background: 'none'})
$('#1').css({background: 'none'})
})
var cells2 = $('.o2');
cells2.on('mouseover', function(){
$($(this).parent().children()[0]).css({background: '#ddd'})
$('#2').css({background: '#ddd'})
})
cells2.on('mouseout', function(){
$($(this).parent().children()[0]).css({background: 'none'})
$('#2').css({background: 'none'})
})
var cells3 = $('.o3');
cells3.on('mouseover', function(){
$($(this).parent().children()[0]).css({background: '#ddd'})
$('#3').css({background: '#ddd'})
})
cells3.on('mouseout', function(){
$($(this).parent().children()[0]).css({background: 'none'})
$('#3').css({background: 'none'})
})
CSS
td {
height:60px;
width:60px;
text-align:center;
}
td:hover{
background-color:red;
}
Try this:
Fiddle
Without changing your html structure or adding any third party library:
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var tds = document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
var elem = document.getElementsByTagName('td')[i];
elem.addEventListener('mouseover', function () {
var text = this.innerHTML;
for (var j = 0; j < tds.length; j++) {
var elem2 = document.getElementsByTagName('td')[j];
if (elem2.innerHTML == text) {
elem2.style.background = 'red';
}
}
}, false);
elem.addEventListener('mouseout', function () {
for (var j = 0; j < tds.length; j++) {
var elem2 = document.getElementsByTagName('td')[j];
var text = this.innerHTML;
if (elem2.innerHTML == text) {
elem2.style.background = 'none';
}
}
}, false);
}
}, false);
</script>
I apologise that my answer is only in pseudo code, however I would approach this problem by using javascript (most possibly Jquery). I hope this makes sense...
<table id="tbl"> - so I would give the table an ID
<td onHover="changeHeaderColummns(this)"></td> - then on each of the columns have a jsMethod that fires.
<script>
changeHeaderColumsn(col)
{
var colIndex = col.Index; //get the current column index
var row = GetHeaderRow(); // get the header row
highLightColumn(row, colIndex); //change the colour of the cell
//with the same index in the header
row = getCurrentRow(col.RowIndex); //now get the current row
highlightColumn(row, 0); //change the colour of the cell
//with the index of 0
}
getHeaderRow()
{
return getRow(0);
}
getRow(rowIndex)
{
var table = document.getElementByID("tbl);
return table.rows[rowIndex];
}
highlightColumn(row, colIndex)
{
row[colIndex].style.backgroundcolor = "red";
}
for highlight columns you must use js like this jsfiddler. It's work with jQuery ;)
With code
Using jquery
fiddle: http://jsfiddle.net/itsmikem/CZEJT/12/
Option 1: highlights the cell and just the named fruit cells
$("td").on({
"mouseenter":function(){
$(this).closest("tr").find("td:first-child").css("background","#f99");
var col = $(this).index();
$(this).closest("table").find("tr:first-child").find(String("td:nth-child(" + (col + 1) + ")")).css("background","#f99");
$(this).css("background","#f00");
},
"mouseleave":function(){
$(this).closest("table").find("td,tr").css("background","none");
}
});
Option 2: highlights entire rows and columns that intersect the hovered cell
$("td").on({
"mouseenter": function () {
$(this).closest("tr").css("background", "#f99");
var col = $(this).index();
var myTable = $(this).closest("table");
var rows = $(myTable).find("tr");
$(rows).each(function (ind, elem) {
var sel = String("td:nth-child(" + (col + 1) + ")");
$(this).find(sel).css("background", "#f99");
});
$(this).css("background", "#f00");
},
"mouseleave": function () {
$(this).closest("table").find("td,tr").css("background", "none");
}
});