HTML+JS+CSS to realize student information management system

HTML+JS+CSS to realize student information management system

Effect

If you don't speak much, you can directly see the effect. This code is complex. I hope you can read it patiently. If you don't understand it, you can comment or email me (1079349989@qq.com).
The full code can also be found in my GitHub, GitHub link here

page

increase

Click the Add button to pop up the following new student information input frame, input the content, click submit to return to the initial page, and write the content into the table; click Cancel to directly return to the initial page, the effect is as follows

When the number of data items to be added exceeds the number of display items (10 items) selected on the initial page, add again. When on the first page, do not continue to display any more. Click next page, and then add again to continue to display the added content. The effect is as follows

Delete

Select the box at the front of each line, and then click Delete to open the following student information frame to be deleted. Click OK to delete the selected line, and the following line will be filled up automatically, and the sequence number column will also be changed automatically. Click Cancel to return to the initial page directly, and the effect is as follows:


Click the box on the title line to select all the ten pieces of data on the page. Click Delete to delete all the data on the page. The effect is as follows

change

Click the last modification button of each line to open the following modification student information frame. Click Save to replace the original data of this line with the modified data. Click Cancel to directly return to the initial page. The effect is as follows

check

Click the view button at the end of each line to open the following view student information frame. At this time, the data can not be changed, but can only be viewed. Click Cancel to return to the initial page. The effect is as follows

Page turning

When you click the previous button on the home page, you will be prompted that the current page is the first page, and you cannot turn the previous page
When ending the page, click the next page button, and a prompt will pop up indicating that the current page is the last page, and the page cannot be turned back
You can turn the page normally. The effect is as follows

Code

Only part of JavaScript code is shown here. The complete code can be extracted in my GitHub, GitHub link here

Data increase - add.js:

// New button
function add() {
    // Open new frame
    document.getElementById('addBlock').style.display = 'block';
    document.getElementById('totalBackground').style.display = 'block';
}

// Submit button
function sumbit() {
    // Close new frame
    document.getElementById('addBlock').style.display = 'none';
    document.getElementById('totalBackground').style.display = 'none';

    // Writing form
    // Access table
    var iTable = document.getElementById('myTable');
    // Get input value
    var stuId = document.getElementById('stuId1').value;
    var name = document.getElementById('name1').value;
    var colg = document.getElementById('colg1').value;
    var profession = document.getElementById('profession1').value;
    var grade = document.getElementById('grade1').value;
    var stuClass = document.getElementById('stuClass1').value;
    var age = document.getElementById('age1').value;
    var nums = iTable.rows.length;

    // Create a row tr
    var iTr = document.createElement('tr');

    // Interlacing
    if (nums % 2 != 0)
    {
        iTr.className = 'mainTbodyTr1';
    }
    else {
        iTr.className = 'mainTbodyTr2';
    }

    // Add tr to table
    iTable.appendChild(iTr);

    // Create selection button
    var sel = document.createElement('input');
    sel.setAttribute('type','checkbox');
    sel.setAttribute('name','item');

    // Create cell td and add properties and contents
    var iTd1 = document.createElement('td');
    iTd1.className = "col1";
    iTd1.appendChild(sel);
    var iTd2 = document.createElement('td');
    iTd2.className = "col2";
    iTd2.appendChild(document.createTextNode(nums));
    var iTd3 = document.createElement('td');
    iTd3.className = "col3";
    iTd3.appendChild(document.createTextNode(stuId));
    var iTd4 = document.createElement('td');
    iTd4.className = "col4";
    iTd4.appendChild(document.createTextNode(name));
    var iTd5 = document.createElement('td');
    iTd5.className = "col5";
    iTd5.appendChild(document.createTextNode(colg));
    var iTd6 = document.createElement('td');
    iTd6.className = "col6";
    iTd6.appendChild(document.createTextNode(profession));
    var iTd7 = document.createElement('td');
    iTd7.className = "col7";
    iTd7.appendChild(document.createTextNode(grade));
    var iTd8 = document.createElement('td');
    iTd8.className = "col8";
    iTd8.appendChild(document.createTextNode(stuClass));
    var iTd9 = document.createElement('td');
    iTd9.className = "col9";
    iTd9.appendChild(document.createTextNode(age));
    var iTd10 = document.createElement('td');
    iTd10.className = "col10";
    var examine = document.createElement('input');
    examine.id = 'examine';
    examine.setAttribute('type','button');
    examine.setAttribute('value','See');
    examine.setAttribute('onclick','examine(this)');
    var update = document.createElement('input');
    update.id = 'update';
    update.setAttribute('type','button');
    update.setAttribute('value','modify');
    update.setAttribute('onclick','update(this)');
    iTd10.appendChild(examine);
    iTd10.appendChild(update);

    // Add cells to row
    iTr.appendChild(iTd1);
    iTr.appendChild(iTd2);
    iTr.appendChild(iTd3);
    iTr.appendChild(iTd4);
    iTr.appendChild(iTd5);
    iTr.appendChild(iTd6);
    iTr.appendChild(iTd7);
    iTr.appendChild(iTd8);
    iTr.appendChild(iTd9);
    iTr.appendChild(iTd10);

    // Initialize the value of the input box in the new frame
    document.getElementById('stuId1').value = null;
    document.getElementById('name1').value = null;
    document.getElementById('colg1').value = null;
    document.getElementById('profession1').value = null;
    document.getElementById('grade1').value = null;
    document.getElementById('stuClass1').value = null;
    document.getElementById('age1').value = null;

    document.getElementById('nums').innerText = nums;

    var pageNum = document.getElementById('pageNum').innerText;
    pageNum = parseInt(pageNum);
    for (var i=10*pageNum+1; i<=nums; i++) {
        iTable.rows[i].style.display = 'none';
    }
}

