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>')
})
})
Related
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 written a code where i need to trigger a functionality when mouse is over to specific elements.
Its working fine for below code for all static
$("table td").on("mouseenter",function(){
console.log("mouse entered")
});
but for all dynamic <td class="editcolumn">XYZ</td> event is not triggering even if i use below code
$("table td").on("mouseenter",".editcolumn",function(){
console.log("mouse entered")
});
Any idea how to make it work. I'm using jQuery 1.11
I know I just commented, but I figured I would show you an example:
HTML:
<table id="tablee" cellspacing="0">
<thead>
<tr class="tablehead">
<th>This</th>
<th>is</th>
<th>a</th>
<th>table</th>
<th>header</th>
<th>and</th>
<th>stuff</th>
<th>though</th>
</tr>
</thead>
<tr class="append">
<td class="edit-column">asdf</td>
<td class="edit-column">qwer</td>
<td class="edit-column">zxcv</td>
<td class="edit-column">rtyu</td>
<td class="edit-column">tyui</td>
<td class="edit-column">dfgh</td>
<td class="edit-column">dfgh</td>
<td class="edit-column">wert</td>
</tr>
<!-- ... -->
</table>
<br/>
<br/>
<input type="button" class="add-column" value="Add Column" />
Javascript:
$(function() {
$('.add-column').click(function() {
$('.append').append("<td class='edit-column'>iueo</td>");
$('.tablehead').append("<th>Mo columns</th>");
});
/* vvv - this */
$("#tablee").on('mouseenter', '.edit-column', function() {
/* ^^^ should be children or a child of this */
$(this).css('background-color', 'yellow');
});
});
Here is a fiddle
This question's answer gives a much better explanation of delegated events.
I too faced a similar problem for dynamic elements that are added or removed. In such situations you can create dynamic elements with event-handlers attached to their attributes i.e. in your case you can put the desired operations in a function which gets called by your attribute event handlers:
It should be something like this:
Javascript:
function whenMouseEnters() {
// perform some operations
}
Html:
<td onmouseenter="whenMouseEnters()">
If table is aviable on DOM load you can write delgated event for the td with class editColumn like this:
$("table").on("mouseenter",".editcolumn",function(){
console.log("mouse entered")
});
My task here is to retrieve a HTML tag with the blockquote code below. I'd tried it by my method but it didn't work and I've changed another way even it wouldn't be the best way as I thought.
My first attempt and it didn't work:
search_title_temp_1 = $(search_title).closest("tbody").closest("tr").closest("tbody");
search_title_temp_2 = $(search_title_temp_1).find("tr").eq(1);
search_title_temp_2.hide();
This worked with what I need:
search_title_temp_1 = $(search_title).closest("tbody").closest("tr").closest("tbody");
search_title_temp_2 = $(search_title_temp_1).find(".noindex").closest("tr");
search_title_temp_2.hide();
Please let me know:
What's wrong with my first attempt?
If you have other solutions to shorten my last code, please let me know about that and any
suggestions would be appreciated.
Demo
HTML:
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td title="Electric Consumption for May 2013" id="WebPartTitleWPQ3" class="ms-WPHeaderTd">
<h3 style="text-align:justify;" class="ms-standardheader ms-WPTitle"><a accesskey="W" href="/Lists/ElectricWaterConsumption"><nobr>
<span>Electric Consumption for May 2013</span><span id="WebPartCaptionWPQ3"></span>
</nobr></a></h3>
</td>
<td>123</td>
<td>123</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="" valign="top">
<div width="100%" class="noindex ms-wpContentDivSpace">123</div>
</td>
</tr>
</tbody>
</table>
Javascript:
$("document").ready(function () {
var title = "Electric Consumption for May 2013";
var get_title = $(".ms-WPHeaderTd span");
for (i = 0; i < get_title.length; i++) {
//alert(get_title.eq([i]).text());
var search_title = get_title.eq([i]);
if (search_title.text() == title) {
alert(search_title.text());
search_title_temp_1 = $(search_title).closest("tbody").closest("tr").closest("tbody");
search_title_temp_2 = $(search_title_temp_1).find(".noindex").closest("tr");
search_title_temp_2.hide();
}
}
});
What's wrong with my first attempt?
The problem with your first attempt is that find("tr") gets all tr descendants, not only children. Then find("tr").eq(1) is not what you want.
Use this instead:
$(search_title_temp_1).children("tr").eq(1);
If you have other solutions to shorten my last code, please let me
know about that and any suggestions would be appreciated.
You can ask suggestions about working codes in https://codereview.stackexchange.com/
I wouldn't create variables (if you do, declare them with var!):
$(search_title)
.closest("tbody").closest("tr").closest("tbody")
.children("tr")
.eq(1)
.hide();
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');
}
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; });
});