Question

我必须为学校项目创建一个考勤应用程序。

我只允许使用HTML，CSS和JavaScript

这是我添加学生的HTML

<!DOCTYPE html> 
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="function.js"></script>
</head>
<header>
    <nav>
        <img src="logo.jpg"><h1 id="titt">North Park Clubs</h1>
    <li><a href="attendance.html">Attendance</a></li>
    </nav>
</header> 
<body>
<h1>Add A Student</h1>
    <input type="text" id="sFirstName"></input>
    <input type="text" id="sLastName"></input>
    <input type="text" id="sNumber"></input>
    <input type="text" id="sPoints"></input>
    <input type="button" onclick="save()" value="Save"></input>
</body>

我需要从所有输入中获取信息，将其作为对象中的数组保存在本地数据库中，我需要它出现在我的考勤页面上。

以下是我的考勤页面的HTML。

<!DOCTYPE html> 
<head>
<link href="style.css" rel="stylesheet" type="text/css">
    <script src="function.js"></script>
</head>
<header>
    <nav>
        <img src="logo.jpg"><h1 id="titt">North Park Clubs</h1>
    <li><a href="attendance.html">Attendance</a></li>
    </nav>
</header>   
<body onload="loadTable()">
<table id="attendance">
    <input type="button" value="Add Student" id="add" link="addStudent.html">

       <tr>
    <td></td>
    <td>First Name</td>
    <td>Last Name</td>  
    <td>Student Number</td>
    <td>Points</td>
           <td>Absent (If student is present leave this unchecked)</td>
           <input id="save" onclick="att()" type="button">
        </tr>
    <td id="indx"></td>
    <td id="sFirstName"></td>
    <td id="sLastName"></td>
    <td id="sNumber"></td>
    <td id="sPoints"></td>
    <td><input id="a" type="checkbox"></td>
       </table>
</body>

这是我的两个页面的JavaScript。

我不知道我所做的事情是否正确。

/* Name  
   Class Code
   Date
   MyClubs, Version 1
   A web app that allows teachers to monitor the clubs that they are a part of.  
*/

//sets the index varriable to 1
var index = 0;
var indx = [];
var sFirstName = [];
var sLastName = [];
var sNumber = [];
var sPoints = [];
var sFirstName = [];
function save() {
    (index = index++;
    localStorage[0].setItem("fName", JSON.stringify(sFirstName));
    index = index + 1;
    localStorage[0].setItem("lName", JSON.stringify(sLastName));
    index = index + 1;
    localStorage[0].setItem("numb", JSON.stringify(sNumber));
    index = index + 1;
    localStorage[0].setItem("pts", JSON.stringify(sPoints));
    index = index ++ ;) {
    //sets text from input to var x from "usernameStudent       
    var v = document.getElementById("indx").value;
    var w = document.getElementById("sFirstName").value;
    var x = document.getElementById("sLastName").value;
    var y = document.getElementById("sNumber").value;
    var z = document.getElementById("sPoints").value;
    //identify studentInfo as the values of v, w, x, y and z
   // var studentInfo = [v, w, x, y, z]
    //sets the paragraph "student info" to display var x and y    
}
var studentInfo = {
    indx: document.getElementById("indx").value;
    fName: document.getElementById("sFirstName").value;
    lName: document.getElementById("sLastName").value;
    numb: document.getElementById("sNumber").value;
    pts: document.getElementById("sPoints").value
}
    document.getElementById("attendance").innerHTML = "studentInfo";

for (var index = 0; index < studentInfo.length; index ++){
        row = table.insertRow(index+1);
        cell1 = row.insertCell(0);
        cell2 = row.insertCell(1);
        cell3 = row.insertCell(2);
        cell4 = row.insertCell(3);
        cell5 = row.insertCell(4);
        cell6 = row.insertCell(5);

        cell1.innerHTML = studentInfo[index].firstName + "" + studentInfo[index].lastName;
        cell2.innerHTML = studentInfo[index].studentNumber;

    function save(){
    index = index++;
    localStorage[0].setItem("fName", JSON.stringify(sFirstName));
    index = index + 1;
    localStorage[0].setItem("lName", JSON.stringify(sLastName));
    index = index + 1;
    localStorage[0].setItem("numb", JSON.stringify(sNumber));
    index = index + 1;
    localStorage[0].setItem("pts", JSON.stringify(sPoints));
    index = index + 1;
}

function loadTable() {  //this function takes values from the text box and stores them in an array
    indx [index] = document.getElementById("indx").value;
    index = index + 1;

    sFirstName[index] = document.getElementById("sFirstName").value;
    index = index + 1;

    sLastName[index] - document.getElementById("sLastName").value;
    index = index + 1;

    sNumber[index] = document.getElementById("sNumber").value;
    index = index + 1;

    sPoints[index] = document.getElementById("sPoints").value;
    index = index + 1;


}

出勤App JS

0 个答案: