Develop Reference

How to change table display attribute using javascript

I have a table that I have set to display:none. I want the table to change to display:block when a particular radio button is clicked. Using onlick="" within the radio tag didn't work so I implemented the following code:
window.onload = function() {
var adminbutton = document.getElementById('adminstatus');
adminbutton.onclick = handler;
}
function handler() {
account.getElementById('brokerform').style.display='block';
}
If I use an alert() within handler() it gets triggered with the appropriate radio button click, so I know the code block is getting executed. I can't figure out why the line in handler() does not make the table visible. I have also tried wrapping the table in a div and using the same style manipulation and it didn't work either.

Demo
var adminbutton = document.getElementById('adminstatus');
adminbutton.onclick = show;
function show() {
document.getElementById('brokerform').style.display = 'block';
}
<table id="adminstatus">
<tr>
<td>adminstatus</td>
</tr>
</table>
<table id="brokerform" style="display:none;">
<tr>
<td>brokerform</td>
</tr>
</table>
Why account.getElementById('brokerform').style.display='block';
Change to document.getElementById('brokerform').style.display = 'block';

Try this...
account.getElementById('brokerform').show();
or this:
account.getElementById('brokerform').css("display", "block");

How to put checkbox in front of clickable row

I was making a mailing sort of system.Now am stuck with a problem :
Suppose i have rows in table showing inbox messages and on click they show full message.Now with each row i want to have a checkbox,so that on checking that checkbox i can delete that particular row from the page.But as i had made whole row clickable,as soon as i check the checkbox it moves on to next page.
My code is something like this :
<tr bgcolor="#5D1B90" color="#FFFFFF" onmouseover="ChangeColor(this, true,false);" onmouseout="ChangeColor(this, false,false);" onclick="DoNav('showmail.jsp?mid=<%=messageid%>');">
<td callspan="3"><%=sendername%> : <%=messagesubject%> <%=sendingtime%></td>
</tr>
Here onNav function is :
function DoNav(theUrl)
{
document.location.href = theUrl;
}
So how to make it work according to requirement?
Also i want sendingtime of each row to be right aligned and subject to be center aligned in row.How to do this ?

You need to stop your checkbox click propagate to the parent TR
event.stopPropagation();
Also, you cannot have nothing in-front of a tr element but another tr element. Put your checkbox inside an tr inner td element.You also have a typo in your HTML callspan :) should be **colspan**
LIVE DEMO
<td colspan="3">John : "Hello" 10:00</td>
<td><input type="checkbox" onclick="DoRemove(event);"></td>
JS:
function DoNav(theUrl){
document.location.href = theUrl;
}
function DoRemove(e){
if (!e) e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
// Remove code here.
}
stopPropagation without jQuery

Element involuntarily toggles upon keyboard typing

