Как сделать веб-сайт HTML интерактивным, чтобы, когда пользователь нажимает кнопку удаления, он изменялся для всех пользователей, даже при перезагрузке? - PullRequest
Новая
       85

Как сделать веб-сайт HTML интерактивным, чтобы, когда пользователь нажимает кнопку удаления, он изменялся для всех пользователей, даже при перезагрузке?

1 голос
/ 06 августа 2020

Я создал таблицу в HTML и добавил кнопку удаления, чтобы удалить последнюю записанную строку в таблице.

Кнопка удаления работает, но когда я обновляю sh страницу, правки пропали, и все вернулось в исходное состояние.

Как сделать так, чтобы когда пользователь редактировал страницу, она менялась навсегда?

Это демонстрация: http://jsfiddle.net/objcLfxd/# & togetherjs = 9ai74rb5DH

Если это не сработает: 

body {
  background-color: #ffffff;
  font-family: candara, monospace;
  text-align: center;
  font-weight: bold;
  margin-top: 5px;
  text-transform: uppercase;
  height: 600px;
  width: 1000px;
  color: #1b1186;
}

#DELETE {
  background-color: #1b1186;
  width: 250px;
  color: white;
  margin-top: 50px;
}

#DELETE:hover {
  background-color: #ff4625;
  cursor: pointer;
}

button {
  background-color: #1b1186;
  border-radius: 0px;
  border: 0px #cccccc;
  font-family: candara, monospace;
  font-weight: bold;
  margin-top: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 10px;
  width: 200px;
  transition: all 1s;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
}

button:hover {
  background-color: #fff06d;
  color: black;
  padding-right: 25px;
  padding-left: 25px;
}

table {
  border: 5px, #1b1186
}
<!DOCTYPE html>
<html>
  <head>
    <button type="button" onclick="window.location.href='userhome.html';">Home</button>
    <button type="button" onclick="window.location.href='settings.html';">Settings</button>
    <button type="button" onclick="window.location.href='userhome.html';">Add Hours</button>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script>
      $(document).ready(function () {
          var table = $('#HOURTABLE').DataTable();
          $('#HOURTABLE tbody').on('click', 'tr', function () {
              if ($(this).hasClass('selected')) {
                  $(this).removeClass('selected');
              }
              else {
                  table.$('tr.selected').removeClass('selected');
                  $(this).addClass('selected');
              }
          });
      });
      
    </script>
  </head>
  <body onload="checkEdits()">
    <table id="HOURTABLE"  contenteditable="true" class="display" style="width:100%">
      <thead>
        <tr>
          <th>Session</th>
          <th># Hours</th>
          <th>Date</th>
          <th>Organization</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>1</th>
          <th>4</th>
          <th>4/5/2020</th>
          <th>Tutoring</th>
          <th>It was fun</th>
        </tr>
        <tr>
          <th>2</th>
          <th>67</th>
          <th>4/8/2020</th>
          <th>Tutoring</th>
          <th>It was interesting</th>
        </tr>
      </tbody>
      <tfoot>
      </tfoot>
      <br>
      <button ondblclick="row()"> 
      Delete Row 
      </button> 
      <script> 
        var x = document.getElementById("HOURTABLE").rows.length;
        
         function row() { 
            
           // delete row (index-0). 
           document.getElementById("HOURTABLE").deleteRow(1);
             
         }
      </script>
    </table>
  </body>
</html>

Ответы [ 4 ]

2 голосов
/ 06 августа 2020

во-первых, если вы хотите показать динамический c контент, вы должны использовать базу данных, другого пути нет. во-вторых, если вы хотите, чтобы ваш контент изменялся в режиме реального времени, вы должны использовать firebase, websocket или любую другую технологию

1 голос
/ 06 августа 2020

В следующем примере предполагается, что вы используете PHP и что на вашем веб-сервере настроен сценарий PHP с именем delsessions.php. Этот скрипт примет массив идентификаторов через HTTP POST. Затем он обновит базу данных SQL и удалит строки из таблицы, связанной с переданными ей идентификаторами сеанса.

Это также предполагает, что существует сценарий или API, который предоставляет данные таблицы из той же таблицы базы данных. 

$(function() {
  var table = $('#HOURTABLE').DataTable();

  function href(el) {
    window.location.href = $(el).data("href");
  }

  function delRows() {
    var sessions = [];
    $(".selected").each(function(i, el) {
      sessions.push($(el).children().eq(0).text());
    })
    table.rows(".selected").remove().draw();
    console.log("Delete Sessions", sessions);
    $.post("delsessions.php", {
      ids: sessions
    });
  }

  $(".btn[data-href]").click(function(e) {
    e.preventDefault();
    href(this);
  });

  $(".delete-row").click(delRows);

  $('#HOURTABLE tbody').on('click', 'tr', function() {
    $(this).toggleClass("selected");
  });
});
body {
  background-color: #ffffff;
  font-family: candara, monospace;
  text-align: center;
  font-weight: bold;
  margin-top: 5px;
  text-transform: uppercase;
  height: 600px;
  width: 1000px;
  color: #1b1186;
}