// Cancel button in adding
function addCancel() {
    // Close new frame
    document.getElementById('addBlock').style.display = 'none';
    document.getElementById('totalBackground').style.display = 'none';
}

Data deletion - del.js:

// All election
function checkAll(obj){
    var status = obj.checked;
    var items = document.getElementsByName('item');
    var pageNum = document.getElementById('pageNum').innerText;
    pageNum = parseInt(pageNum);
    for (var i=(pageNum-1)*10; i<pageNum*10; i++) {
        items[i].checked=status;
    }
}

// Delete button
function del() {
    // Open delete frame
    document.getElementById('delBlock').style.display = 'block';
    document.getElementById('totalBackground').style.display = 'block';

    var items = document.getElementsByName('item');
    var message = [];
    for(var j=0;j<items.length;j++){
        if(items[j].checked) //If item is selected
        {
            var m = items[j].parentNode.parentNode.cells[3].innerText;
            message.push(m);
        }
    }

    var delNode = document.getElementById('delMessage');
    delNode.innerText = message.join('\t');
}

// confirm button
function confirm() {
    // Close delete frame
    document.getElementById('delBlock').style.display = 'none';
    document.getElementById('totalBackground').style.display = 'none';

    var items = document.getElementsByName('item');
    var items_num = 0;
    for(var j=0;j<items.length;j++){
        if(items[j].checked)//If item is selected
        {
            items_num += 1;
            items[j].parentNode.parentNode.remove();
            j--;
        }
    }

    var iTable = document.getElementById('myTable');
    var iTrs = iTable.getElementsByTagName('tr');
    for (var i=1; i<iTrs.length; i++) {
        if (i % 2 != 0)
            iTrs[i].className = 'mainTbodyTr1';
        else
            iTrs[i].className = 'mainTbodyTr2';
        var sort = iTrs[i].getElementsByTagName('td')[1];
        sort.innerText = i;
    }

    var nums = iTrs.length - 1;
    document.getElementById('nums').innerText = nums;
    nums = parseInt(nums);
    var pageSum = Math.ceil(nums / 10);
    var pageNum = document.getElementById('pageNum').innerText;
    pageNum = parseInt(pageNum);

    if (pageNum <= pageSum) {
        for (var i=(pageNum-1)*10+1; i<pageNum*10+1; i++) {
            iTable.rows[i].style.display = 'table-row';
        }
        for (var i=1; i<(pageNum-1)*10+1; i++) {
            iTable.rows[i].style.display = 'none';
        }
        for (var i=pageNum*10+1; i<nums+1; i++) {
            iTable.rows[i].style.display = 'none';
        }
    }
    if (pageNum > pageSum) {
        for (var i=(pageNum-2)*10+1; i<nums+1; i++) {
            iTable.rows[i].style.display = 'table-row';
        }
        for (var i=1; i<(pageNum-2)*10+1; i++) {
            iTable.rows[i].style.display = 'none';
        }
        document.getElementById('pageNum').innerText = pageNum - 1;
    }
}

