Scribd
Upload
5 views

JSONArray-4

The document is an HTML page containing a JavaScript application for managing student data. It allows users to input student information, calculate total marks, percentage, and grade, and display the data in a table format. The application also includes a dropdown for selecting cities and uses an array to store and display student records.

Uploaded by

priticsonwane22
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

JSONArray-4

The document is an HTML page containing a JavaScript application for managing student data. It allows users to input student information, calculate total marks, percentage, and grade, and display the data in a table format. The application also includes a dropdown for selecting cities and uses an array to store and display student records.

Uploaded by

priticsonwane22
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>

<script>
let students = [];
let cities = [{ "Cityid": 1, "CityName": "Pune" },
{ "Cityid": 2, "CityName": "Mumbai"},
{ "Cityid": 2, "CityName": "Surat" },
{ "Cityid": 4, "CityName": "Solapur" },
{ "Cityid": 5, "CityName": "Nagpur" }];

function Calculate() {

let r = document.getElementById("txtrno").value;
let n = document.getElementById("txtname").value;
let e = Number(document.getElementById("txtenglish").value);
let m = Number(document.getElementById("txtmaths").value);
let s = Number(document.getElementById("txtscience").value);
let total = e + m + s;
let per = (total / 3).toFixed(2);// for 2 numbers after decimal
let grade = "Fail";

if (per > 35) {


grade = "Pass";
}

document.getElementById("txttotal").value = total;
document.getElementById("txtpercentage").value = per;
document.getElementById("txtgrade").value = grade;
}

function FillCities() {
let data = "<option selected disabled>Select City</option>";
for (let i = 0; i < cities.length; i++) {
data += "<option>" +cities[i].CityName + "</option>";
}
console.log(data);
document.getElementById("ddcity").innerHTML = data;

function AddData() {

let r = document.getElementById("txtrno").value;
let n = document.getElementById("txtname").value;
let e = Number(document.getElementById("txtenglish").value);
let m = document.getElementById("txtmaths").value;
let s = document.getElementById("txtscience").value;
let total = document.getElementById("txttotal").value;
let per=document.getElementById("txtpercentage").value;
let grade = document.getElementById("txtgrade").value;
let city = document.getElementById("ddcity").value;

let st = { "rno": r, "name": n, "english": e, "maths": m, "science": s,


"total": total, "percentage": per, "grade": grade,"City":city};
students.push(st);
console.log(students);
DisplayData();

function DisplayData() {

let data = "";


for (let i = 0; i < students.length; i++) {

data += "<tr><td>" + students[i].rno + "</td><td>" +


students[i].name
+ "</td><td>" + students[i].english + "</td><td>" +
students[i].maths
+ "</td><td>" + students[i].science + "</td><td>" +
students[i].total
+ "</td><td>" + students[i].percentage + "</td><td>" +
students[i].grade
+ "</td><td>" + students[i].City + "</td></tr>"
}
document.getElementById("tbldata").innerHTML = data;
}

</script>
</head>
<body onload="FillCities()">

<table border="1">
<thead>
<tr>
<th>Rollno</th>
<td><input type="text" id="txtrno" /></td>
</tr>
<tr>
<th>Name</th>
<td><input type="text" id="txtname" /></td>
</tr>
<tr>
<th>English</th>
<td><input type="text" id="txtenglish" onchange="Calculate()"
/></td>
</tr>
<tr>
<th>Maths</th>
<td><input type="text" id="txtmaths" onchange="Calculate()" /></td>
</tr>
<tr>
<th>Science</th>
<td><input type="text" id="txtscience" onchange="Calculate()"
/></td>

</tr>
<tr>
<th>Total</th>
<td><input type="text" id="txttotal" readonly/></td>

</tr>
<tr>
<th>Percentage</th>
<td><input type="text" id="txtpercentage" readonly/></td>

</tr>
<tr>
<th>Grade</th>
<td><input type="text" id="txtgrade" readonly /></td>

</tr>
<tr>
<th>City</th>
<td>
<select id="ddcity">
<option selected disabled>Select City</option>
</select>
</td>
</tr>

<tr>
<td><input type="button" value="Submit" onclick="AddData()" /></td>
</tr>
</thead>
</table>

<hr />

<table border="1">
<thead>
<tr>
<th>Rollno</th>
<th>Name</th>
<th>English</th>
<th>Maths</th>
<th>Science</th>
<th>Total</th>
<th>Percentage</th>
<th>Grade</th>
<th>City</th>
</tr>
</thead>
<tbody id="tbldata"></tbody>
</table>
</body>
</html>

You might also like