Develop Reference

Include a table in each div that appends body

I am developing a web-site where i will need to get some json data for some places that will include images, titles, information etc and i need to present them to a website.
I have developed a prototype where i user the HTML5 classic template and i successfully appended my "article" with 10 <div>Example div</div> divs using a for statement and i am able to give them a unique id using the counter i.
My code for this is
<script type="text/javascript">
$(document).ready(function () {
for (var i=1; i<10; i++){
$("article").append("<div id=myid"+i+">Example div</div");
}
});
</script>
This works great but the thing is that i want to append the article using seperate divs with unique ids and will each include a table that will be filled with the json data i will recieve in the future.
But when i try to write my code and place inside the div tags the below code i get a syntax error...
<table width="597" border="1"><tr><td rowspan="2"> </td><td rowspan="3"> </td><td> </td></tr><tr><td> </td></tr><tr><td> </td><td> </td></tr></table>
Any thougts?

I finally got it together the correct way was to add:
$("article").append("<table id="+i+" width="+597+" border="+1+"><tr><td rowspan="+2+"> </td><td rowspan="+3+"> </td><td> </td></tr><tr><td> </td></tr><tr><td> </td><td> </td></tr></table>");
i just ad to add "+the numeric value for the table content+" and that way it works thanks all for the comments and suggestions! :)

show and hide an image onclick

I have the user profile picture inside a table having 100px for height and width.
I also have radio buttons to set visibility of the profile picture (public, Private, etc.). These are updated using ajax.
What I want to know is how can I show a image (e.g. "success.png") right above the profile picture and fade it out after 2 seconds?
<table class="profimg">
<tr><td align="center"><img class="profimg" src="../images/user/profile/1c4ca4238a0b923820dcc509a6f75849b1.jpg" alt="Administratorasdf" /></td></tr>
<tr><td align="center"><input type='radio' title='Publicly Visible' name='img_pub' onclick="upimg1()" /> <input type='radio' title='Visible Only To Users' value='UsersOnly' name='img_pub' onclick="upimg2()" /> <input type='radio' title='Visible Only To You' value='Hide' name='img_pub' onclick="upimg3()" checked='checked'/></td></tr>
</table>

I have added an img tag with the ID 'success'. This tag is the image that fades in and out.
$("#rad").click(function () {
$("#success").fadeIn(500).delay(1000).fadeOut(1000);
});
dont forget to include the jquery library.
Check this demo

<script type="text/javascript">
$(document).ready(function(){
$(".profimg").click(function(){
$("this").slideToggle("slow");
});
});
</script>
Don't forget to use jquery library.This will not take 2 seconds. But it'll work. you can use settimeout function for time interval. google for it

hide column in display table

Is there any way we can hide column of display table,we have media="none" which hides the column .i have tried using
document.getElementById(display_column_name).media="none";
but it is not working, i am stuck while setting attritube of display column in javascript is there any way.As on button select column is to hide/display of display table.
i have checkbox on column header.i have to hide columns of display table.selected column is hiden on button click.
i have also tried using div tag for display column
<div id= "col1" style="display:block">
<display:column paramId="date_disp" paramName="date_disp" property="date_disp" title="Date" sortable="true" headerClass="sortable" decorator="com.commons.ColDateDecorator" style="font-family:Arial, Helvetica, sans-serif;font-size: 12px;height: 25;"/>
</div>
and document.getElementById('col1').style.display="none"; but its not working.

Is it one element that you want to hide or severals ? document.getElementsByName will return you an array of elements so you need to access it like this:
document.getElementsByName(display_column_name)[0].media="none"
If it's just one element and this element has a id consider using this maybe:
getElementById()
Also i assume display_column_name is a variable defines previously right?

Uchenna is right you can use jquery library
Import the script into your page using script tag
add an attribute "id" or "class" to column you want to hide
and using that class or id you can hide that element.
eg. if you have mantioned id attribute and valuse is "abc"
then you can write :
$(document).ready(function()
{
$("#abc").hide();
});