I'm in the midst of creating my first 'real' website and try to add some responsiveness to my layout and navigation: www.dknytkom.dk/forside/
I use alot of addClass and removeClass to menu items as well as toggling corresponding to the width of the browser window. So far so good.
Problem is that my search field disappears upon focus when view on my iPhone. I have a vague suspicion it is to do when my jquery commands that make it go away when the document width is changed. But really I'm at a loss.
Also the toggling of the menu items tends to go awire when clicking on the menu elements even though I conditioned them to wait for the document to load. Any suggestions?
I've tried to create a jsfiddle from where the full code can be inspected:
$(document).ready(function() {
var $introbrowserwidth= $(window).width();
$soeg = $('a.soege-knap');
$mobnav = $('a.mob-nav');
$soegelist = $('div#search-table') ;
$searchtable = $('#search-table') ;
$soegefelt = $('ul.menu-item-holder > #searchfield');
$menuknap = $('li a.menu-knap');
$menu = $('div.menu')
$menulist = $('.menu li')
$emneoversigt = $('#emneoversigt')
$emneoversigtlistitem = $('#emneoversigt li')
$('.mob-nav').css('cursor','pointer');
$temamenu = $('#tema-menu');
if ($introbrowserwidth <=480) {
$soegelist.addClass('displaynone');
$soegefelt.addClass('displaynone');
$('#menudiv').removeClass('displayblock').addClass('displaynone');
$('#menudiv > ul').addClass('background-colour7 zebra');
$('#menudiv a').addClass('displayblock');
}
else{
$menulist.removeClass('listitem').addClass('inlineblock');
$menu.removeClass('displaynone').addClass('displayblock');
$soegefelt.removeClass('displaynone').addClass('inlineblock');
};
$soeg.on("click",function(e) {
e.preventDefault();
$soegelist.toggleClass('displayblock');
$soegefelt.toggleClass('displayblock');
$emneoversigt.removeClass().addClass('displaynone');
$soeg.toggleClass('soege-knap-aktiv');
$('#menudiv').removeClass('displayblock').addClass('displaynone');
$('#menudiv > ul').removeClass('background-colour7 zebra');
$menuknap.removeClass('menu-knap-aktiv');
$('ul.menu-item-holder').toggleClass('expandheight');
});
$menuknap.on("click",function(e) {
e.preventDefault();
var $menutilstand = $(window).width();
$menulist.addClass('padding5');
$menuknap.toggleClass('menu-knap-aktiv');
$soeg.removeClass('soege-knap-aktiv');
$soegelist.removeClass().addClass('displaynone');
$('ul.menu-item-holder').removeClass('height expandheight')
$('#menudiv > ul').addClass('background-colour7 zebra');
if($soeg.hasClass('soege-knap-aktiv')) {
$soeg.removeClass('soege-knap-aktiv');
$('ul.menu-item-holder').removeClass('height expandheight');
};
if ( ($menutilstand <=480) && ($('#menudiv').hasClass('displaynone')) ) {
$('#menudiv').removeClass('displaynone').addClass('displayblock');
$($menulist).removeClass('displayblock').addClass('padding5 listitem');
$soegefelt.removeClass('displayblock');
} else { $('#menudiv').removeClass('displayblock').addClass('displaynone');}
if ($('ul#menu-item-holder').hasClass('expandheight')){
$('ul#menu-item-holder').removeClass('expandheight').addClass('height')
}
});
$('#indexbtn').on("click",function(e) {
$('#emneoversigt').toggleClass('displayblock');
e.preventDefault(); })
$( window ).resize(function()
{
var browserwidth= $(window).width();
$emneoversigt.removeClass('listitem').addClass('displaynone');
$('.menu').removeClass('padding5');
$emneoversigt.removeClass('displayblock').addClass('displaynone');
$menuknap.removeClass('menu-knap-aktiv');
$('*').removeClass('height expandheight')
$('#menudiv > ul').removeClass('background-colour7 zebra');
$soeg.removeClass('soege-knap-aktiv');
if(browserwidth <= 480 ) {
$soegefelt.addClass('displaynone');
$temamenu.addClass('displaynone');
$soegelist.removeClass('inlineblock displayblock').addClass('displaynone');
$menu.addClass('displaynone');
$menulist.removeClass('inlineblock').addClass('listitem');
$('ul.menu-item-holder').removeClass('height');
$menulist.removeClass('listitem displayblock').addClass('displaynone');
$('#menudiv').removeClass('displayblock');
$('ul#menu-item-holder').addClass('height');
}
else { $('li#searchfield').removeClass().addClass('inlineblock');
$soegelist.removeClass('displaynone').addClass('inlineblock');
$menu.addClass('displayblock'); $temamenu.removeClass('displaynone'); $menulist.removeClass('listitem stroke displayblock ').addClass('padding5 inlineblock');
$('ul.menu-item-holder').addClass('height');
}
})
});

