markdown HTML.CSS.JS.Table / EdX的W3Cx JavaScript入门课程/

Posted 2021-05-05

/*****************************************/
/*****************************************/
/*****************************************/
/**************LAYOUTS*******************/
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

html, body {
    width: 100%;
}


/*********FORM***********/

form {
    width: 100%;
    margin-top: 20px;
    padding: 15px;
}

fieldset {
    padding: 10px;
}

input {
    width: 200px;
}

input[type="number"]{
    width: 50px;
}

input[type="submit"]{
    margin-top: 15px;
    height: 30px;
    border: none;
}

#name-not-found {
    display: none;
}


@media only screen and (min-width: 768px) {
    .forms-container {
        width: 100%;
        padding: 0px 20px;
    }
    form {
        width: 380px;
        float: left;
        
    }
    #form-name {
        float: right;
    }
    fieldset#optionsFieldset {
        width: 100%;
    }
    fieldset#searchFieldset {
        width: 100%;
        float: left;
    }
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }
    input[type="submit"]{
        width: 60px;
        float: none;
        position: relative; 
        left: 50%;
        transform: translateX(-50%);
    }
}

/********tABLE**********/
table {
    width: 90%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
}


caption, th {
    padding: 20px;
}

td {
    padding: 10px;
}


/***********************************/
#previous, #next {
    display: none;
    width: 100px;
    height: 30px;
}

#previous {
    float: left;
    margin-left: 5%;
}

#next {
    float: right;
    margin-right: 5%;
}

#pageNumberSection {
    display: inline-block;
    height: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.btnPageNum {
    height: 30px;
    padding: 3px;
}

/*****************************************/
/*****************************************/
/*****************************************/
/**************STYLES*******************/


table, tr, th, td {
    border: 1px solid #ffffff;
    border-collapse: collapse;
}

th {
    background-color: #11ffd7;
}

td{
    text-align: center;
}

#table tr:nth-child(even){
    background-color: #f2f2f2;
}

#table tr:hover {
    background-color: #ddd;
}


/**********FORM************/

form {
    border: 1px solid black;
    border-radius: 20px;
}

.buttonMain{
    background-color: #11c7ff;
    border-radius: 20px;
    color: #ffffff;
}

.buttonMain:hover{
    background-color: #1180ff;
}

#name-not-found {
    color: red;
}

/*****************************/

