I want to use jQuery to insert an image after a certain row of a HTML table. I tried to use the appendTo function, but it did not work. I guess its something wrong with my jQuery selector. Can anyone correct my code?
Thanks!
HTML code:
<div class="articles">
<table align="center">
<tr><th><label for="id_chemical_name">Chemical name:</label></th><td><textarea id="id_chemical_name" rows="2" cols="17" name="chemical_name">Spinosad</textarea></td></tr>
<tr><th><label for="id_T">Number of time intervals:</label></th><td><input type="text" name="T" value="10" id="id_T" /></td></tr>
<!--I would like to insert an image after the row 'Number of time intervals'-->
<tr><th><label for="id_a">Logistic model parameter (α):</label></th><td><input type="text" name="a" value="0.746" id="id_a" /></td></tr>
</table></div>
jQuery code:
<script type="text/javascript" src=" ../stylesheets/jquery-1.7.2.js"></script>
<script>
$(document).ready(function(){
$('<img src = "https://www.google.com/images/srpr/logo3w.png" />').appendTo('#id_T');
})
</script>
Here is a demo of the question.
You cannot insert an image directly to a table without enclosing it in a tr and td/th element. I think this is what you are trying to do:
$('<tr><th colspan="2"><img src = "https://www.google.com/images/srpr/logo3w.png" /></th></tr>').insertAfter($("#id_T").parent("td").parent("tr"));
The element with ID id_T is an <input> - specifically a textbox - which cannot have child elements (and certainly not a child image).
You may want to try insertBefore or insertAfter instead, or you could use something like:
$('#id_T').closest('td').appendTo...
to move up the DOM from the input and find the containing <td>.
#id_T is a text input, you can't append an image to it.
Why can't you just put the image in manually? Especially since you can't just dump an image in the middle of a table structure like that.
To add a image to the same TD that id_T is in. Do that
$('<img src = "https://www.google.com/images/srpr/logo3w.png" />').appendTo($('#id_T').parent());
Any table's content should be inside td or th tag which should be in valid tr tag. Check your selector place again.
Related
I am new to Jquery and currently encountering an issue in my code. I need to hide an asterisk whenever the html form loaded. However, only the first asterisk hid. The TD tag is inside a for loop statement
HTML Code:
<td style="..." rowspan="0">
<div id="divhasvalue">
<label style="...">*</label>
</div>
</td>
Jquery code:
$(document).ready(function(){
$("#divhasvalue").hide();
});
Output in the Form:
You have to use the class instead of id. Give the same class to the divs you want to hide
Is there a way to extract body element without a particular child element in it?
For example, if I have:
<body>
<div id="id1" class="class1" />
<div id="id2" class="class2" />
</body>
, what I need to be extracted is:
<body>
<div id="id1" class="class1" />
</body>
Actually, I intend to use html2canvas library to make canvas element from a HTML code, but I don't want to include all body children in a canvas element.
If you retrieve a parent element then you also have to take all of its children too. A possible workaround in this case would be to select the body, clone it and then remove the unwanted child element, something like this:
var $bodyClone = $('body').clone();
$bodyClone.find('#id2').remove();
// use $bodyClone as needed here...
$('body').not("#id2").html();
or
$('body').not(".class2").html();
and this is for multiple
$( "div" ).not( ".someclass, #someid,.class").html()
hope it will help
you can use document.getElementById(id) to get one element
or getElementsByClassName(class) and then filter the returned array
Using better ids or classes could help you to avoid filtering at all, simply give all your canvases one class and replace them all.
I've got a table row where it retrieves data from MySQL and I have included a .onclick function where it opens up a text editor with data inside, but the text editor is only opening for the first row and not the rest in the table.
This is the jQuery code: The first opens the text editor and the second switches the textarea for the text editor which is ckeditor.
<script type="text/javascript">
$(document).ready(function()
{
$(".trClass").click(function()
{
var id = $(this).attr('id');
$('#d_'+id).css("display", "block");
$('#table_id').css("display", "none");
});
});
window.onload = function()
{
CKEDITOR.replace("editor1");
};
</script>
and this here is echo for the table, I am using a foreach.
echo '
<tr class="trClass" id="'.$counter.'">
<td class="marker">
<i class="fa fa-align-left"></i>
</td>
<td class="title">
'.$article_title.'
</td>
<td class="content">
'.$article_content.'
</td>
</tr>
<section id="d_'.$counter.'" style="display:none;">
<textarea id="editor1">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
</section>
';
$counter++;
}
I cannot figure out how to make the CKEDITOR.replace("editor1"); load for every table, I tried using .click function within it but it does not work as it doesn't load. Here is the problem, if you click on the first row it opens the text editor if you click on the second it does not; http://www.goo.gl/dQrLPN
Typically the id attribute should be unique for each element. Applying properties across multiple elements is usually accomplished with a class. Knowing this, CKEditor is probably just grabbing the first instance of an object with the given id (probably using document.GetElementById behind the scenes).
(According to the documentation, CKEDITOR.replace(var) will either take a DOM element, ID, or name.)
Given that, you have a couple of options. One is to defer loading the CKEditor until you actually click on the table row. This would look something like this... (note how each textarea has a unique id)
<section id="d_' . $counter . '" style="display:none;">
<textarea id="editor_'.$counter.'">
<div style="width:468px;">
'.$article_content_full.'
</div>
</textarea>
$(document).ready(function()
{
$(".trClass").click(function()
{
var id = $(this).attr('id');
$('#d_'+id).css("display", "block");
$('#table_id').css("display", "none");
CKEDITOR.replace('editor_'+id);
});
});
The second option would be to loop through all of the textarea elements and call replace on each one of them on-load. I wouldn't really recommend this, unless there's some specific reason you want to load everything up-front.
EDIT: Although this should fix your issue, you should look in to the HTML issues the other answerers have put forward. <section> doesn't belong as a child of <table> :-)
Try targeting the table and filtering by the rows using the .on() method.
$(document).ready(function()
{
$('#table_id').on('click','.trClass',function() {
var id = $(this).attr('id');
$('#d_'+id).css('display', 'block');
$('#table_id').css('display', 'none');
});
});
Details on .on() are here: https://api.jquery.com/on/
And as noted in the comments above, there are some overall issues with your HTML that you should probably fix before proceeding further.
I have a <td> that looks something like this:
<td class="myTDClass">
<span class="spanClass">Header</span>
<br />
<img class='myImages' style='cursor: hand;' onclick='doSomething(control)' alt='this is my alt Text'></img>
<br />
<span style="color: #123456;">More Text</span>
<br />
<a class='findThisClass'>Insert Alt Text Here</a>
</td>
This calls some jQuery code that sets the alt tag to some new text. Then, i want it to set the <a> element to some new text. Here is the jQuery code:
doSomething = function(control)
{
var $myControl = $(control);
$myControl.attr("alt", "This is the new Alt Text!");
var $newControl = $(control).parent().siblings().find(".findThisClass").first();
alert($newControl.find("a").text());
});
The jQuery code sets the alt tag great, but doesn't find the <a class=findThisClass />.
I think I'm using the .parent() and .siblings() wrong. Can anyone find my error? The idea here is that I can search just inside the <td> for the <a> element, and not touch the other elements in other <td>s
Try this instead:
var $newControl = $(control).closest('.myTDClass').find(".findThisClass");
alert($newControl.text());
Also img is self closing tag, instead of:
<img></img>
Just use:
<img... />
And instead of:
onclick='doSomething(control)'
Use:
onclick='doSomething(this)'
so that jQuery has really a control to work with :)
Working Example
Assuming you want to find the <a> that's in the same table cell as your <img>, you don't need to use parent(). All you need to do is call .siblings Try:
var $newControl = $(control).siblings('a.findThisClass').first();
This assumes control points to the image within the table cell.
$("a.findThisClass", $myControl).first()
a is a sibling of the image, so, simply:
$(control).siblings(".findThisClass")
How do I select an element with jquery, when a different element is clicked, when you don't know the name of the element? The code below is looping over the all the categories. I don't know how many categories there are, or what the names will be. When the 'insertUrl' link is clicked, I need to select the text area.
The only thing I can thinking is running an function in onclick and passing the name of the text area as a parameter.
Also, I'm not sure that I can use a selector when every link has the same id, so is this even possible?
<%
FullName = objCategory.ID & "|" & objCategory.Name
%>
<TD COLSPAN="2">
<TEXTAREA ROWS="5" CLASS="formWide" id="<%=FullName %>"><%= objCategory.Text %></TEXTAREA><br />
Insert URL
</TD>
If the HTML structure stays the same you can use .prev()
You shouldn't have elements with the same ID. You can use classes class="insertUrl"
<%
FullName = objCategory.ID & "|" & objCategory.Name
%>
<TD COLSPAN="2">
<TEXTAREA ROWS="5" CLASS="formWide" id="<%=FullName %>"><%= objCategory.Text %></TEXTAREA><br />
Insert URL
</TD>
and
$(".insertUrl").click(function() {
var textarea = $(this).siblings('textarea');
});
maybe its better if you use:
$(this).siblings('textarea');
this way you have more flexibility with the html controls order.
this way, if you remove the or change something else inside that TD the script will still works.
An even better way would be to use the <label> element. This way, you can insert later additional elements between the text comment and the textarea, and it still will work.
<textarea id="ta_id1" onclick="click_processing_func"></textarea>
<label for="ta_id1" class="link">Insert Url</label>
Now, if anyone clicks on the label, textarea will receive the click event.