This is the div with your search:
<div id="search-table">
<span>
<form id="soege_form" action="<?=$grundsti;?>sider/soegning.php" method="post">
<input name="portal_id" type="hidden" value="<?=$valgt_portal_id;?>" />
<input placeholder="Søg i alle artikler" name="soegeterm" border="none" id="soegeterm" type="text" size="30" maxlength="100" class="loginfelter venstrefloat boxshadow" />
<button id="submit" style="cursor: pointer;" class="sendknap venstrefloat button_bg">Søg</button>
</form>
</span>
</div>
This is where you assign the div to the variable:
$soegelist = $('div#search-table') ;
This line makes it dissapear:
if ($introbrowserwidth <=480) {
$soegelist.addClass('displaynone');
...

Found out that when typing in the input it affected the width of the document and thus activating my js-resize functions.
Strange thing that it only did so on iOS though.
The solution was to add an !$('input:focus').length to the conditions, meaning as long as someone is using any form input the conditions for toggling are not met.
Problem now though is: how to distinguish between wanted and unwanted doc resizing?

Javascript/Jquery: Cannot target Sibling Node in Table

I have a function that hides/shows a table by clicking on it's header which is contained in a <thead> tag. When clicked the table hides and all that is left is the header, which, by clicking again, can un-hide the table.
I have multiple tables and would like to only have to use on function, instead of writing one for each table. To do this I am trying to pass the arguments (this,this.lastSibling). For some reason this.lastSibling is not targeting any object. I've tried every way of navigating the node tree I can think of, but I cannot target the tbody.
My Javascript/Jquery
function ToggleTable(trigger,target){
$(trigger).click(function(){
$(target).toggle();
ToggleTable(trigger,target)
});
}
My HTML
<table class="format2" >
<thead onmouseover="ToggleTable(this,this.lastSibling)">
<!--Title-->
</thead>
<tbody>
<!--Cells with information in here-->
</tbody>
<!--Note No TFooter Tag-->
</table>
<--Other tables similar to the one above-->
Thanks in advance!

I have a function that hides/shows a table by clicking on it's header which is contained in a <thead> tag. When clicked the table hides and all that is left is the header, which, by clicking again, can un-hide the table.
I'm lost in your current code. But If you want to toggle the visibility of the tbody (or the last child element in your <table> tag you could try this.
function ready() {
$('table > thead')
.each(function(e){
$(this).siblings(':last').hide();
})
.click(function(e) {
$(this).siblings(':last').toggle();
});
}
$(ready);
Live sample: http://bl.ocks.org/3078240

If you would like to try a solution that utilizes core JavaScript instead of jQuery shims, this might work for you. It's a function I quickly wrote that returns the last sibling that is an HTML element (e.g. not a text node) although you should be able to easily modify it to accept any node in the DOM:
function getLastSibling(el) {
var siblings, x, sib;
siblings = el.parentNode.children;
x = siblings.length;
while ((sib = siblings[x - 1]) && x >= 0) {
console.log(sib);
console.log(sib.nodeType);
if (sib.nodeType != 1 || sib.tagName == 'SCRIPT') {
x--;
} else {
return sib;
}
}
return null;
}

Assuming all your tables will have the class format2 .
Try this:
$("table.format2 > thead").click(function(){
$(this).next("tbody").toggle();
});
JSFiddle: http://jsfiddle.net/KcY4X/

JS (jQuery): Randomly trigger-click 2 table rows

Given this HTML:
<div id="TABLE1" class="tabs">
<table>
<tbody datasrc="Music">
<tr id="randomid">lorem</tr>
<tr id="foo">lorem</tr>
<tr id="abcde">lorem</tr>
<tr id="fghijk">lorem</tr>
<tr id="lmnop">lorem</tr>
<tr id="qwerty">lorem</tr>
</tbody>
</table>
</div>
<div id="TABLE_2" class="tabs">
<table>
<tbody datasrc="Music">
<tr id="random5">lorem</tr>
<tr id="farhaf">lorem</tr>
<tr id="haerf">lorem</tr>
<tr id="hagasdg">lorem</tr>
<tr id="hrfafh">lorem</tr>
<tr id="qwerty">lorem</tr>
</tbody>
</table>
</div>
<div id="LASTTABLE" class="tabs">
<table>
<tbody datasrc="Music">
<tr id="rtefdgag">lorem</tr>
<tr id="wrtjfd">lorem</tr>
<tr id="reaht">lorem</tr>
<tr id="aggag">lorem</tr>
<tr id="rthhre">lorem</tr>
<tr id="argarg">lorem</tr>
</tbody>
</table>
</div>
I am trying to trigger 2 <tr>'s from each table randomly. I cant even thing of the way doing this.
Currently for my test I use:
$("#button").on('click', function () {
$('#randomid').trigger('click')
})
but this trigger's only the first row from the first table.
So how can I:
When I press #button,
Get 2 random row's from each table, Trigger
click each row every 10 ms (so they have an order).
About the app:
It is a music player website. Each table has different style of music. Rock, Alternative, Jazz etc. There is a button 'randomly select music'). That button, will trigger 2 random tr's from each table so you end up with 2 jazz songs, 2 rock songs etc to be added to the playlist. The table looks something like this: http://dribbble.com/system/users/31916/screenshots/167289/k-dribble.png?1309036379 but those checkboxes are not actual checkboxes but images which change position on click to look and feel better than a checkbox and still act the same as a checkbox.
The user can trigger the 'checkbox' or choose a song by clicking anywhere on the row (logical), so the back-end is developed in a way to capture clicks anywhere on a row and not specificly the checkbox (thus I am not choosing to trigger those). I dont think there is a better solution that just trigger click randomly 2 row from each tble.
Support for IE8+.