.btnPageNum {
    background: none !important;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.btnPageNum.active {
    color: #1180ff;
}

/*****************************/

.activeRow {
    border: 2px solid #ff0000;
}

var table;

var tableRows;

var sectionForPageNumbers
var manyPages = false;

var nameFinded = false;
var activeRow;

var names = ["Abdiel", "Abiel", "Abilene", "Abrianna", "Abrielle", "Acelynn", "Achilles", "Adabella", "Adagio", "Adair", "Adalia", "Adalira", "Adalyn", "Adalynn", "Adaya", "Addie", "Addy",
"Adele", "Adelie", "Adelle", "Adelyn", "Aderes", "Adie", "Adina", "Adler", "Admetus", "Adoniah", "Adria", "Adriaan", "Adrianne", "Adrina", "Baara", "Cabernet", "Cable", "Cache", "Cactus", "Cade", "Cadee", "Cadelaria", "Caden", "Cadence", "Cadenza", "Cadewyn", "Cadhla",
"Dabney", "Dacey", "Dacia", "Dacian", "Daemyn", "Daenerys", "Daffodil", "Dafydd", "Dagan", "Dagmar", "Dagny", "Dagon", "Dahl",
"Dahlia", "Dai", "Daichi", "Daijiro", "Daiki", "Daire", "Daishiro", "Daisuke", "Daisy", "Daitaro",
 "Ea", "Eadoin", "Eamon", "Ean", "Eara", "Earl", "Earleen", "Earlene", "Early", "Earnest", "Easter", "Easton", 
 "Eastwood", "Eavan", "Ebba", "Ebbe", "Eben", "Ebenezer", "Ebony", "Ece", "Echo"];

var lastNames = ["Adler", "Anderson", "Bardot", "Becker", "Beckett", "Cohen", "Coleman", "Copeland", "Davis", "Delaney", "Devlin", "Dixon", "Duncan", "Ellis", "Finley", "Gibbs", "Griffin", "Hendrix", "Hepburn", "Hutton"];

var cities = ["Palos Verdes Estates", "Los Altos Hills", "Mill Valley", "Kensington", "Hillsborough", "Monte Sereno", "Solana Beach",
 "Rolling Hills Estates", "Danville", "Sleepy Hollow", "San Ramon", "Saratoga", "Tiburon", "Palo Alto", "Rolling Hills CDP",
  "Manhattan Beach", "Hidden Hills", "Atherton", "Ladera Ranch", "Kentfield", "Montecito", "Los Gatos"];

var addresses = ["31 Prairie St.", "55 Fairway Avenue", "252 High Ridge St.", "El Monte, CA 91732", "21 Vale Ave.",
   "399 Third St.", "821 Rockland Dr.", "10 St Paul Ave.", "88 Branch Drive", "914 Roosevelt St."]

var arrayPersons = [];
var nextButton;
var previousButton;


var tableRows;
var currentPage;

var nameToSearch;


class Person {
    constructor(){
        this.number = Person.nbPersonsCreated + 1;
        this.firstName = getRandomIndexElement(names);
        this.lastName = getRandomIndexElement(lastNames);
        this.city = getRandomIndexElement(cities);
        this.address = getRandomIndexElement(addresses);
        Person.nbPersonsCreated++;
    }
}

Person.nbPersonsCreated = 0;

window.onload = init;


function init(){
    table = document.getElementById("table");
    nextButton = document.getElementById("next");
    previousButton = document.getElementById("previous");
    sectionForPageNumbers = document.getElementById("pageNumberSection");
}


function generateTable(){
    var input = document.getElementById("nbOfpersonsChoosen");

    if(input.value == ""){
        return;
    }

    tableRows = input.value;

    resetTable();
    makePersonsArray(tableRows);
    showTable();
    removePageButtons();
    makePageButtons();
}

function resetTable(){
    while(arrayPersons.length > 0){
        arrayPersons.pop();
        hideButton("next");
        hideButton("previous");
    }
    removeOldTableIfExist();
}


function showTable(){
    showOnePage(arrayPersons[0]);
    currentPage = 0;
    showHideNextPrevButtons();
    if(arrayPersons.length > 1){
        nextButton.addEventListener("click", showNextPage);
        previousButton.addEventListener("click", showPreviousPage);
        manyPages = true;
    }
}

function showNextPage(){
    showOnePage(arrayPersons[currentPage + 1]);
    currentPage++;
    showHideNextPrevButtons();
}

function showPreviousPage(){
    showOnePage(arrayPersons[currentPage - 1]);
    currentPage--;
    showHideNextPrevButtons();
}


function showOnePage(arr){
    removeOldTableIfExist();
    for(i = 0; i < arr.length; i++){
        var row = table.insertRow();
        var cell1 = row.insertCell();
        cell1.innerHTML = arr[i].number;
        var cell2 = row.insertCell();
        cell2.innerHTML = arr[i].firstName;
        var cell3 = row.insertCell();
        cell3.innerHTML = arr[i].lastName;
        var cell4 = row.insertCell();
        cell4.innerHTML = arr[i].city;
        var cell5 = row.insertCell();
        cell5.innerHTML = arr[i].address;
        if(cell2.innerHTML == nameToSearch){
            row.classList.add("activeRow");
            activeRow = row;
        }
    }
}

function makePageButtons(){
    if(!manyPages){
        return;
    }
    for(i=0; i<arrayPersons.length; i++){
        var button = document.createElement("button");
        var page = i + 1;
        var id = "page" + page;
        button.setAttribute("id", id);
        button.setAttribute("type","button");
        button.setAttribute("class","btnPageNum");
        button.setAttribute("onclick", "showChoosenPage(this.id)");
        var node = document.createTextNode(page);
        button.appendChild(node);
        sectionForPageNumbers.appendChild(button);
        var btn = document.getElementById("page" + page);
    }
}

function showChoosenPage(id){
    var index = id.slice(4);
    showOnePage(arrayPersons[index-1]);
    currentPage = index-1;
    showHideNextPrevButtons();
}

function removePageButtons(){
    sectionForPageNumbers.innerHTML = '';
}


function makePersonsArray(tableRows){
    var arr = [];
    if (tableRows < 16){
        arr = makeDataForOnePage(tableRows);
        arrayPersons.push(arr);
    }

    else {
        while(tableRows > 15){
            arr = makeDataForOnePage(15);
            arrayPersons.push(arr);
            tableRows = tableRows - 15;
        }
        if(tableRows != 0){
        arr = makeDataForOnePage(tableRows);
        arrayPersons.push(arr);
        }
    }
}


function makeDataForOnePage(num){
    var arr = [];
    for(i = 0; i < num; i++){
        var p = new Person;
        arr.push(p);
    }
    return arr;
}

function removeOldTableIfExist(){
    if(table.rows.length > 1){
        while(table.rows.length > 1){
            table.deleteRow(table.rows.length - 1);
        }
        Person.nbPersonsCreated = 0;
    }
} 


function getRandomIndexElement(arr){
    var element = arr[Math.floor(Math.random()*arr.length)];
    return element;
}

function showHideNextPrevButtons(){
    if(arrayPersons.length == 1){
        return;
    }
    showButton("next");
    showButton("previous");
    if(currentPage == 0){
        hideButton("previous");
    }
    if(currentPage == arrayPersons.length-1){
        hideButton("next");
    }
}

function showButton(id){
    var button = document.getElementById(id);
    button.style.display = "block";
}

function hideButton(id){
    var button = document.getElementById(id);
    button.style.display = "none";
}

function search(){
    if(activeRow !=undefined){
    activeRow.classList.remove("activeRow");
    }
    nameFinded = false;
    var input = document.getElementById("nameToSearch");
    nameToSearch = input.value;
    findName(nameToSearch);
    if(!nameFinded){
        var a = document.getElementById("name-not-found");
        a.style.display = "block";
        setTimeout(function(){
        a.style.display = "none";
        }, 2000);
    }
}

function findName(){
    for(i=0; i<arrayPersons.length;i++){
        for(j=0; j<arrayPersons[i].length;j++){
            if(arrayPersons[i][j].firstName == nameToSearch){
                showOnePage(arrayPersons[i]);
                nameFinded = true;
                return;
            }
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <link rel="stylesheet" type="text/css" href="layouts.css"/>
    <title>Table</title>
</head>
<body>
    <div class="forms-container">
        <form id="formNum" class="clearfix">
            <fieldset id="optionsFieldset">
                <legend>Options</legend>
                <label for="nbOfpersonsChoosen">Number of persons: 
                    <input id="nbOfpersonsChoosen" type="number" min="1" max="1000"></br>
                </label>
                <input type="submit" value="Submit" class="buttonMain" onclick="generateTable(); return false;"/>
            </fieldset> 
        </form>
   
        <form id="form-name" class="clearfix">
            <fieldset id="searchFieldset"> 
                <legend>Search</legend>
                    <label for="nameToSearch">Name of person: 
                        <input  id="nameToSearch" type="name"></br>
                        <p id="name-not-found">Name not found!</p>
                    </label>
                    <input type="submit" class="buttonMain" value="Search" onclick="search(); return false;"/>
            </fieldset> 
        </form>
    </div>
    
    <table id="table">
        <caption>Address book</caption>
        <tr>
            <th>No</th>
            <th>First name</th>
            <th>Last name</th>
            <th>City</th>
            <th>Address</th>
        </tr>
    </table>
    <button id="previous" class="buttonMain">Previous</button>
    <section id="pageNumberSection"></section>
    <button id="next" class="buttonMain">Next</button>

    <script src="script.js"></script>
</body>
</html>

HTML.CSS.JS.Table  /EdX's JavaScript Introduction Course by W3Cx/
-----------------------------------------------------------------


A [Pen](https://codepen.io/Onlyforbopi/pen/dqxwLp) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).

[License](https://codepen.io/Onlyforbopi/pen/dqxwLp/license).