Friday, 8 November 2013

JavaScript and Tables

As I have said I'll be back soon so this the codes of table and javascript

Program Code:(Main)
<html>
<head>
<title>Sample Programs</title>
<style type="text/css">
table{border:solid 1px green;background-color:aqua;}
th{background-color:gray;}
td{padding:10px;}
</style>
</head>
<body>
<h2>Introduction about Tables, JavaScript</h2>

<table><caption>Details of students</caption>
<th>Name</th>
<th>Branch</th>
<th>Marks</th>
<tr>
<td>John</td>
<td>CSE</td>
<td>87</td>
</tr>
<tr>
<td>David</td>
<td>Mechanical</td>
<td>89</td>
</tr>
<tr>
<td>Savita</td>
<td>Electronics</td>
<td>80</td>
</tr>
<tr>
<td>Surya</td>
<td>Electronics</td>
<td>50</td>
</tr>
<tr>
<td>Salman</td>
<td>Civil</td>
<td>83</td>
</tr>
</table>
<br/>
<iframe src="JavaS1.html" width="500" height="200" name="framedpage"></iframe>
<iframe src="JavaS2.html" width="500" height="200" name="framedpage"></iframe>
</body>
</html>


Save as JavaS1.html
<html>
<head>
</head>
<body>
<script type="text/javascript">
function changeThis(){
var formInput = document.getElementById('theInput').value;
document.getElementById('newText').innerHTML = formInput;
}
</script>
<p>You wrote: <span id='newText'></span> </p> 

<input type='text' id='theInput' placeholder="Write Here" size="40" /><br/>
<input type='button' onclick='changeThis()' value='See what you wrote'/>
</body>
</html>


Save as JavaS2.html
<html>
<head>
</head>
<body>
<script type="text/javascript">
var day="4";
switch(day)
{
case "1":
document.write("Monday");
break;
case "2":
document.write("Tuesday");
break;
case "3":
document.write("Wednesday");
break;
case "4":
document.write("Thrusday");
break;
case "5":
document.write("Friday");
break;
case "6":
document.write("Saturday");
break;
case "7":
document.write("Sunday");
break;
default:
document.write("Invalid Input");
break;
}

</script>


</body>
</html>

No comments:

Post a Comment