Помощь с таблицей для добавления значений в строках и удаления их с помощью кнопки. Использование JQuery - PullRequest
Новая
       12

Помощь с таблицей для добавления значений в строках и удаления их с помощью кнопки. Использование JQuery

0 голосов
/ 07 ноября 2018

Я хотел бы создать таблицу, которая предложит вам добавить свое имя и род занятий и добавить их в строку в таблице. Значения должны входить в массив. Кнопка удаления удалит их из массива и удалит строку. Там тоже должен быть счетчик.

На данный момент я пытался сделать это только для массива peopleArray[]. Я сталкиваюсь с проблемой, что кнопка удаления не будет работать вне функции «добавить» и выполняется много раз, удаляя все в массиве одним щелчком мыши. Я что-то теряю. 

* {
  font-family: verdana;
}

.table-container {
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
}

.table {
  border-collapse: collapse;
  border-spacing: 0;
}

.table tr {
  text-align: center;
}

.table tr:nth-child(2n) {
  background-color: #eeeeee;
}

.table tr:nth-child(2n-1) {
  background-color: #fcfafa;
}

.table th {
  padding: 0 10px;
  font-size: 12px;
  width: 150px;
  background-color: #A9BABA;
  color: #000;
}

.table th:first-child,
.table th:nth-child(4) {
  width: 15px;
}

.counter {
  font-size: 12px;
  font-weight: bold;
  padding: 5px;
}

.btn_img {
  width: 20px;
}

.button_style {
  border: none;
  background: none;
  transition: all 0.5s;
  padding: 5px;
}

.button_style:hover {
  transform: scale(1.2);
}

.button_style:focus {
  transform: rotateY(180deg);
  outline: none;
}

table td {
  padding: 0 10px;
  border: 1px solid white;
  font-size: 15px;
}
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>

<body>
  <div class="table-container">
    <table class="table">
      <tr>
        <th class="">No.</th>
        <th class="">Name</th>
        <th class="">Occupation</th>
        <th class="">
          <button id="btn_add_people" class="button_style"><img class="btn_img" src="https://i.imgur.com/6FXVi7B.png" alt="options">
            </button></th>
      </tr>
      <tr>
        <td id="counter" class="counter" colspan="4"></td>
      </tr>
    </table>
  </div>

  <script>
    $(document).ready(function() {
      var peopleArray = [];
      var occupArray = [];
      var countP = 0;

      $("#btn_add_people").click(function() {
        var personName = prompt("Enter a name please!");
        var personOccup = prompt("Enter an occupation please!");

        peopleArray.push(personName);
        occupArray.push(personOccup);
        countP = peopleArray.length
        var addedRow = '<tr id=""><td colspan="1" >' + peopleArray.length + '</td><td id="name' + peopleArray.length + '" colspan="1">' + peopleArray[peopleArray.length - 1] + '</td><td colspan="1">' + occupArray[occupArray.length - 1] + '</td><td colspan="1"><button id="' + peopleArray.length + '" class="button_style btn_remove_person"><img src="https://i.imgur.com/eiyNHjs.png" alt="close" class="btn_img" /></button></td></tr>';

        $(".table").append(addedRow);
        $("#counter").text("People added: " + countP);


        $("tr").on('click', '.btn_remove_person', (function() {
          $(this).parents("tr").remove()
          var exitN = $(this).attr("id");
          peopleArray.splice(exitN - 1, 1);
          // get ID from button and connect with ID to splice name and occupation !!! 
          $("#counter").text("People added: " + countP);
        }));

      });
      
    });
  </script>
</body>

</html>

1 Ответ

0 голосов
/ 08 ноября 2018

Вы можете удалить $(document).ready(function() { });, так как вы не особо его используете. Если вы хотите сохранить его, чтобы пользователи не могли вводить информацию, сначала спрячьте кнопку добавления, а затем на экране .ready укажите, что она готова к использованию.

Сохраняйте JQuery для добавления записей, но при создании кнопки удаления добавьте функцию onclick для удаления записи.

Я оставляю ваши расчеты счетчиков на ваше усмотрение, так как я не знаю, как вы хотите сделать счетчики .. людей добавили в общее число, чтобы включить удаленные записи? Люди добавили количество записей в таблице? Число рядом с записью является номером строки или может быть 23 и 22 до того, как оно было удалено и т. Д. * 

var peopleArray = [];
var occupArray = [];
var countP = 0;

$("#btn_add_people").click(function() {
    var personName = prompt("Enter a name please!");
    var personOccup = prompt("Enter an occupation please!");

    peopleArray.push(personName);
    occupArray.push(personOccup);
    countP = peopleArray.length

    var addedRow = '<tr id=""><td colspan="1" >' + peopleArray.length  + '</td><td id="name' + peopleArray.length + '" colspan="1">' + peopleArray[peopleArray.length - 1] + '</td><td colspan="1">' + occupArray[occupArray.length - 1] + '</td><td colspan="1"><button id="' + peopleArray.length  + '" class="button_style btn_remove_person" onclick="_removeEntry(this)">Delete</button></td></tr>';

    $(".table").append(addedRow);   
    $("#counter").text("People added: " + countP);
});

function _removeEntry(e) {  
    $(e).parents("tr").remove()
    var exitN = $(e).attr("id");
    peopleArray.splice(exitN - 1, 1);
    $("#counter").text("People added: " + countP);
};
...