ness assignment
HTML
<div class = "container">
<div class = "tableHead" >
<div>
<form name = "tb_rowAdd">
<div class = "inputSec">
<div>Type</div>
<select name = "tb_type">
<option value = "0">Select a type</option>
<option value = "New">New</option>
<option value = "Used">Used</option>
<option value = "Certified">Certified</option>
</select>
</div>
<div class = "inputSec">
<div>Make</div>
<input type = "text" name = "tb_make"/>
</div>
<div class = "inputSec">
<div>Model</div>
<input type = "text" name = "tb_model"/>
</div>
<div class = "lastAddCell"> <div style = "margin-bottom:3px;height:20px;"> </div>
<input title = "Add" type = "button" name = "tb_add" value = "+" id="tb_add" class = "addButton"/>
</div>
</form>
</div>
<hr/>
<div >
<div class = "searchContainer" >
<div class = "searchOverlay" >
<input type = "text" id = "tb_search" />
<img class = "searchIcon" src = "http://www.felton.com.au/blog/images/search.gif" id = "tb_search_img" />
</div>
</div>
</div>
</div>
<table cellspacing="0">
<tbody id = "tb_body">
</tbody>
</table>
<div class = "lastAddCell" style = "float:right;margin-right:10px;">
<input title = "JSON" type = "button" value = "JSON" id="tb_json" class = "addButton"/>
</div>
</div>
CSS
body {
font-size:12px;
line-height:20px;
}
.container {
width:540px;
margin:auto;
overflow:hidden;
}
.tableHead {
background: -webkit-linear-gradient( #FFF, #CCCCFF ); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient( #FFF, #CCCCFF ); /* For Opera 11.6 to 12.0 */
background: -moz-linear-gradient( #FFF, #CCCCFF ); /* For Firefox 3.6 to 15 */
background: linear-gradient( #FFF, #CCCCFF ); /* Standard syntax */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#CCCCFF',GradientType=0 ); /*For ie 8-9*/
border:1px solid #CCCCFF;
border-top-left-radius:8px; /* To give rounded corners, works above IE 8*/
border-top-right-radius:8px;
height:140px;
width:100%;
}
.tableHead > div {
overflow:hidden;
width:100%;
}
.inputSec {
width:135px;
float:left;
margin:10px 0px 10px 15px;
height:54px;
overflow:hidden;
padding:2px;
}
.inputSec > div {
margin-bottom:3px;
}
input {
border:1px solid #CCCCFF;
border-radius:4px;
padding:3px 3px 3px 6px;
}
select {
padding:2px;
}
input[type=button] {
color:white;
background: -webkit-linear-gradient( #8B8B8C, #474648 ); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient( #8B8B8C, #474648 ); /* For Opera 11.6 to 12.0 */
background: -moz-linear-gradient( #8B8B8C, #474648 ); /* For Firefox 3.6 to 15 */
background: linear-gradient( #8B8B8C, #474648 ); /* Standard syntax */
min-width:50px;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8B8B8C', endColorstr='#474648',GradientType=0 ); /*For ie 8-9*/
}
.inputSec > input , .inputSec > select {
width:90%;
}
.tableHead > hr {
margin:15px 0px;
color:#F8F1FF;
border-width:1px;
clear:both;
width:510px;
margin:auto;
}
#tb_body > tr > td {
width:172px;
text-align:left;
padding:3px;
border: 1px solid #CCCCFF;
font-size: 14px;
}
#tb_body > tr, table {
border: 1px solid #CCCCFF;
}
.lastAddCell {
...
JavaScript
/*--------------------------Compatibilty Section----------------------------------------*/
//this section adds code for cross browser compatibility
//event handler code added on window object to make the events compatible with mozilla and IE
if (document.addEventListener) {
this.addEvent = function (elem, type, fn) {
elem.addEventListener(type, fn, false);
return fn;
};
}
else
if (document.attachEvent) {
this.addEvent = function (elem, type, fn) {
var bound = function () {
return fn.apply(elem, arguments);
};
elem.attachEvent("on" + type, bound);
return bound;
};
}
this.addHtml = function () {
}
/*--------------------------Declaration Section----------------------------------------*/
//tb is the nameSpace
var tb = {
formHandler : function () {
var type = document.forms.tb_rowAdd.tb_type;
var make = document.forms.tb_rowAdd.tb_make;
var model = document.forms.tb_rowAdd.tb_model;
//first we start with validations
if ( tb.formValidator(type,make,model) ) {
var newRow = new tb.CarMeta ( type.value,make.value,model.value );
tb.rowCollection [ tb.rowCollection.length ] = newRow;
var rowCount = tb.tabBody.rows.length;
var row = tb.tabBody.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = type.value;
var cell2 = row.insertCell(1);
cell2.innerHTML = make.value;
var cell3 = row.insertCell(2);
...