The best way to this is to set the css display style to none.
document.getElementById("id _of_the_component").style.display = 'none';
Or you can use jquery Library
but you have to download jquery library from jquery.com. Import the script into your page with the script tag and do the following
$("#id _of_the_component).hide();

modify your display column like :
<display:column class="abc" paramId="date_disp" paramName="date_disp" property="date_disp" title="Date" sortable="true" headerClass="sortable" decorator="com.commons.ColDateDecorator" style="font-family:Arial, Helvetica, sans-serif;font-size: 12px;height: 25;"/>
on button click you can write :
lets say you are using button
<input type="submit" value="Submit" id="success" />
then you can use it like :
$('#success').click(function(){
$(".abc").hide();
});

Try the following:
HTML:
<html>
<table>
<tr>
<td id="td1">TD1</td>
<td id="td2">TD2</td>
<td id="td3">TD3</td>
</tr>
</table>
</html>
JavaScript:
document.getElementById("td2").style.display = "none";
Demo: http://jsfiddle.net/Vishal_Suthar3/kDb8Z/

javascript hide() and show() not hiding all content as it's supposed to

I have the following code which is supposed to first change the text if a checkbox is checked (which works fine) and second, SHOW a div with dropdown boxes. If the checkbox is unchecked then it should HIDE the div again.
The problem is that the div contains a javascript generated dropdown box which allows one to add/remove fields based on their need.
If you test it, you'll notice that when you check the checkbox and then click on "Add country", then uncheck the checkbox again, the "Add country" disappears but the dropdowns generated don't disappear.
Is there any way to also hide the dropdowns again if the checkbox is unchecked again?
Here is the code:
http://jsfiddle.net/shannont/GpNdS/1/

Your html is invalid. You have
<table>
<div>
...
</table>
A <table> cell can directly contain tr/tbody/thead tags only. A bare div inside a table will "leak" out of the table.
You also have two </table> closing tags below, but have only one <table> tag open.
Fix your html first. Clean it up so it's more legible - don't stuff script blocks into the middle of markup. It's confusing and hard to read.

Your browser is auto-correcting your syntactically invalid html. You can't put divs and images inside a table. You need to put in rows and cells first. The page then breaks because the javascript isn't targeting what you think it is targeting.
<table cellpadding="0" cellspacing="0" id="tblCountryCurrency">
<div id="detailedID" style="display: none;">
<img src="http://placehold.it/30x30" title="Add Row" border="0" onclick="addRowToCountryPrice('',''); return false;">
Add a Country
<input type="hidden" name="TotalLinesCountry" id="TotalLinesCountry">
Example Fix:
<table cellpadding="0" cellspacing="0" id="tblCountryCurrency">
<tr>
<td><div id="detailedID" style="display: none;"></td>
</tr>
</table>
You probably don't want to use a table here at all though. So I would recommend pulling that out and replacing it with a div. Then your code will probably work.

Well even if it's a mess, just put your
<div id="detailedID" style="display: none;">
Before the table.

How to delete a particular row in a dynamically created html rows using Javascript DOM?

Here am trying to add a html rows by clicking on the add button and delete the added rows on clicking on the delete button.
Its working fine with adding rows as expected. But the problem is the delete function deletes the last row of the table instead of deleting that corresponding row.
As there is delete button in every row, only that corresponding row should be deleted when the delete button is clicked.
Here is the jsfiddle which demonstrates the situation better.
if the fiddle above failed to load as it does, Please refer the code below.
Thanks in advance
JAVSCRIPT
//function to add a row
function insSpec()
{
rl=document.getElementById("insSpecc").rows.length;
var a=document.getElementById("insSpecc").insertRow(rl);
var h=a.insertCell(0);
var f=a.insertCell(1);
var m=a.insertCell(2);
var n=a.insertCell(3);
h.innerHTML='<div class="separator"><input type="text" name="client_prod[]" class="separator" id="competitor_prod'+rl+'" style="width:150px" >';
f.innerHTML='<input type="text" name="client_nrx[]" id="client_nrx'+rl+'" size="5" />';
m.innerHTML='<input type="text" name="client_rrx[]" id="client_rrx'+rl+'" size="5" />';
n.innerHTML='<button class="del_img" onClick="delSpec('+rl+')">Delete</button></div>';
}
//function to delete a row
function delSpec(rl)
{
r=document.getElementById("insSpecc").rows.length;
if(r!=2)
{
document.getElementById("insSpecc").deleteRow(r-1)
}
}
HTML
<table id="insSpecc" width="100%;">
<div class="separator">
<tr>
<td><span>Product</span></td>
<td><span>NRX(Qty)</span></td>
<td><span>RRX(Qty)</span></td></tr></div>
<tr>
<td><input type="text" id="client_prod" name="client_prod[]" style="width:150px;" class="validate[required] text-input"></td>
<td>
<input type="text" id="client_nrx" name="client_nrx[]" size="5" class="validate[required] text-input">
</td>
<td>
<input type="text" id="client_rrx" name="client_rrx[]" size="5">
</td>
<td>
<button id="add_img" id='insSpecimg' style='display:block;' onClick="insSpec()" align="center">Add</button>
</td>
</tr>
</table>

Try to use
n.innerHTML='<button class="del_img" onClick="delSpec(this)">Delete</button></div>';
and later
function delSpec(node)
{
r=node.parentNode.parentNode;
r.parentNode.removeChild(r);
}
in such case delSpec will receive pointer to the button, and will be able to delete the necessary row.

document.getElementById("insSpecc").deleteRow(r-1)
which should be
document.getElementById("insSpecc").deleteRow(rl);

You should use id for each row, and u can delete that row with the ID... There are several ways to get a DOM element object in jQuery and other libraries.
All you need to do is, use getElementById("the id of the row") and store that element in a variable, or make it's innerHTML=""; or delete it like xdazz suggested.
You can also get elements with class names... so, if your row is using any css class, you can get that row like you did with the ID.
Aquatic is also right: you either need to access all the DOM, traverse it, and reach ur desired element and do whatever with it, or access it with element's id or class name.
You can also change ur html markup for each row to have a check box which tells which rows to delete... and for each row if a checkbox is selected, delete the row.
Vote up if you got the point.