Array displayed inside Html table

by

I got this code for an array an infinite array in javascript and I can add more to it delete from it update elements inside of it.
I need to show that array as a table in html page the design does not matter I can work on that.

I am only allowed to use JavaScript not jQuery, I’m really not sure what to do here.

let students = [];
let x = 0;
document.getElementById("submit").addEventListener("click", (e) => {
  e.preventDefault();
  let nameInputEl = document.getElementById("name");
  let idInputEl = document.getElementById("idNumber");
  let gdpaInputEl = document.getElementById("gdpa");

  // Validation for input
  inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);

  // insert student
  if (x == 1) {
    insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
  }

  // Show success message
});

function inputValidation(name, id, gdpa) {
  // check for the value of each element

  if (name == "") {
    document.getElementById("Error101").style.display = "block";
  } else if (id == "") {
    document.getElementById("Error101").style.display = "block";
  } else if (gdpa == "") {
    document.getElementById("Error101").style.display = "block";
  } else {
    document.getElementById("Succes101").style.display = "block";
    x = 1;
  }
  setTimeout(function() {
    document.getElementById("Error101").style.display = "none";
    document.getElementById("Succes101").style.display = "none";
  }, 3000);
}

function insertStudent(name, id, gdpa) {
  let student = {
    name: name,
    id: id,
    gdpa: gdpa,
  };
  students.push(student);
  console.log("students array: ", students);
  x = 0;
}

function showList() {
  students.forEach(element => {
    document.getElementById("showLi").innerHTML = (students);
  });
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="assets/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>School Managment System</title>
</head>

<body>
  <div class="container">
    <div class="big-title">
      <h2 class="title">Assignment</h2>
      <span class="ligne"> </span>
    </div>
    <div class="big_box col-md-12">
      <form>
        <!-- student name -->
        <div class="from-control col-md-4">
          <label for="name" class="Name_Label">Student Name</label>
          <input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
        </div>
        <!-- student name -->

        <!-- student id -->
        <div class="from-control col-md-4">
          <label for="idNumber" class="NO_Label">Student ID</label>
          <input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
        </div>
        <!-- student id -->

        <!-- student gdpa -->
        <div class="from-control col-md-4">
          <label for="gdpa" class="gp_Label">Student GDPA</label>
          <input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
        </div>
        <!-- student gdpa -->
        <div class="col-md-12">
          <button id="submit" type="submit">Add</button>
          <button id="list" id="list" type="button" onclick="showList()">Show</button>
        </div>
      </form>
    </div>

  </div>
  <div id="ShowLi"></div>



  <div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
  <div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>

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

</html>

96 thoughts on “Array displayed inside Html table”

  1. let students = [];
let x = 0;
document.getElementById("submit").addEventListener("click", (e) => {
  e.preventDefault();
  let nameInputEl = document.getElementById("name");
  let idInputEl = document.getElementById("idNumber");
  let gdpaInputEl = document.getElementById("gdpa");

  // Validation for input
  inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);

  // insert student
  if (x == 1) {
    insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
  }

  // Show success message
});

function inputValidation(name, id, gdpa) {
  // check for the value of each element

  if (name == "") {
    document.getElementById("Error101").style.display = "block";
  } else if (id == "") {
    document.getElementById("Error101").style.display = "block";
  } else if (gdpa == "") {
    document.getElementById("Error101").style.display = "block";
  } else {
    document.getElementById("Succes101").style.display = "block";
    x = 1;
  }
  setTimeout(function() {
    document.getElementById("Error101").style.display = "none";
    document.getElementById("Succes101").style.display = "none";
  }, 3000);
}

function insertStudent(name, id, gdpa) {
  let student = {
    name: name,
    id: id,
    gdpa: gdpa,
  };
  students.push(student);
  console.log("students array: ", students);
  x = 0;
}