#DELETE {
  background-color: #1b1186;
  width: 250px;
  color: white;
  margin-top: 50px;
}

#DELETE:hover {
  background-color: #ff4625;
  cursor: pointer;
}

button {
  background-color: #1b1186;
  border-radius: 0px;
  border: 0px #cccccc;
  font-family: candara, monospace;
  font-weight: bold;
  margin-top: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
  padding: 10px;
  width: 200px;
  transition: all 1s;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  text-decoration: none;
}

button:hover {
  background-color: #fff06d;
  color: black;
  padding-right: 25px;
  padding-left: 25px;
}

table {
  border: 5px, #1b1186
}
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<button class="home btn" data-href="userhome.html">Home</button>
<button class="settings btn" data-href="settings.html">Settings</button>
<button class="add-hours btn" data-href="userhome.html">Add Hours</button>
<button class="delete-row btn">Delete Row</button>
<table id="HOURTABLE" contenteditable="true" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Session</th>
      <th># Hours</th>
      <th>Date</th>
      <th>Organization</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <th>4</th>
      <th>4/5/2020</th>
      <th>Tutoring</th>
      <th>It was fun</th>
    </tr>
    <tr>
      <th>2</th>
      <th>67</th>
      <th>4/8/2020</th>
      <th>Tutoring</th>
      <th>It was interesting</th>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>

Когда пользователь выбирает с помощью click различные строки и нажимает кнопку «Удалить строку», Datatable будет обновлен, удалив эти строки. , а идентификаторы этих строк будут отправлены в PHP. Затем сценарий удалит относительные строки из базы данных. Когда Пользователь возвращается на сайт или перезагружает сайт, таблица базы данных больше не будет содержать строк и не будет их отображать при построении таблицы HTML.

1 голос
/ 06 августа 2020

В этом примере я использую localstorage и создал несколько функций, чтобы вы могли обрабатывать данные. 

<html>

<head>
  <button type="button" onclick="window.location.href='userhome.html';">Home</button>
  <button type="button" onclick="window.location.href='settings.html';">Settings</button>
  <button type="button" onclick="window.location.href='userhome.html';">Add Hours</button>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

</head>

<body>
  <table id="HOURTABLE" contenteditable="true" class="display" style="width:100%">
    <thead>
      <tr>
        <th>Session</th>
        <th># Hours</th>
        <th>Date</th>
        <th>Organization</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody class="body-container">


    </tbody>
    <tfoot>
    </tfoot>
    <br>
    <button ondblclick="deleteRowSelected()">Delete Row</button>

    <script>

      function getData() {

        let local = localStorage.getItem('data');

        if (local == null) {

          local = setData();

        }

        return JSON.parse(local);

      }

      function setData(data = null) {

        if (data == null) {
          data =
            [
              {
                session: 1,
                hours: 4,
                date: '4/5/2020',
                organization: 'Tutoring',
                description: 'It was fun'
              },
              {
                session: 2,
                hours: 67,
                date: '4/8/2020',
                organization: 'Tutoring',
                description: 'It was interesting'
              }
            ];

        }

        const textData = JSON.stringify(data);
        localStorage.removeItem('data');
        localStorage.setItem('data', textData);
        return textData;


      }

      function generateRow(row) {

        return `
            <tr data-session="${row.session}">
              <th>${row.session}</th>
              <th>${row.hours}</th>
              <th>${row.date}</th>
              <th>${row.organization}</th>
              <th>${row.description}</th>
            </tr>`;

      }

      function deleteRow(session) {

        const data = getData();
        let newArray = [];

        data.forEach(element => {


          if (element.session !== session) {

            newArray.push(element);
          }
        })
        console.log(newArray);
        setData(newArray);
        load();

      }
      function load() {

        const data = getData();
        const container = $('.body-container');
        container.html('');
        if (container.length > 0) {
          data.forEach(row => {

            container.append(generateRow(row));

          })

        } else {
          container.appent('<tr>empty</tr>');
        }

      }
      var x = document.getElementById("HOURTABLE").rows.length;

      function deleteRowSelected() {

        const row = $('.body-container').find('tr.selected');
        if (row.length == 0) {
          alert('you must select a row');
        } else {
          row.remove();
          deleteRow(row.data('session'));
        }

      }


      $(document).ready(function () {
        var table = $('#HOURTABLE').DataTable();
        $('#HOURTABLE tbody').on('click', 'tr', function () {
          if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
          }
          else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
          }
        });

        load();
      });

    </script>

  </table>


</body>

</html>
0 голосов
/ 06 августа 2020

Невозможно сделать это без серверной части, такой как PHP, node.js, firebase ...

Вы можете взломать, используя localStorage, но изменения останутся только до тех пор, пока пользователь не будет Не удалять данные браузера.

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

Похожие темы

...