Develop Reference

Need help aligning dynamic td element in html form

I have the following piece of code:
<tr>
<td style="display:none;" id="missing_person_report_label"><b>Enter image</b></td>
<td style="display:none;" id="missing_person_report_image"><input type="file"><br/></td>
</tr>
These td elements are initially set as hidden and are only displayed when I'm selecting the "Missing Person Report" option from the dropdown menu. The Javascript function to activate these td elements is given as:
function checkForChange(that) {
if (that.value == "missing_person_report") {
console.log(that.value);
console.log('person');
document.getElementById("missing_person_report_label").style.display = "block";
document.getElementById("missing_person_report_image").style.display = "block";
}
}
The code is doing as intended but there is a problem with the alignment of the tr element. This is the screenshot of the webpage.
I want the Choose file to have the same alignment as all the above elements,i.e. I want the Choose file to be on the right side of the Enter Image label . How do I do it?
Edit: Full Code is available here:
Edit: Those who are saying that I should assign the style to tr instead of td, I already tried doing this. If I do this, the webpage looks like this:
I want all the elements on the right to have the same alignment.

#Ronith.
Actially you their CSS as block, so that's why they are on separated lines. You should set display = "table-cell"
table {
width: 100%;
}
td {
display: table-cell;
}
<table>
<tr>
<td
id="missing_person_report_label"><b>Enter image</b></td>
<td
id="missing_person_report_image"><input type="file"></td>
</tr>
</table>
P.S.: do not pay attention that display is in CSS. It's just for instance. You should set it from JS code as you wish

display:block; makes a html element to take the full width of it's parent. So, you made tds to block level element they took all the width available and the upper one pushed the second one below.
Solution is not to change it's default display property. However try with inline-block or table-cell; which is the default property for tds inside a table.

The issue is because of display:block in javascript. set display: inline-block in your javascript code:
document.getElementById("missing_person_report_label").style.display = "inline-block";
document.getElementById("missing_person_report_image").style.display = "inline-block";

try this - apply display none to tr and not the td and from the function display block it again
<tr style="display:none;" id="missing_person_report_row">
<td><b>Enter image</b></td>
<td><input type="file"><br/></td>
</tr>
Function
function checkForChange(that) {
if (that.value == "missing_person_report") {
console.log(that.value);
console.log('person');
document.getElementById("missing_person_report_row").style.display = "block";
}
}

Getting state of a variable to be printed out

I currently have a button that when I press it a table appears below it. My first question that I can't figure out is that I cannot get a border although I specified border="10". I am using firefox. Next I cannot figure out how to when I am done with my table to be able to press the button and have the table be hidden. My third question is that this table is being written as a test to see the state of my variables and parameters in my jsp are what I think they are. In my third cell of my table where I have just docs I want the the current value on the page of getDocs(). If I put it in the getDocs() then it gives me the result on page load which would be null. But in my showDiv() method when I run my debugger it shows the correct value of getDocs in the var docs = getDocs();. How do I get the docs value in docs.
window.onload = function()
{
document.getElementById("button").onclick = showDiv;
}
function showDiv()
{
document.getElementById("hidden").style.display = "block";
var docs = getDocs();
}
<input type="button" id="button" value="Click to show states" onclick="showDiv()"/>
<div id="hidden" style="display:none">
<table border="10" style="width:300px">
<tr>
<td>Type</td>
<td>Object</td>
<td>value</td>
</tr>
</br>
<tr>
<td>Element 1</td>
<td><%=docs%></td>
<td>docs</td>
</tr>
</table>
</div>

For the border issue, what happens if you put the border definition in the style declaration:
<table style="width:300px;border:1px solid black;">
For showing / hiding, a simple toggler can be put into the showDiv() call. Try:
function showDiv() {
if (document.getElementById('hidden').style.display == 'block') {
document.getElementById('hidden').style.display = 'none';
}
else {
document.getElementById('hidden').style.display = 'block';
}
}
Need more code examples and explanation to work on the Docs issue.

1) border is a css style attribute, so apply it in the css file.
#foo (yourid)
{
border: 10px;
}
2) you will have to create the button and create a onClick() function (JavaScript). This function will retrieve the table (possible by id) then change the display to none
var table = document.getElementById("foo);
table.style.display = none;
3) Not to sure about this one.

I'm not sure I will answer to each question here, but here you go anyway : http://jsfiddle.net/bbtVH/8/
You just need this javascript, since you use the HTML attribute onclick on your button, no need to add a listener in window.onload :
function showDiv() {
var table = document.getElementById("hidden");
if (table.style.display !== "block"){
table.style.display = "block";
// Just get docs from JSP, if you want to get its value :
// var docs = <%=docs%>;
}
else {
table.style.display = "none";
}
}
This CSS will give you borders of 2px around your cells :
td{
border: 2px solid black;
}

for your border :
<table border="10" style="width:300px border: 5px solid red; display:none">
to hide the table :
$("#hidden").fadeOut("slow");
or to see it :
$("#hidden").fadeIn("slow");
the get the values from docs:
docs.val()

toggle issue between grids