function showList() {
  const resultElement = document.getElementById("showli");
  while(resultElement.firstChild && resultElement.removeChild(resultElement.firstChild));
  var table = document.getElementById("showli").appendChild( document.createElement('table') );
  students.forEach((element, i) => {
    var row = table.insertRow(i);
    var j = 0;
    for (const v of Object.keys(element)) {
      row.insertCell(j).innerText = element[v];
      j++;
    }
  });
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="assets/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>School Managment System</title>
</head>

<body>
  <div class="container">
    <div class="big-title">
      <h2 class="title">Assignment</h2>
      <span class="ligne"> </span>
    </div>
    <div class="big_box col-md-12">
      <form>
        <!-- student name -->
        <div class="from-control col-md-4">
          <label for="name" class="Name_Label">Student Name</label>
          <input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
        </div>
        <!-- student name -->

        <!-- student id -->
        <div class="from-control col-md-4">
          <label for="idNumber" class="NO_Label">Student ID</label>
          <input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
        </div>
        <!-- student id -->

        <!-- student gdpa -->
        <div class="from-control col-md-4">
          <label for="gdpa" class="gp_Label">Student GDPA</label>
          <input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
        </div>
        <!-- student gdpa -->
        <div class="col-md-12">
          <button id="submit" type="submit">Add</button>
          <button id="list" id="list" type="button" onclick="showList()">Show</button>
        </div>
      </form>
    </div>

  </div>
  <div id="showli"></div>



  <div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
  <div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>

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

</html>
    Reply

  2. You mean this

    document.getElementById("showLi").innerHTML = students
 .map(({name,id,gdpa}) => `<li>name: ${name}, id: ${id}, gdpa: ${gdpa}</li>`)
 .join("");

    ALSO change

    <button id="submit" type="submit">Add</button>

    to

    <button id="add" type="button">Add</button>

    and change

    document.getElementById("submit").addEventListener("click", (e) => {

    to

    document.getElementById("add").addEventListener("click", (e) => {

    let students = [];
let x = 0;
document.getElementById("add").addEventListener("click", (e) => {
  e.preventDefault();
  let nameInputEl = document.getElementById("name");
  let idInputEl = document.getElementById("idNumber");
  let gdpaInputEl = document.getElementById("gdpa");

  // Validation for input
  inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);

  // insert student
  if (x == 1) {
    insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
  }

  // showList(); // uncomment to make you push the show
});

function inputValidation(name, id, gdpa) {
  // check for the value of each element

  if (name == "") {
    document.getElementById("Error101").style.display = "block";
  } else if (id == "") {
    document.getElementById("Error101").style.display = "block";
  } else if (gdpa == "") {
    document.getElementById("Error101").style.display = "block";
  } else {
    document.getElementById("Succes101").style.display = "block";
    x = 1;
  }
  setTimeout(function() {
    document.getElementById("Error101").style.display = "none";
    document.getElementById("Succes101").style.display = "none";
  }, 3000);
}

function insertStudent(name, id, gdpa) {
  let student = {
    name: name,
    id: id,
    gdpa: gdpa,
  };
  students.push(student);
  console.log("students array: ", students);
  x = 0;
}

function showList() {
  document.getElementById("showLi").innerHTML = students
    .map(({
      name,
      id,
      gdpa
    }) => `<li>name: ${name}, id: ${id}, gdpa: ${gdpa}</li>`)
    .join("");
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="assets/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>School Managment System</title>
</head>

<body>
  <div class="container">
    <div class="big-title">
      <h2 class="title">Assignment</h2>
      <span class="ligne"> </span>
    </div>
    <div class="big_box col-md-12">
      <form>
        <!-- student name -->
        <div class="from-control col-md-4">
          <label for="name" class="Name_Label">Student Name</label>
          <input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
        </div>
        <!-- student name -->

        <!-- student id -->
        <div class="from-control col-md-4">
          <label for="idNumber" class="NO_Label">Student ID</label>
          <input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
        </div>
        <!-- student id -->

        <!-- student gdpa -->
        <div class="from-control col-md-4">
          <label for="gdpa" class="gp_Label">Student GDPA</label>
          <input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
        </div>
        <!-- student gdpa -->
        <div class="col-md-12">
          <button id="add" type="button">Add</button>
          <button id="list" id="list" type="button" onclick="showList()">Show</button>
        </div>
      </form>
    </div>

  </div>
  <div id="showLi"></div>



  <div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
  <div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>

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

</html>

    Here is YOUR code with ONLY my change and <ol id="ShowLi"></ol>

    let students = [];
let x = 0;
document.getElementById("submit").addEventListener("click", (e) => {
  e.preventDefault();
  let nameInputEl = document.getElementById("name");
  let idInputEl = document.getElementById("idNumber");
  let gdpaInputEl = document.getElementById("gdpa");

  // Validation for input
  inputValidation(nameInputEl.value, idInputEl.value, gdpaInputEl.value);

  // insert student
  if (x == 1) {
    insertStudent(nameInputEl.value, idInputEl.value, gdpaInputEl.value);
  }

  // Show success message
});

function inputValidation(name, id, gdpa) {
  // check for the value of each element

  if (name == "") {
    document.getElementById("Error101").style.display = "block";
  } else if (id == "") {
    document.getElementById("Error101").style.display = "block";
  } else if (gdpa == "") {
    document.getElementById("Error101").style.display = "block";
  } else {
    document.getElementById("Succes101").style.display = "block";
    x = 1;
  }
  setTimeout(function() {
    document.getElementById("Error101").style.display = "none";
    document.getElementById("Succes101").style.display = "none";
  }, 3000);
}

function insertStudent(name, id, gdpa) {
  let student = {
    name: name,
    id: id,
    gdpa: gdpa,
  };
  students.push(student);
  console.log("students array: ", students);
  x = 0;
}

function showList() {
  document.getElementById("ShowLi").innerHTML = students
    .map(({name,id,gdpa}) => `<li>name: ${name}, id: ${id}, gdpa: ${gdpa}</li>`)
    .join("");

}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="assets/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>School Managment System</title>
</head>

<body>
  <div class="container">
    <div class="big-title">
      <h2 class="title">Assignment</h2>
      <span class="ligne"> </span>
    </div>
    <div class="big_box col-md-12">
      <form>
        <!-- student name -->
        <div class="from-control col-md-4">
          <label for="name" class="Name_Label">Student Name</label>
          <input type="text" class="Name_Input" id="name" placeholder="jo aqra" />
        </div>
        <!-- student name -->

        <!-- student id -->
        <div class="from-control col-md-4">
          <label for="idNumber" class="NO_Label">Student ID</label>
          <input type="number" class="NO_Input" id="idNumber" placeholder="411420876" />
        </div>
        <!-- student id -->

        <!-- student gdpa -->
        <div class="from-control col-md-4">
          <label for="gdpa" class="gp_Label">Student GDPA</label>
          <input type="number" step="0.01" class="gp_Input" id="gdpa" placeholder="3.50" />
        </div>
        <!-- student gdpa -->
        <div class="col-md-12">
          <button id="submit" type="submit">Add</button>
          <button id="list" id="list" type="button" onclick="showList()">Show</button>
        </div>
      </form>
    </div>

  </div>
  <ol id="ShowLi"></ol>



  <div class="Error" id="Error101" aria-hidden="true"><i class="far fa-times-circle"></i>Please fill all the empty fields</div>
  <div class="Succes" id="Succes101" aria-hidden="true"><i class="fas fa-check"></i>Student added</div>

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

</html>
    Reply

Leave a Comment