How do I make this entire td a link?
<td id="blue-border"><span id="blue"></span></td>
Clicking td should make it behave like this (I know this is syntactically incorrect:
<td id="blue-border"><span id="blue"></span></td>
EDIT: so far all the suggestions are only making the span inside the td a link, help lol.
Use CSS.
td a { display: block; width: 100%; height: 100%; }
<table style="width: 100%">
<tr>
<td>Link</td>
</tr>
</table>
The CSS forces the link to expand to the full width and height of the TD.
You can't wrap a td in an anchor. Do this:
<td id="blue-border"> <span id="blue"></span></td>
Or
<td onclick="chooseStyle('green-theme', 360)" id="blue-border"><span id="blue"></span></td>
Add an anchor tag inside of the td and set its display attribute to block. This should make the entire td clickable.
#blue-border a{
display: block;
}
or
<a href="link" style="display:block;">
Define an OnClick event for the td:
<td id="blue-border" onclick="chooseStyle('blue-theme', 360)">...
If all you're doing is firing javascript, I'd suggest using onclick instead of an anchor tag in the first place, like:
<td id="cell123" onclick="chooseStyle('green-theme',360)">cell contents</td>
You can throw a simple css style on there if you want the mouse to become a pointer:
#cell123:hover { cursor: pointer; }
<table width="100%" class="blueCss">
<tr>
<td ID="tdBlue">
<span id="Blue">Hello</span>
</td>
<td>
<span>other col</span>
</td>
</tr>
</table>
css file:
.blueCss {
height: 100px;
width: 100px;
}
.blueCss td {
background-color: blue;
}
.blueCss:hover {
border-color: #00ae00;
}
.blueCss td:hover {
background-color: yellow;
cursor: pointer;
}
jQuery code:
$(document).ready(function(){
var tdLink = $('#tdBlue');
tdLink.click(function(){
alert('blue-theme');
});
});
Check here: jsFiddle.net
Use jquery with class
$("tr td.data_col").click(function() {
window.location = $(this).find('a').attr("href");
});
Related
In function ClickedRow, i want to use the "a" which is being clicked. So i want to receive it as a parameter.
<td ...... >
<span class="......>
<span onmousedown="event.cancelBubble = true">
<a class="GridLinkRenderer" href="javascript:ClickedRow(this)" onclicklink="javascript:ClickedRow(this)" urlText="XXXX">
<td ......
<span class="......>
<span onmousedown="event.cancelBubble = true">
<a class="GridLinkRenderer" href="javascript:ClickedRow(this)" onclicklink="javascript:ClickedRow(this)" urlText="XXXXX">
Based on clicked <a ....> I would like to hide/show it (or to show/hide next <a class= "GridLinkRenderer" in other <td ...>) by function ClickedRow(this).
How can I do it ?
I've tried to send the clicked $(row).next().eq(0).tagName and row.style.display = 'none' , it says that it is "undefined".
function ClickedRow(row){
$(row).next().eq(0).hide();
$(row).hide();
}
Instead of this, remove href and use
$('#TheidOfTheA').on('click'function(){
let myAElement = $(this);
}
have you looked at closest(),find() and next() ?
https://api.jquery.com/closest/
https://api.jquery.com/next/
https://api.jquery.com/find/
$(row).closest('td').next('td').find('.GridLinkRenderer')
haven't tested this.. but if I'm thinking right this should be at least the point to right direction.
I can't tell by OP if the td are being used in a tr and the tr in a table as it should so I'll just mention real quick that it's invalid HTML should there be any td without a tr as a parent and it's invalid HTML having a tr without a table as its ancestor.
If starting at a tag nested within a td you'll need to climb out:
$(this).closest('td')...
Once at the cell level look around for the cells to the left: ....prev('td'), or to the right: ....next('td') or both: ....siblings('td'). Then go down each td and find the link nested within and turn it off/on: ....find('.gLR').fadeToggle();
$(this).closest('td').siblings('td').find('.gLR').fadeToggle();
$('.gLR').not('.g5').hide();
$('.gLR').on('click', function(e) {
if ($(this).hasClass('g5')) {
$('.gDir').fadeToggle();
} else if ($(this).hasClass('g1') || $(this).hasClass('g9')) {
const cell = $(this).closest('td');
cell.siblings('td').find('.gLR').fadeToggle();
} else if ($(this).hasClass('g4')) {
$(this).closest('td').prev('td').find('.gLR').fadeToggle();
} else if ($(this).hasClass('g6')) {
$(this).closest('td').next('td').find('.gLR').fadeToggle();
} else {
return false;
}
});
:root {
font: 700 5vw/1.5 Consolas
}
table {
table-layout: fixed;
border-collapse: collapse;
}
td {
width: 20%;
text-align: center
}
a {
display: block;
height: 10vh;
text-decoration: none;
color: cyan;
}
a:hover {
color: tomato;
}
a.g5:hover {
font-size: 0;
}
a.g5:hover::after {
content: '\1f536';
font-size: 5vw;
}
td b {
display: block;
height: 10vh;
}
<table>
<tr class='gRA'>
<td colspan='2'>
<b>🌈</b>
</td>
<td><b>⮝</b></td>
<td colspan='2'>
<b>🦄</b>
</td>
</tr>
<tr class='gRB'>
<td><b>🏰</b></td>
<td><b>⮜</b></td>
<td><b>🔷</b></td>
<td><b>⮞</b></td>
<td><b>🏯</b></td>
</tr>
<tr class='gRC'>
<td colspan='2'>
<b>🔥</b>
</td>
<td><b>⮟</b></td>
<td colspan='2'>
<b>💀</b>
</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I tried both recommendations(thx for it) - no success.
It looks that the "this" argument is not passed like clicked element(object) reference.
The parameter "row" seems to be like parent of all object, so like new Object and not the clicked object.
I am not sure if href="javascript:ClickedRow(this)" onclicklink="javascript:ClickedRow(this)" is correct syntax though.
so copied Your sample and came up with this. ;) try this out.. and
make sure You understand what's happening here.
$(() => {
$("body").on("click",".GridLinkRenderer", (e) => {
e.preventDefault();
//works on the first link.. stil misses a few check..
//for example do we have the next td.. at all..
console.log($(e.currentTarget).closest('td').next('td').find('.GridLinkRenderer'));
})
});
I am new to Jquery, I have a requirement to show extra text only when mouse hover on the respective line
How can i change my jquery snippet without writing the same snippets 10 times for 10 different selectors
here the code:
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
jQuery(function() {
$("#demoTable1").hide();
$( "#demo1" ).mouseover(function() {
$("#demoTable1").show();
});
$( "#demo1" ).mouseout(function() {
$("#demoTable1").hide();
});
$("#demoTable2").hide();
$( "#demo2" ).mouseover(function() {
$("#demoTable2").show();
});
$( "#demo2" ).mouseout(function() {
$("#demoTable2").hide();
});
});
</script>
<style>
tr {
background: #b8d1f3;
}
td {
font-size: 12px;
color: #000;
}
</style>
</head>
<body>
<table>
<tr>
<td id='demo1'> Service : All services are running
<div id='demoTable1'> some text here 1 </div>
</td>
</tr>
<tr>
<td id='demo2'> Service : All services are running
<div id='demoTable2'> some text here 2 </div>
</td>
</tr>
</table>
</body>
</html>
You can do this using pure CSS, just make sure the element you are wanting to show is directly after the parent.
.child {
display: none;
}
.parent:hover .child {
display: inline;
}
<div class="parent">Hover over me
<div class="child">I will appear</div>
</div>
You can something like:
$("[id^='demoTable']").hide();
$("[id^='demo']").mouseover(function() {
$(this).find("div").show();
});
$("[id^='demo']").mouseout(function() {
$(this).find("div").hide();
});
tr {background: #b8d1f3;}
td {font-size: 12px;color: #000;padding: 10px;}
div {padding: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id='demo1'> Service : All services are running
<div id='demoTable1'> some text here 1 </div>
</td>
</tr>
<tr>
<td id='demo2'> Service : All services are running
<div id='demoTable2'> some text here 2 </div>
</td>
</tr>
</table>
Parameterizing jquery should be easy. Give each td a class of 'demo' and the inner div a class of 'demoTable'. Then you can do somethingl ike this:
$( ".demo" ).mouseover(function() {
$(this).find(".demoTable").show();
});
$(".demo").mouseout(function() {
$(this).find(".demoTable").hide();
});
The technique you're looking for is called 'Don't Repeat Yourself', or DRY. The simplest way to achieve that in your case is to use class attributes to group elements with common functionality. You can then use DOM traversal within the event handlers attached to those elements to find the related content and amend it.
In this case you can use the hover() event to toggle() the child div element, something like this:
jQuery(function($) {
$(".demo").hover(function() {
$(this).find(".demo-table").toggle();
});
});
tr { background: #b8d1f3; }
td {
font-size: 12px;
color: #000;
}
.demo-table { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 1 </div>
</td>
</tr>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 2 </div>
</td>
</tr>
</table>
With that being said, JS is not the best technology to use for this. CSS is far more appropriate, using the :hover pseudo-selector:
tr { background: #b8d1f3; }
td {
font-size: 12px;
color: #000;
}
.demo-table { display: none; }
.demo:hover .demo-table { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 1 </div>
</td>
</tr>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 2 </div>
</td>
</tr>
</table>
I have a table with each row representing a song.
When a song is clicked, the parent td should be highlighted a light blue color with the .active class and if any song was highlighted previously the parent td's .active class should be removed.
This part works fine and is represented with this jquery:
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
I also want to have a next button and a previous button. This where I am having issues. When the next button is clicked, the next song on the list should be highlighted and the previously highlighted song should be unhighlighted (I am using the class .active to do the highlighting and unhighlighting). This part is not working:
$('#next_button').click(function(){
var current = $('td.active');
$('.songs').parents('td').removeClass('active');
current.nextAll('td:first').addClass('active');
});
Here is the jsfiddle link:
jsfiddle Link
Here is my html code:
<table id="song_table">
<thead id="song_thead">
<tr>
<th id="table_head">Songs</th>
</tr>
</thead>
<tbody id="song_tbody">
<tr>
<td class="td_songs">
<a class="songs">
1
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
2
</a>
</td>
</tr>
</tbody>
</table>
<div id="next_button">
<p id="next_text">Next Button</p>
</div>
Here is my css:
.active{
background-color: #D9FAFA;
}
table{
text-align: center;
height: 100px;
width: 200px;
}
#table_head{
text-align: center;
}
#next_button{
height: 100px;
width: 200px;
background-color: lightgreen;
}
Here is my jquery
$(document).ready(function() {
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function(){
var current = $('td.active');
$('.songs').parents('td').removeClass('active');
current.nextAll('td:first').addClass('active');
});
});
If you could help me solve this issue, I would greatly appreciate it. I feel like this should be so easy but I just can't seem to make it work.
Thanks!
The trick is to get the row index of the current song, add 1, and then do a modulo with number of rows that way if the current row+1 overflows the number of rows, it will start from the beginning:
$().ready(function() {
$(".songs").click(function(){
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function(){
//here .parent() will get the current <tr>
//.parent().index() will get the index of the current <tr>
var currentID = $('td.active').parent().index();
//here .parent() will get the <tr>
//.parent().parent() will get the <tbody>
//.parent().parent().children() will get all the rows
//.parent().parent().children().length will get the row count
var nextID=(currentID+1)%($('td.active').parent().parent().children().length)
$('.songs').parents('td').removeClass('active');
$('td').eq(nextID).addClass('active');
});
});
.active{
background-color: #D9FAFA;
}
table{
text-align: center;
height: 100px;
width: 200px;
}
#table_head{
text-align: center;
}
#next_button{
height: 100px;
width: 2d00px;
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="song_table">
<thead id="song_thead">
<tr>
<th id="table_head">Songs</th>
</tr>
</thead>
<tbody id="song_tbody">
<tr>
<td class="td_songs">
<a class="songs">
1
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
2
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
3
</a>
</td>
</tr>
<tr>
<td class="td_songs">
<a class="songs">
4
</a>
</td>
</tr>
</tbody>
</table>
<div id="next_button">
<p id="next_text">Next Button</p>
</div>
Something like this? http://jsfiddle.net/y5ntap04/3/
You needed to go up the DOM and then where all the siblings are, you can go to the next() one.
Plus added a previous button for you.
$().ready(function () {
$(".songs").click(function () {
$('.songs').parents('td').removeClass('active');
$(this).parents('td').addClass('active');
});
$('#next_button').click(function () {
$('.songs').parents('td.active').removeClass('active').closest('tr').next().find('td').addClass('active');
});
$('#previous_button').click(function () {
$('.songs').parents('td.active').removeClass('active').closest('tr').prev().find('td').addClass('active');
});
});
in your code you have each td in its own tr meaning there is no next td to go to.
you should adjust your jquery to focus on the rows, as in this fiddle (shown below)
$().ready(function() {
$(".songs").click(function(){
$('.songs').parents('tr').removeClass('active');
$(this).parents('tr').addClass('active');
});
$('#next_button').click(function(){
var current = $('tr.active');
$('.songs').parents('tr').removeClass('active');
current.next('tr').addClass('active');
});
});
You'll also notice I'm using .next() which will just grab the next element or the next element which matches the argument (in this case tr) - no need to get all then restrict to just the first.
All this will make your fiddle behave as expected, however, if you want to target the td's within each of the tr's you'll have to add .find('td') to get the td out of the retrieved tr, like this. Here the only line that is changed is the one that adds the class on click of next, which is now: current.parent().next('tr').find('td').addClass('active');
Refactoring out $('.songs').parents('tr').removeClass('active'); into it's own function would also clear your code a bit and make it easier to follow, a good habit! (also +1 for using a variable to store a returned JQuery DOM object - var current = $('tr.active'); - another good habit for code clarity and efficiency, especially when you are deraling with more complicated DOM structures and functions)
I'm new to Javascript and I'm working on a project. Thanks to help from a online help website, I'm able to show/hide my table successfully.
When I click the h3 element, it opens up and append the anchor (in this situation, #1, #2, #3) to the URL.
I want to use this anchor element to open up the specific table from an external link from another web page. (e.g. at Home Page, I clicked on this testing.html#1, I want it automatically open the 1st table when I reach the page)
Thank you very much!
JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
CSS
<style>
#special1{ display: none }
h3 {text-align: center;
background-color: black;
color: white;
clear: both;
cursor: pointer; }
.newboxes {
display: none;
}
a {text-decoration: none;}
</style>
HTML
<a id="myHeader1" onclick="javascript:showonlyone('newboxes1');" href="#1"><h3>Table 1</h3></a>
<table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes1">
<tr>
<td>1</td>
</tr>
</table>
<a id="myHeader2" onclick="javascript:showonlyone('newboxes2');" href="#2"><h3>Table 2</h3></a>
<table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes2">
<tr>
<td>2</td>
</tr>
</table>
<a id="myHeader3" onclick="javascript:showonlyone('newboxes3');" href="#3"><h3>Table 3</h3></a>
<table border="1" align="center" cellspacing="10px"class="newboxes" id="newboxes3">
<tr>
<td>3</td>
</tr>
</table>
Note this only work if you are loading from a html page in the same domain.
JQuery's .load function is very versatile. To load the first table from testing.html, we can do:
$('#tableContainer').load('testing.html table:eq(0)');
2nd table:
$('#tableContainer').load('testing.html table:eq(1)');
and so on.
demo
Note that the 3 tables in the demo are loaded from here
If the URL ends with #1, and you need showonlyone('newboxes1') automatically executed:
if (window.location.hash.substr(1) == '1') {
showonlyone('newboxes1');
}
By using disabled attribute on an input is possible to prevent user input and trigger a slightly different look.
Here is the demo http://jsfiddle.net/D2RLR/3023/
Let's suppose I want to apply the same style to a different TAG like a table.
In fact, I am using handsontable to generate an Excel-like data grid editor.
How can I apply disabled attribute in the following context (TAG like a table)?
Here is the demo using handsontable and bootstrap http://jsfiddle.net/D2RLR/3025/
You can't apply Bootstrap's existing input[disabled] styling, but you can add new CSS that mimics the styles exactly.
For example:
#exampleGrid td {
cursor: not-allowed;
background-color: #EEE;
color: #9E9999;
}
Obviously this doesn't include your readonly logic, and looks a little weird with your fiddle (because the column and row headers are the same color), but that's the gist of it.
Check here:
http://handsontable.com/demo/conditional.html
There is .readOnly cell property - use it!
HTML inputs also have readonly property, not only disabled property, an there are some considerable differences between their behaviour.
Boostrap is only styling the inputs based on their disabled attribute like:
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
background-color: #EEEEEE;
cursor: not-allowed;
}
So you won't be able to use bootstrap to do that, because tables don't have such attribute.
You should use a plugin of sorts or roll your own.
Maybe this can help... changes the look of the cell and you can edit on it.
HTML
<table class="editableTable">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>E-mail</th>
<th>Telephone</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>João Carlos</td>
<td>joca#email.com</td>
<td>(21) 9999-8888</td>
</tr>
<tr>
<td>002</td>
<td>Maria Silva</td>
<td>mariasilva#mail.com</td>
<td>(81) 8787-8686</td>
</tr>
<tr>
<td>003</td>
<td>José Pedro</td>
<td>zepedro#meuemail.com</td>
<td>(84) 3232-3232</td>
</tr>
</tbody>
</table>
CSS
* {
font-family: Consolas;
}
.editableTable {
border: solid 1px;
width: 100%
}
.editableTable td {
border: solid 1px;
}
.editableTable .editingCell {
padding: 0;
}
.editableTable .editingCell input[type=text] {
width: 100%;
border: 0;
background-color: rgb(255,253,210);
}
JS
$(function () {
$("td").dblclick(function () {
var originalContent = $(this).text();
$(this).addClass("editingCell");
$(this).html("<input type='text' value='" + originalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("editingCell");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(originalContent);
$(this).parent().removeClass("editingCell");
});
});
});