akbkhome

Tablular Forms

A Tabular form, that grows and doesnt need messing around with tables

 
 

Source

<style>
div.container {

width: 320px;
}


div.container label {
width: 150px;
padding: 5px;
float: left;
}

div.container label.row0 {
width: 150px;
padding: 5px;
float: left;
background-color: #cccccc;
}


div.container label.row1 {
width: 150px;
padding: 5px;
float: left;
background-color: #ffffff;
}

div.spacer {
clear: both;
}



</style>

<script type="text/javascript">

//<!--
function highlightDiv()
{

var tables=document.getElementsByTagName('div');
for (var t = 0; t < tables.length; t++) {

if (! ((tables[t].getAttribute('class') == 'container') ||
(tables[t].className == 'container')) )
{
continue;
}

oElements = tables[t].childNodes;
var e=0;
for (i=1; i < oElements.length;i++) {
try {
if (oElements[i].getAttribute("class")) {
continue;
}
// alert('got ' + oElements[i].nodeName);
// IE hack
oElements[i].className = ((e % 4) < 2) ? 'row1' : 'row0';
e++;
oElements[i].setAttribute("class", (((e-1) % 4) < 2) ? 'row1' : 'row0');

} catch (e) {
//alert(e);
// skip element that dont have attributes
}
}
}
}

//-->
</script>



<div class="container">

<div class="spacer"> &nbsp; </div>


<label for="cbx1"> Check box 1
<input id="cbx1" name="cbx1" value="1" type="checkbox">
</label>
<label for="cbx2"> Check box 2
<input id="cbx2" name="cbx2" value="2" type="checkbox">
</label>

<label for="cbx3">Check box 3
<input id="cbx3" name="cbx3" value="3" type="checkbox">
</label>

<div class="spacer"> &nbsp; </div>

</div>
<script type="text/javascript"> highlightDiv(); </script>

Add a comment (requires javascript!)

Name
Email
Homepage
Comment
 

Edit Document | Create Page:
Contact me at alan@akbkhome.com | Manage