Выберите строки из таблицы, нажав кнопку, и обновите значения - PullRequest
Новая
       3

Выберите строки из таблицы, нажав кнопку, и обновите значения

0 голосов
/ 12 июня 2019

Я пытаюсь создать кнопку редактирования, чтобы при ее нажатии она выделяла всю строку и заполняла указанные выше значения для нее значениями для изменений или обновлений.Я не могу заставить свой код работать более 3 строк, потому что он где-то застрял.В приведенном ниже коде кнопка «Изменить» не отображает никаких ошибок в консоли, поэтому я не могу понять, что я сделал неправильно.

Я пытаюсь создать телефонную книгу, используя динамическую таблицу, которая требуетиметь 2 кнопки, одну с именем изменить и одну с именем удалить.Проблема в том, что кнопка модификации не работает.Заранее спасибо. 

var clientList = [{
    name: "Nume1",
    lastName: "Prenume1",
    phone: ["0758066000"],
    initialOrder: 1
  },
  {
    name: "Nume3",
    lastName: "Prenume3",
    phone: ["0758000000"],
    initialOrder: 2
  },
  {
    name: "Nume2",
    lastName: "Prenume2",
    phone: ["0758000000", "0758000000"],
    initialOrder: 3
  },
  {
    name: "Nume4",
    lastName: "Prenume4",
    phone: ["075803481"],
    initialOrder: 4
  },
  {
    name: "Nume5",
    lastName: "Prenume5",
    phone: ["07942990220"],
    initialOrder: 5
  }
];

//drawing the table
function showDataInTable(arr) {
  var tableBody = document.getElementById('tableBody');
  var tableData = "";

  for (var i = 0; i < arr.length; i++) {
    tableData += `
    <tr>
    <td>${clientList[i].name}</td>
    <td>${clientList[i].lastName}</td>
    <td>${clientList[i].phone}</td>
    <td data-index ="${i}" data-id ="modify" class="buttons1">modify</td>
    <td data-index ="${i}" data-id ="delete" class="buttons2">delete</td>
    <tr>
    `;
  }
  tableBody.innerHTML = tableData;
}
showDataInTable(clientList);

//writing the sorting function
function sort(arr, parameter, sortDirection) {

  for (var i = 0; i < arr.length; i++) {

    for (var j = i + 1; j < arr.length; j++) {

      if (sortDirection === "up") {

        if (arr[i][parameter] > arr[j][parameter]) {
          var temp = arr[i];
          arr[i] = arr[j];
          arr[j] = temp;
        }
      } else if (sortDirection === "down") {

        if (arr[i][parameter] < arr[j][parameter]) {
          var temp = arr[i];
          arr[i] = arr[j];
          arr[j] = temp;
        }
      }
    }
  }
  showDataInTable(arr);
}
//table click event
document.getElementById("table").addEventListener("click", tableClicked);

var sortDirection;
var index;
var editingTable;

function tableClicked() {

  //table delete
  function delClient(arr, index) {
    arr.splice(index, 1);
  }

  index = Number(event.target.parentElement.rowIndex - 1);

  if (event.currentTarget.dataset.id == "delete") {

    delClient(clientList, index);
    showDataInTable(clientList);
  }

  // table edit
  if (event.currentTarget.dataset.id == "modify") {
    document.getElementById("nameInput").delete = clientList[index].name;
    document.getElementById("lastNameInput").value = clientList[index].lastName;
    document.getElementById("phoneInput").value = clientList[index].phone;
    document.getElementById("submit").value = "SAVE";
  }

  //table sorting
  if (event.target.tagName == "TH") {

    var headers = document.getElementsByTagName("th");

    for (var i = 0; i < headers.length; i++) {

      headers[i].classList.remove("selected");
    }

    event.target.classList.add("selected");

    if (sortDirection == "up") sortDirection = "down";
    else sortDirection = "up";

    var parameter = event.target.id;
    sort(clientList, parameter, sortDirection);

  }
}

// when form is clicked
document.getElementById("myForm").addEventListener("click", formClicked);

function formClicked() {

  //add client or edit existing
  if (event.target.id == "submit") {

    event.preventDefault();

    var name = document.getElementById("nameInput").value;
    var lastName = document.getElementById("lastNameInput").value;
    var phone = document.getElementById("phoneInput").value;
    phone = phone.split(",");

    if (name && lastName && phone) {

      if (editingTable == true) {

        clientList[index].name = name;
        clientList[index].lastName = lastName;
        clientList[index].phone = phone;
        document.getElementById("submit").value = "ADD CONTACT";
        editingTable = false;

      } else {

        var newClient = {
          name: name,
          lastName: lastName,
          phone: phone
        }
        clientList.push(newClient);
      }

      //redraw the table
      showDataInTable(clientList);

      //reset input fields
      document.getElementById("nameInput").value = "";
      document.getElementById("lastNameInput").value = "";
      document.getElementById("phoneInput").value = "";

    } else {
      alert("INPUT FIELDS ARE INCOMPLETE!");
    }
  }
}

//make sure phoneInput gets numbers 
document.getElementById("phoneInput").addEventListener("keydown", checkInput);
document.getElementById("phoneInput").addEventListener("input", checkInput);

function checkInput() {
  if (/[^0-9]/.test(event.key) && event.keyCode !== 8) {
    event.preventDefault();
  }
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#header {
  font-family: 'Press Start 2P', cursive;
  font-size: 40px;
  color: dodgerblue;
  margin-top: 30px;
}