I have two jqgrids. At a time only one should be visible. For this I tried toggling like this.At a time only one grid should be displayed. For board grid, it works fine. But for list grid, both the grids are displayed.
.jsp
<tr valign="top" id="message" style="display: block;" >
<td align="left">
<%# include file="grid1.jsp" %>
</td>
</tr>
<tr valign="middle" id="task" style="display: none;" >
<td align="left">
<%# include file="grid2.jsp" %>
</td>
</tr>
In java script, I have tried making the styles "" or none accordingly. Board function will be called when I press a button
the side buttons l be like
<img src="images/board.jpg" onclick="board()">
board(){
document.getElementById("message").style.display = "";
document.getElementById("task").style.display = "none";
}
The other grid will be called llike this
<img src="images/board.jpg" onclick="list()">
list(){
document.getElementById("message").style.display = "none";
document.getElementById("task").style.display = "";
}
But for me, initial loading of the page shows the board alone. But When I press toggle button, it shows both board and list. Any mistake with my code?

For toggling you can use like this.
Here is a jquery sample in jsfiddle
JsFiddle
$(thing).toggle();
Is used for toggle.

javascript/html/css Show/hide box

I have done something like this before but this time code is not working. Basically, I want to let users toggle a box of html on and off. Here is a jsfiddle
http://jsfiddle.net/2pcwW/
There are several problems with this. First it isn't working as is possibly due to a typo. Second, I would like the default to be hide text, not show it, the opposite of what this tries to do. Finally, is it possible to place a table inside of the div so the whole table gets toggled on and off--in place of just "some text".
Here is non working code..same as in jsfiddle.
JS:
function toggleBox(obj) {
var box = document.getElementById("box");
if (box.style.display == "none") {
box.style.display = "";
obj.innerHTML = <div>Hide</div>;
} else {
box.style.display = "none";
obj.innerHTML = <div>Show</div>";
}
}
html:
<table><tr><td><div>
<div>Hide</div><div id="box">
Some text</div></div></td></tr></table>
Thanks for any suggestions.

Well, if you're okay not using JavaScript (and supporting only browsers that implement the :target pseudo-selector):
<table>
<tr>
<td>
<div>
<a href="#box">
<div>Hide</div>
</a>
<div id="box">
Some text. Hide</div>
</div>
</td>
</tr>
</table>
And CSS:
#box {
display: none;
}
#box:target {
display: block;
}​
JS Fiddle demo.

Toggle data display inside table cell

I have a table that's generated by a normal PHP loop. What I want to do is create a form in the first column of each row that's hidden by default but appears when you click a toggle link in that row.
I can make a normal toggle-able div by creating a CSS id called hidden and setting display: none;. Unfortunately I can't keep creating divs with id=hidden that are automatically associated with the preceding link.
I am pretty inexperienced with both Javascript and CSS, so I've mostly tried to do this by patching together examples but I'm coming up empty. I've read in some places that you can't put divs inside of a table, so maybe I'm going about this all wrong.
Here's an example of what the code does and how I wish it worked, but of course it does not.
<script language="JavaScript" type="text/javascript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
<?php
while($array = mysql_fetch_array($sql))
{
?>
<tr>
<td>
<?php
echo $array['some_data'];
?>
Toggle
<div id="hidden"><?php echo $array['hidden_thing']; ?></div>
</td>
<td>
<?php echo $array['some_other_data']; ?>
</td>
</tr>
<?php
}
?>

Just use a different ID for each row:
<?php
$count = 0;
while($array = mysql_fetch_array($sql)) {
$id = 'hidden' . $count++;
$data = $array['some_data'];
$hidden = $array['hidden_thing'];
$other_data = $array['other_data'];
echo <<<END
<tr>
<td>$data <a href="#" onclick="toggle('$id');>Toggle</a>
<div id="$id">$hidden_thing</div>
</td>
<td>$other_data</td>
</tr>
END;
}

Make it a span instead of a DIV as I think that some browsers don't support divs inside table elements. Also, instead of referring to it by ID, pass in this.nextSibling() to the toggle, using DOM navigation to get the next sibling (which should be the SPAN) to show/hide.
function toggle(ctl) {
var state = ctl.style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
<a href="#" onclick="toggle(this.nextSibling);">Toggle
</a><div><?php echo $array['hidden_thing']; ?></div>
EDIT: As #tomhaigh suggests (and as shown in the example), for this to work you need to make sure that there is no text/whitespace between the anchor and the div. You could also write a function that, given a DOM element, would select the next non-text DOM element and return it. Then pass this to that function and the result to your toggle function.

Here's my recommended (general solution) using jQuery to reference events relatively instead of maintaining ids for each row and form. This also allows you to hide non-active row forms easily, which is a good idea since only one form can be submitted at a time.
HTML:
<table id="tableForms" class="table">
<tr>
<td class="rowForm"><form><span>form1 content</span></form></td>
<td class="showRowForm">click on row to show its form</td>
</tr>
<tr>
<td class="rowForm"><form><span>form2 content</span></form></td>
<td class="showRowForm">click on row to show its form</td>
</tr>
<tr>
<td class="rowForm"><form><span>form3 content</span></form></td>
<td class="showRowForm">click on row to show its form</td>
</tr>
</table>
Javascript:
<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript">
//as soon as the DOM is ready, run this function to manipulate it
$(function() {
// get all tr elements in the table 'tableForms' and bind a
// function to their click event
$('#tableForms').find('tr').bind('click',function(e){
// get all of this row's sibblings and hide their forms.
$(this).siblings().not(this).find('td.rowForm form').hide();
// now show the current row's form
$(this).find('td.rowForm form').show();
}).
// now that the click event is bound, hide all of the forms in this table
find('td.rowForm form').hide();
});
</script>
Demo:
A working demo of this can be found here.