0

let login = document.getElementById('login');
let password = document.getElementById('password');
let email = document.getElementById('email');
let btn = document.getElementById('btn');
let blockOne = document.getElementById('blockOne');
let f1 = document.forms['f1'];
let tbody = document.getElementById('tbody');
let users = [];

let getId = id => document.getElementById(id);

function User(userName, userPass, userEmail) {
  this.userName = userName;
  this.userPass = userPass;
  this.userEmail = userEmail;
}
btn.onclick = function() {
  let userName = login.value;
  let userPass = password.value;
  let userEmail = email.value;
  const newUser = new User(userName, userPass, userEmail);
  console.log(newUser);
  f1.reset();
  users.push(newUser);
  console.log(users);

  let tr = getId('tbody').append(document.createElement('tr'));
  for (const info of users) {
    console.log(info);
    for (const inf in newUser) {
      let td = document.createElement('td');
      td.textContent = newUser[inf];
      console.log(newUser[inf]);
      console.log(td);
    }
  }
}
#box {
  margin-top: 70px;
}

.item {
  margin: 5px 0;
}

#blockTwo {
  padding-top: 30px;
}
<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">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div id="box" class="col-12 d-flex">
        <div id="blockOne" class="col-6 d-flex flex-column">
          <form name="f1">
            <div class="item">
              <h5>Login</h5>
              <input type="text" id="login" class="form-control" placeholder="Enter Login">
            </div>
            <div class="item">
              <h5>Password</h5>
              <input type="password" id="password" class="form-control" placeholder="Enter Password">
            </div>
            <div class="item">
              <h5>Email</h5>
              <input type="email" id="email" class="form-control" placeholder="Enter Email">
            </div>
            <div class="item">
              <input type="button" id="btn" value="Add user" class="btn btn-outline-success col-4">
            </div>
          </form>
        </div>
        <div class="col-6" id="blockTwo">
          <table class="table">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Login</th>
                <th scope="col">Password</th>
                <th scope="col">Email</th>
                <th scope="col">Edit</th>
                <th scope="col">Delete</th>
              </tr>
            </thead>
            <tbody id="tbody">

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>




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

Пользователь вводит свои данные в инпут поля и при нажатии на кнопку "add user" данные должны передаваться в массив объектов и этот же массив объектов должен передаваться в таблицу. Не могу понять что дальше делать с этим кодом. Там, где в thead ячейки edit и delete должны появляться кнопки.

2 ответа 2

1

let login = document.getElementById('login');
let password = document.getElementById('password');
let email = document.getElementById('email');
let btn = document.getElementById('btn');
let blockOne = document.getElementById('blockOne');
let f1 = document.forms['f1'];
let tbody = document.getElementById('tbody');
let users = [];

let getId = id => document.getElementById(id);

function User(userName, userPass, userEmail) {
  this.userName = userName;
  this.userPass = userPass;
  this.userEmail = userEmail;
}
btn.onclick = function() {
  let userName = login.value;
  let userPass = password.value;
  let userEmail = email.value;
  const newUser = new User(userName, userPass, userEmail);
  //console.log(newUser);
  f1.reset();
  users.push(newUser);
  //console.log(users);

  let td;
  let tr = document.createElement('tr');
  getId('tbody').appendChild(tr);
  td = document.createElement('td');tr.appendChild(td);
  td.textContent = users.length;
  td = document.createElement('td');tr.appendChild(td);
  td.textContent = newUser.userName;
  td = document.createElement('td');tr.appendChild(td);
  td.textContent = newUser.userPass;
  td = document.createElement('td');tr.appendChild(td);
  td.textContent = newUser.userEmail;

  td = document.createElement('td');tr.appendChild(td);
  td = document.createElement('td');tr.appendChild(td);
  //    console.log(newUser[inf]);
  //    console.log(td);
}
#box {
  margin-top: 70px;
}

.item {
  margin: 5px 0;
}

#blockTwo {
  padding-top: 30px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

<div class="container">
  <div class="row">
    <div id="box" class="col-12 d-flex">
      <div id="blockOne" class="col-6 d-flex flex-column">
        <form name="f1">
          <div class="item">
            <h5>Login</h5>
            <input type="text" id="login" class="form-control" placeholder="Enter Login">
          </div>
          <div class="item">
            <h5>Password</h5>
            <input type="password" id="password" class="form-control" placeholder="Enter Password">
          </div>
          <div class="item">
            <h5>Email</h5>
            <input type="email" id="email" class="form-control" placeholder="Enter Email">
          </div>
          <div class="item">
            <input type="button" id="btn" value="Add user" class="btn btn-outline-success col-4">
          </div>
        </form>
      </div>
      <div class="col-6" id="blockTwo">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Login</th>
              <th scope="col">Password</th>
              <th scope="col">Email</th>
              <th scope="col">Edit</th>
              <th scope="col">Delete</th>
            </tr>
          </thead>
          <tbody id="tbody">

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

0

    let login = document.getElementById('login');
    let password = document.getElementById('password');
    let email = document.getElementById('email');
    let btn = document.getElementById('btn');
    let blockOne = document.getElementById('blockOne');
    let f1 = document.forms['f1'];
    let tbody = document.getElementById('tbody');
    let users = [];

    let getId = id => document.getElementById(id);

    btn.onclick = function() {
        let id = users.length + 1;
        let userName = login.value;
        let userPass = password.value;
        let userEmail = email.value;
        const temp = [id,userName,userPass,userEmail];
        users.push(temp);
        f1.reset();

        let tr = getId('tbody').append(document.createElement('tr'));
        let last = users[users.length - 1];
        for (const inf in last) {
            let td = document.createElement('td');
            td.textContent = last[inf];
            var doc = document.getElementById('tbody');
            doc.appendChild(td);
        }
    }
<style>
    #box {
        margin-top: 70px;
    }

    .item {
        margin: 5px 0;
    }

    #blockTwo {
        padding-top: 30px;
    }
</style>

<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">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
<div class="container">
    <div class="row">
        <div id="box" class="col-12 d-flex">
            <div id="blockOne" class="col-6 d-flex flex-column">
                <form name="f1">
                    <div class="item">
                        <h5>Login</h5>
                        <input type="text" id="login" class="form-control" placeholder="Enter Login">
                    </div>
                    <div class="item">
                        <h5>Password</h5>
                        <input type="password" id="password" class="form-control" placeholder="Enter Password">
                    </div>
                    <div class="item">
                        <h5>Email</h5>
                        <input type="email" id="email" class="form-control" placeholder="Enter Email">
                    </div>
                    <div class="item">
                        <input type="button" id="btn" value="Add user" class="btn btn-outline-success col-4">
                    </div>
                </form>
            </div>
            <div class="col-6" id="blockTwo">
                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Login</th>
                        <th scope="col">Password</th>
                        <th scope="col">Email</th>
                        <th scope="col">Edit</th>
                        <th scope="col">Delete</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

1
  • Что-то меня смущает добавление клеток прямо в tbody.
    – user176262
    8 фев 2020 в 3:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.