See my version below,
DEMO
Note: Below code has some demo code and redundant vars which you can clean up, but I am leaving it there as to make the code look clear and self explanatory.
$(function() {
var $tables = $('table'); //gets the tree tables
var mQ = []; //music queue
var timer = null;
$('button').click(function () {
$('#result').html(''); //demo code
var t = 0, $tr;
var t1 = [];
$tables.each(function () {
$tr = $(this).find('tr');
t1[0] = Math.floor(Math.random()*$tr.length);
t1[1] = Math.floor(Math.random()*$tr.length);
while (t1[0] == t1[1]) { //To make sure not same row is selected
t1[1] = Math.floor(Math.random()*$tr.length);
}
mQ.push($tr.get(t1[0]));
mQ.push($tr.get(t1[1]));
});
timer = setInterval(function () {//Create timer to trigger click every 10ms
if (mQ.length == 0) {
clearInterval(timer);
return false;
}
$(mQ.shift()).click().addClass('selected');
}, 10);
});
$('tr').click(function () {
//do your magic
$('#result').append(this.id + '<br />');
});
});

I would first suggest that you do this a different way, but if you're set on triggering the click events here's the general idea.
$(".tab").each(function(){
var count = $(this).children(tr).length;
var r1 = Math.floor(Math.random()*count); //Get a random number less than the total count of rows
$(this).children('tr').eq(r1).trigger('click');//retrieve the nth (r1) item in the list and fire it's trigger event
});

Updated with new code on Fiddle too
Maybe more like this? ...
$(function() {
$("button").click(function(e) {
$(".selected").removeClass("selected");
$("table").each(function(i) {
var irand = {
a: Math.floor((Math.random()*($(this).find("tr").length)-1)+1),
b: undefined
};
while (irand.b == irand.a || irand.b == undefined) {
irand.b = Math.floor((Math.random()*($(this).find("tr").length)-1)+1);
};
console.log($(this).find("tr").filter(function(i) { return i == irand.a || i == irand.b }).addClass("selected"));
});
});
});​
See working fiddle here ...