Is it possible to add a jQuery function so that a click in a table cell will invoke
a hidden <a href="javascript: ..." /> element (that is a descendant of the TD) ?
I've tried with
$('#table td').click(function() {
$(this).find('a').click();
});
An other variants, but to no luck.
--larsw
Why don't you move your JavaScript code out of the href attribute and into your click event? jQuery was made to write unobtrusive JavaScript.
Edit:
No, but really, consider removing those hidden links in favor of unobtrusive JavaScript. Here are the relevant parts of Corey's example rewritten:
JS:
$(document).ready(function() {
$('table td').click(function(event) {
alert($(this).html())
})
})
HTML:
<table border="1">
<tr>
<td>a1</td>
<td>a2</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
</tr>
</table>
<html>
<head></head>
<body>
<table border=1>
<tr>
<td>a1<a href=# onclick='alert("a1")' /></td>
<td>a2<a href=# onclick='alert("a2")' /></td>
</tr>
<tr>
<td>b1<a href=# onclick='alert("b1")' /></td>
<td>b2<a href=# onclick='alert("b2")' /></td>
</tr>
</table>
<script src="scripts/jquery-1.2.6.min.js" ></script>
<script>
$(function(){
$('table td').click(function(){ $(this).find('a').click()});
})
</script>
</body>
</html>
I have it working fine with that clip above. However see your jQuery selector has a # in front of it , which would be failing unless your table has an id of 'table'.
Having said that, there is probably a better way to do what your after than hidden a tags with javascript embedded in them.
This would be a workaround if you want to avoid adding an onclick:
$('#table td').click(function() {
$(this).find('a').each(function(){ window.location = this.href; });
});
Related
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" >
$(function () {
alert($('tr').html());
})
</script>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
I have a simple HTML table. In a JQuery script I tried to alert all rows in the table, but it alerts only one row of table. What does $('tr') actually return?
Why isn't it possible to display all the rows if $('tr').css('background-color', 'red'); can change the colors of all?
html() : Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.
You could loop through all the rows using each() and use alert to display the html content :
$('tr').each(function(){
alert($(this).html());
});
Hope this helps.
$(function () {
$('tr').each(function(){
alert($(this).html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>
</table>
You need to get the html for each tr and display the html in two alerts.
This will display your tr is two alert messages:
SCRIPT
$(function () {
$('tr').each(function() {
alert($(this).html());
});
});
See working example at: https://jsfiddle.net/4qb4j6s1/1/
The reason $('tr').css('background-color', 'red'); changes all tr's background color is because the jquery function css is applied to all instances on the of the element unless otherwise specified. Alert(); only displays the first instance of an html element!
In order to display the entire table in one alert you can do:
SCRIPT
alert($('table').html());
I'm adding rows with javascript to this tbody
<div id="listingContainer"><div id="listing"><table class="table table-hover table-striped" id="listingTable"><tbody id="places"><img src="images/loading.gif"></tbody></table></div></div>
I tried this:
$("#places").html('');
but is adding to it
http://jsfiddle.net/sebababi/2JTPD/
It does not work cause
tbody does not accepts img tag as child element.
This is an example of valid table markup. Act accordingly
<table>
<tbody>
<tr>
<td id="places">
<img src="loading.gif">
</td>
</tr>
</tbody>
</table>
Note: The tbody is not necessary
First of all, you'll need your <img> tag to be within a <td> tag. Then use remove(); to get rid of the image like so:
HTML:
<tbody id="places">
<tr>
<td>
<img src=".../loading.gif">
</td>
</tr>
</tbody>
jQuery:
$("#places img").remove();
Here is fiddle: http://jsfiddle.net/2JTPD/29/
Looking for something like this?
http://jsfiddle.net/chace/2JTPD/28/
window.setTimeout(blahFunc,5000)
function blahFunc() {
$("#places").html('done');
}
I have a question, I am trying to make some manipulation with html tables. I have two tables,
and when I hover first row from the first table, it should highlight both rows from both tables.
I have found a solution, in making this simple function:
<script type="text/javascript">
function matchrow(){
document.getElementById('row1').style.backgroundColor='#f5f5f5';
}
function unmatchrow(){
document.getElementById('row1').style.backgroundColor='white';
}
</script>
On the first table I have:
<tr onmouseover="matchrow()" onmouseout="dismatchrow()" >
on the second table I have:
<tr id="row1" >
So when I put mouseover the first row from the first table, the first row from the second table highlights.
My question is, how to make it for the every single row, especially if it will be dynamic table.
Hope I was clear.
I've implemented this with jQuery. It doesn't use obtrusive JS and doesn't require additional IDs for rows.
Also, CSS classes are more preferable than inline styles.
HTML:
<table id="t1">
<tr><td>......</td></tr>
<tr><td>......</td></tr>
</table>
<br/>
<table id="t2">
<tr><td>......</td></tr>
<tr><td>......</td></tr>
</table>
CSS:
tr.active > td
{
background-color:#f00;
}
JS:
$(function(){
$("#t1 tr").hover(
function(){
$(this).addClass('active');
$('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').addClass('active');
},
function(){
$(this).removeClass('active');
$('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').removeClass('active');
}
);
});
Here is live fiddle: http://jsfiddle.net/keaukraine/KBEhA/1/
You can use the div id as a parameter in the function
<tr onmouseover="matchrow('row1')" onmouseout="dismatchrow('row1')">
function matchrow(divid){
document.getElementById(divid).style.backgroundcolor='#F5F5F5';
}
function dismatchrow(divid){
document.getElementById(divid).style.backgroundcolor='white';
}
You can use jQuery for this.
Use the .eq() and .index() functions.
A way of doing it:
HTML:
<table border="1">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
<tr>
<td>Row4</td>
</tr>
</table>
<table border="1">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
</table>
JS:
$('table tr').hover(function()
{
var index = $(this).index();
$('table').each(function()
{
$(this).find('tr').eq(index).css('color', 'red');
});
});
A working example can be found here.
I have a table. Inside table i have rows, each with a column : checkbox.
as following
<table>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
</table>
I want whenever i select the checkbox, a pop up is created.
Please note : i can not edit the html code.. However i can only do some changes in javascript.
PS : At last i want to highlight the selected row.
well you could use the Jquery library and take advantage of the .change() functionality
$('.target').change(function() {
alert('Handler for .change() called.');
});
reference: http://api.jquery.com/change/
On how to use JQuery is a different question
Now for javascript its a bigger hack:
function checkAddress(checkbox)
{
if (checkbox.checked)
{
alert("a");
}
}
To add the on click on the HTML with Javascript
document.getElementById("ElementID").setAttribute("onchange", function() {checkAddress(this));
HTML
<input type="checkbox" name="checkAddress" />
please check following links
http://jqueryui.com/dialog/#modal-form
http://www.mywebdeveloperblog.com/my-jquery-plugins/modalpoplite
<td class ="checkclass" ><input type="checkbox" onchange='checkBoxClicked();'></td>
function checkBoxClicked()() {
alert("Hi");
}
for more info you can use [javascript pop-up][1] but i will suggest to go with jQuery or modal
[1]: http://www.echoecho.com/jsbasics.htm
you can do with jquery
$('.checkclass input').change(function() {
// code here
});
I hope it will help to solve your problem.
I want to add a table to my website with jquery´s append function when the user hovers over the image $("#dot0003"). Dreamweaver already tells me that there is a syntax error but I don't understand where.
$(document).ready(function() {
$("#dot0003").hover(
function(){
$("#tablespace").append('
<table id="table1" class="info0004" border="4">
<tr>
<td>roomnumber</td>
<td>200</td>
</tr>
<tr>
<td>number of bathrooms</td>
<td>2</td>
</tr>
<tr>
<td>number of beds</td>
<td><img src="_index/_dots/dot.gif" width="20" height="20"></td>
</tr>
</table>')
})
})
Any help appreciated!
Are you sure this is what you're trying to do? Meaning, when you hover over dot0003, it's going to keep trying to append this data. See the fiddle here.
With that said, your issue is with your spaces. See the fiddle above. Either remove your spaces or build your string like:
var myContent = '<table id="table1" class="info0004" border="4">'
myContent += '<tr>'
...
But this produces invalid HTML markup as your adding tables in your table like such:
<table>
<tr><td></td></tr>
<table>
...
I think you should use jQuery's after method instead of append.
Good luck.
Your adding dynamic table syntax has a space so remove space then run
You can try to run using simple dynamic div
$(document).ready(function() {
$("#dot0003").hover(
function(){
$("#tablespace").append('<div>ss</div>')})})
But when you will write syntax with space it will show error
$(document).ready(function() {
$("#dot0003").hover(
function(){
$("#tablespace").append('<div>ss
')})})
Try with this code after removing extra space
$(document).ready(function() {
$("#dot0003").hover(
function(){
$("#tablespace").append('<table id="table1" class="info0004" border="4"> <tr><td>roomnumber</td><td>200</td></tr> <tr><td>number of bathrooms</td> <td>2</td></tr><tr><td>number of beds</td> <td><img src="_index/_dots/dot.gif" width="20" height="20"></td></tr></table>')
})
})