27.10.2015 Views

AJAX and PHP

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Client-Side Techniques with Smarter JavaScript<br />

40<br />

<br />

<br />

<br />

<br />

Product Name<br />

<br />

<br />

<br />

<br />

Airplane<br />

<br />

<br />

<br />

<br />

Big car<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

3. Create a file called csstest.js <strong>and</strong> write the following code in it:<br />

// Change table style to style 1<br />

function setStyle1()<br />

{<br />

// obtain references to HTML elements<br />

oTable = document.getElementById("table");<br />

oTableHead = document.getElementById("tableHead");<br />

oTableFirstLine = document.getElementById("tableFirstLine");<br />

oTableSecondLine = document.getElementById("tableSecondLine");<br />

// set styles<br />

oTable.className = "Table1";<br />

oTableHead.className = "TableHead1";<br />

oTableFirstLine.className = "TableContent1";<br />

oTableSecondLine.className = "TableContent1";<br />

}<br />

// Change table style to style 2<br />

function setStyle2()<br />

{<br />

// obtain references to HTML elements<br />

oTable = document.getElementById("table");<br />

oTableHead = document.getElementById("tableHead");<br />

oTableFirstLine = document.getElementById("tableFirstLine");<br />

oTableSecondLine = document.getElementById("tableSecondLine");<br />

// set styles<br />

oTable.className = "Table2";<br />

oTableHead.className = "TableHead2";<br />

oTableFirstLine.className = "TableContent2";<br />

oTableSecondLine.className = "TableContent2";<br />

}<br />

4. Finally create the CSS file, styles.css:<br />

.Table1<br />

{<br />

border: DarkGreen 1px solid;<br />

background-color: LightGreen;<br />

}<br />

.TableHead1<br />

{<br />

font-family: Verdana, Arial;<br />

font-weight: bold;<br />

www.it-ebooks.info

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!