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
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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