ihave the next code
$('table tr').click(function(){
$("#demo").load(this.href + " #demo2");
return false;
});
and the html is this
<body>
<table>
<tr href="linkdemo.html">
<td>hi</td>
</tr>
</table>
</body>
as I do so that the javascript recognize the link of the tr?
Important: You need an element with id demo
As tr doesn't have href property, You need to use attr() to get its attribute.
$("#demo").load($(this).attr('href') + " #demo2");
However I would recommend you to use data-* prefixed custom attributes which can be fetched by using .data()
HTML Snippet
<tr data-href="linkdemo.html">
<td>hi</td>
</tr>
Script
$("#demo").load($(this).data('href') + " #demo2");
Related
Here is my HTML code.
How can I get the value of the data attribute when click the cell?
<td id = "orderIds" data-cids="213,431">orders</td>
What should I use to trigger an event when I click on the <td> cell?
Please check below mentioned solution.
$('td').click(function(){
alert($(this).data('cids'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id = "orderIds" data-cids="213,431">orders</td>
<td data-cids="23,43">12</td>
<td data-cids="21,41">23</td>
<td data-cids="13,31">34</td>
</tr>
</table>
you need clicked cell data attribute so use of this will do the needful. use following snippet and it should work.
$('td').click(function(){
var data = $(this).data('cids');
})
Bind a click event handler by selecting cell using the has-attribute selector(optional) and get data attribute value using data() method.
$('td[data-cids]').click(function() {
console.log($(this).data('cids'));
// or use `this.dataset.cids`
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td data-cids="213,431">orders</td>
<td data-cids="123,234">orders</td>
</tr>
</table>
With pure js...
orderIds.onclick=function(){
console.log(this.dataset.cids)
}
you can also use $('#orderIds) with jQuery
Hi I am trying to replace the table->tr->td with new td I have tried like this but it is not working.
<table id="job1">
<tr><td></td></tr>
<tr id="Jobstatus1">
<td>Accept</td>
<td>Reject</td>
<tr>
</table>
<table id="job2">
<tr><td></td></tr>
<tr id="Jobstatus2">
<td>Accept</td>
<td>Reject</td>
<tr>
</table>
I am showing a response like this:
$response['jobStatus'] =
'<td class="textcenter" colspan="2" style="color:green;" > Accepted The Above Job </td>';
This is what I am trying in ajax response:
if (response["success"] == true){
$("#Jobstatus"+jobId).remove(); //in here jobId will come as 1,2....
$("#Jobstatus"+jobId).append($response['jobStatus']);
The .remove() method will remove the element so append() can't find it, you should use .htmt('') or .empty() instead of remove.
Replace :
$("#Jobstatus"+jobId).remove();
By :
$("#Jobstatus"+jobId).html('');
//Or
$("#Jobstatus"+jobId).empty();
Hope this helps.
You can use the html() method to inject the response value straight into the target tr element, replacing whatever it contained:
$("#Jobstatus" + jobId).html($response['jobStatus']);
I have table and each cell of the table has specific url. I am trying to get the url on specific cell using jquery. Problem here is no class or id is defined for table, row and column. Just want to pull the href attribute using the tags only.
<table>
<tr>
<td><a href='MytestSite11.com'>site21</a></td>
<td><a href='MytestSite12.com'>site22</a></td>
<td><a href='MytestSite13.com'>site23</a></td>
</tr>
<tr>
<td><a href='MytestSite21.com'>site21</a></td>
<td><a href='MytestSite22.com'>site22</a></td>
<td><a href='MytestSite23.com'>site23</a></td>
</tr>
<tr>
<td><a href='MytestSite31.com'>site21</a></td>
<td><a href='MytestSite32.com'>site22</a></td>
<td><a href='MytestSite33.com'>site23</a></td>
</tr>
</table>
I am trying to get href element of second row second column which is MytestSite22. I have tried following jquery code but it is returning me undefine.Not sure what is missed on this.
$(function () {
var $row = $('table tr').eq(1);
var $col=$row.eq(1)
alert($col.attr('href'));
});
You forgot to specify the element in your second variable:
var $col=$row.find('td').eq(1)
Then, specify the anchor inside that:
alert($col.find('a').attr('href'));
For what it's worth, the dollar character as a variable prefix is conventionally used to indicate an array or set. Here, you're using it on a single item.
here is it the href element of second row second column
$("table tr:eq(1) td:eq(1) a").attr("href");
you can just do it all in one go: $('table tr:nth-child(2) td:nth-child(2) a').attr('href');
$(document).ready(function() {
alert($('table tr:nth-child(2) td:nth-child(2) a').attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><a href='MytestSite11.com'>site21</a></td>
<td><a href='MytestSite12.com'>site22</a></td>
<td><a href='MytestSite13.com'>site23</a></td>
</tr>
<tr>
<td><a href='MytestSite21.com'>site21</a></td>
<td><a href='MytestSite22.com'>site22</a></td>
<td><a href='MytestSite23.com'>site23</a></td>
</tr>
<tr>
<td><a href='MytestSite31.com'>site21</a></td>
<td><a href='MytestSite32.com'>site22</a></td>
<td><a href='MytestSite33.com'>site23</a></td>
</tr>
</table>
This is a straightforward way to do it:
var $row = $('table tr:nth-child(2)'), // row
$col = $row.children('td:nth-child(2)'), // column
$a = $col.children('a'); // anchor
alert($a.attr('href'));
The :nth-child(n) selector will match an element that's at a certain index amongst children of a shared parent element. Note that it's 1-based, not 0-based (like JavaScript arrays, for example), so the second child is :nth-child(2), the third child would be :nth-child(3), etc.
Here's a CodePen example.
Try this:
var a = $("tr").eq(1).find("td").eq(1).find("a").attr("href");
alert(a);
Also one of possibilities where you can retrieve the value with function:
getMe(RowNumber,ColumnNumber);
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(e) {
getMe(2,2);
});
function getMe(rowN, colN) {
var link = $("tr:eq("+(rowN-1)+") td:eq("+(colN-1)+") a").attr("href");
alert(link);
}
</script>
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>')
})
})
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; });
});