// Cancel button in delete
function delCancel() {
    // Close delete frame
    document.getElementById('delBlock').style.display = 'none';
    document.getElementById('totalBackground').style.display = 'none';
}

difficulty

Difficulty 1

How to write the data in the input box to the table.
Question 1: get input data

var stuId = document.getElementById('stuId1').value;
var name = document.getElementById('name1').value;

Get the data in the input box through document.getElementById('object').value
Question 2: write data to table

var iTr = document.createElement('tr');

Create tr label, i.e. create CCB

var iTd1 = document.createElement('td');
iTd1.className = "col1";
iTd1.appendChild(sel);

Create td label, that is, create cell and add data to cell

iTable.appendChild(iTr);
iTr.appendChild(iTd1);

Add row to table, cell to row

Difficulty 2

Select all. How to select only all data of the current page.
Question 1: select all

<input type="checkbox" onclick="checkAll(this)"/>

It has a checked attribute that can determine whether it is selected or not.
Click this < input > to keep the same checked attribute for all columns on this page, and then select all.
Question 2: select only the current page
First, you need to get the current page. Then, since each page is set to display only 10 pieces of content, and the current page number is set to page, there are the following rules

  1. The number of starting entries on the current page is (page-1)*10+1, for example, on page 1, the number of starting entries is (1-1) * 10 + 1 = 1; on page 2, the number of starting entries is (2-1) * 10 + 1 = 11
  2. The ending number of the current page is page*10, for example, on page 1, the ending number is 1 * 10 = 10; on page 2, the ending number is 2 * 10 = 20

In this way, you can only select all the data of the current page.

Difficulty 3

After deletion, it needs to be supplemented.
Question: after deletion, whether there is data on this page, and whether page skipping is required
You can get the total number of rows after deletion. Set the total number of rows as rows, with the following rules

  1. Divide rows by 10 and round it up to get the total number of pages. Set the total number of pages as sumpages
  2. If the current page number is greater than the total pages sumpages, it means that the current data has been less than the amount of data that the current page number page should have, so you need to skip to the previous page
  3. If the current page number is less than the total pages sumpages, it means that the current data supports the amount of data that the current page should have, and you only need to continue to display the data of this page

Difficulty 4

Turn the page and judge the first or last page.

The first page is simple. You only need to take the data page of the current page. If page == 1, it means it is on the first page;
For the last page, the solution has been mentioned in difficulty 3, that is, if page == sumpages, it means in the last page.

epilogue

There are comments in the code. I hope you can read it patiently. If you don't understand anything else, please contact me through comments or email (1079349989@qq.com).

Finally, I hope you will succeed in your study and career. Thank you!

Published 20 original articles, won praise 22, visited 10000+
Private letter follow

Tags: github Attribute less Javascript

Posted on Fri, 21 Feb 2020 10:23:27 -0500 by Copernicus