How to automatically shift input to new tables using JavaScript?-CodePudding

let btn = document.querySelector('#submit-btn')
let table = document.querySelector('#new-btn')
let name = document.querySelector('#name')
let attendence = document.querySelector('#attendence')

let date = document.querySelector('#date')
let n = new Date();

// the addition of tables function
function myFunction() {
  var table = document.getElementById("table");
  var row = table.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2)
  cell1.innerHTML = "no data";
  cell2.innerHTML = "no data";
  cell3.innerHTML = "no data";

}
//event listener to click and updates the content
btn.addEventListener('click', () => {
  name.textContent = input.value
  table.style.display = 'inline';

  if (document.querySelector('.present').checked && name.textContent != "") {
    attendence.textContent = 'Present'
    date.textContent = n.toLocaleString("en-IN")
  } else if (document.querySelector('.absent').checked && name.textContent != "") {
    attendence.textContent = 'Absent'
    date.textContent = n.toLocaleString("en-IN")
  } else {
    alert("ERROR")
    window.location.href = 'index.html'
  }

})

* {
  margin: 0;
  padding: 0;
}

#header {
  font-family: sans-serif;
  padding: 20px 20px;
  text-align: center;
  text-transform: uppercase;
  font-size: large;
  background-color: #bdeab2;
}

#container {
  font-family: sans-serif;
  margin-top: 50px;
  text-align: center;
}

input {
  margin-top: 10px;
}

button {
  margin-top: 10px;
}

#submit-btn,
#new-btn {
  padding: 5px 5px;
  border-radius: 10px;
  border: 1px solid white;
  background-color: #bdeab2;
  color: black;
}

table {
  margin: auto;
  margin-top: 50px;
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

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

#new-btn {
  display: none;
}

#footer {
  text-transform: uppercase;
  font-size: large;
  font-family: sans-serif;
  background-color: #bdeab2;
  position: fixed;
  bottom: 0;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>new project</title>
</head>

<body>
  <!-- header -->
  <div id="header">
    <p>Attendence Software</p>
  </div>
  <!-- Container -->
  <div id="container">
    <form action="">
      <input type="text" id="input">
      <br> Present <input type="checkbox" name="present" >
      <br> absent <input type="checkbox" name="absent" >
    </form>
    <button type="submit" id="submit-btn">Submit</button>
    <button type="submit" id="new-btn" onclick="myFunction()">Create new</button>

  </div>
  <!-- Resulting Tables -->
  <div id="result">
    <table id="table">
      <tr>
        <th>NAME</th>
        <th>ATTENDENCE</th>
        <th>DATE</th>
      </tr>
      <td id="name">No data</td>
      <td id="attendence">No data</td>
      <td id="date">No data</td>
      </tr>
    </table>
  </div>
  <div id="footer">
    <footer>&copy:Samip Regmi</footer>
  </div>
</body>

<script src="index.js"></script>

</html>

In the given above code, I am creating my very first attendance project. I made the tables and all but once a user has given input the new other input couldn't be connected to new tables.

Please, if you have any idea regarding this problem, I am facing then help me to complete the code. I am unable to connect the above code in which the new user input is not getting connected to a newly generative table.

CodePudding user response：

Try the following code:

JavaScript:

let btn = document.getElementById('submit_btn')
let attendence = document.getElementById('is_present')
let table = document.getElementById("table");
let name = document.getElementById("name_inp");

// add new user to the table
function addNewUser() {
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2)

    cell1.innerHTML = name.value;
    cell2.innerHTML = attendence.checked ? "Present" : "Absent";
    cell3.innerHTML = new Date().toLocaleString("en-IN");
}

//event listener to click and updates the content
btn.addEventListener('click', () => {
    if (name.value != "") {
        addNewUser();
    } else {
        alert("Input is empty");
    }
})

HTML:

<div id="header">
    <p>Attendence Software</p>
</div>
<!-- Container -->
<div id="container">
    <form action="">
        <input type="text" id="name_inp">
        <br>Is present <input type="checkbox" id="is_present" >
    </form>
    <button type="submit" id="submit_btn">Submit</button>

</div>
<!-- Resulting Tables -->
<div id="result">
    <table id="table">
        <tr>
            <th>NAME</th>
            <th>ATTENDENCE</th>
            <th>DATE</th>
        </tr>
    </table>
</div>
<div id="footer">
    <footer>&copy:Samip Regmi</footer>
</div>