body {
  text-align: center;
}

p {
  margin-bottom: 10px;
}

form {
  border: 1px solid lightgray;
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  -webkit-box-shadow: 10px 10px 15px -1px rgba(59, 89, 152, 0.85);
  -moz-box-shadow: 10px 10px 15px -1px rgba(59, 89, 152, 0.85);
  box-shadow: 10px 10px 15px -1px rgba(59, 89, 152, 0.85);
}

.input {
  margin-left: 300px;
  margin-right: 300px;
  margin-top: 20px;
}

#name {
  margin: 5px 10px 5px 0;
}

#lastName {
  margin: 5px 10px 5px 0;
}

#phone {
  margin: 5px 10px 5px 0;
}

input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid grey;
  width: 250px;
}

#submit {
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
}

#submit:hover {
  background-color: lightblue;
  color: black;
}

table {
  border-collapse: collapse;
  width: 69%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  -webkit-box-shadow: 10px 10px 15px -1px rgba(59, 89, 152, 0.85);
  -moz-box-shadow: 10px 10px 15px -1px rgba(59, 89, 152, 0.85);
  box-shadow: 10px 10px 15px -1px rgba(59, 89, 152, 0.85);
}

td {
  padding: 5px;
  cursor: pointer;
  border-bottom: 1px solid lightgrey;
  font-size: 20px;
  border-left: 1px solid grey;
}

th {
  padding: 5px;
  font-size: 25px;
  background-color: dodgerblue;
  color: white;
  font-weight: 100;
  cursor: pointer;
}

@media (max-width: 800px) {
  input {
    margin: 10px 0;
  }
  form {
    flex-direction: column;
    align-items: stretch;
  }
}

.selected {
  background-color: lightskyblue;
  border: 3px solid white;
  color: black;
}

.buttons1:hover {
  background-color: lightgreen;
}

.buttons2:hover {
  background-color: lightcoral;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="description" content="Agenda telefonica">
  <meta name="author" content="Adelina Lipsa">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Agenda telefonica</title>
  <link href="stylesheet.css" rel="stylesheet" type="text/css">
  <script src="javascript.js" defer></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/solid.css" integrity="sha384-ioUrHig76ITq4aEJ67dHzTvqjsAP/7IzgwE7lgJcg2r7BRNGYSK0LwSmROzYtgzs" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/fontawesome.css" integrity="sha384-sri+NftO+0hcisDKgr287Y/1LVnInHJ1l+XC7+FOabmTTIK0HnE2ID+xxvJ21c5J" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


</head>

<body>
  <h1 id="header"><i class="fas fa-phone-square"></i>&nbsp;Phone book</h1>
  <div id="wrapper">
    <div class="input">
      <form id="myForm">
        <p>Nume:</p>
        <input type="text" id="nameInput">
        <p>Prenume:</p>
        <input type="text" id="lastNameInput">
        <p>Telefon:</p>
        <input type="text" id="phoneInput">
        <input type="submit" id="submit" value="ADD CONTACT">
      </form>
    </div>
    <div>
      <table id="table">
        <thead id="thead">
          <tr>
            <th id="name">Nume <i class="fas fa-sort"></i></th>
            <th id="lastName">Prenume <i class="fas fa-sort"></i></th>
            <th id="phone">Telefon <i class="fas fa-sort"></i></th>
            <th colspan="2"></th>
          </tr>
        </thead>
        <tbody id="tableBody"></tbody>
      </table>
    </div>
  </div>
</body>

</html>

Ответы [ 2 ]

1 голос
/ 12 июня 2019

Самая большая проблема заключается в том, что вы переключаете event.target и event.currentTarget вокруг.

Поскольку вы связываете событие click с таблицей, event.currentTarget равен таблице, а не ячейке таблицы.И event.target на самом деле является ячейкой таблицы.

Но ваш код ожидает if (event.currentTarget.dataset.id == "delete") и if (event.currentTarget.dataset.id == "modify"), что всегда будет неопределенным, поскольку атрибуты данных находятся в ячейке, а не в таблице.

Вы ожидаете, что это выдаст ошибку, но поскольку существуют и target, и currentTarget, он не выдаст.

Если я изменю event.currentTarget() на event.target(), я могу удалитьи измените все строки.Есть еще некоторые другие проблемы (например, удаление, удаление последнего элемента вместо элемента, по которому щелкнули), но это решает главный вопрос.

1 голос
/ 12 июня 2019

В вашем коде есть некоторые проблемы.

  1. Вам нужно использовать target вместо currentTarget, потому что вы хотите получить элемент, по которому щелкнул пользователь (кнопка), а не элементтот, который вы слушаете (стол). [1]
  2. document.getElementById("nameInput").delete должно быть document.getElementById("nameInput").value.
  3. В showDataInTable Вам необходимо закрыть тег tr (</tr>) вместооткрыть один (<tr>)

https://jsbin.com/taqaqor/edit?js,output

[1] Свойство currentTarget только для чтения интерфейса событийопределяет текущую цель для события, поскольку событие проходит через DOM.Он всегда относится к элементу, к которому был прикреплен обработчик события, в отличие от Event.target, который идентифицирует элемент, на котором произошло событие, и который может быть его прямым потомком.

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...