堆栈内存溢出
  繁体   English   中英

如何使 HTML 网站具有交互性，以便当用户单击删除按钮时，即使您重新加载，它也会为所有用户更改？

[英]How to make an HTML website interactive so that when the user clicks the delete button it changes for all users, even when you reload?

 原文  2020-08-06 03:27:58  6   4    javascript/ html/ jquery/ css/ responsive-design

问题描述

我在 HTML 中创建了一个表，并添加了一个删除按钮，以便删除表中最后记录的行。

删除按钮有效，但是当我刷新页面时，编辑消失了，一切都回到了原来的 state。

我怎样才能使它在用户编辑页面时永久更改？

这是一个演示： 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 个解决方案

解决方案1
 2  2020-08-06 04:15:40

首先，如果要显示动态内容必须使用数据库，没有其他办法。 其次，如果你想让你的内容实时变化，你必须使用firebase、websocket或任何其他技术

解决方案2
 1  2020-08-06 05:07:02

在此示例中，我使用本地存储，并且创建了一些函数以便您可以处理数据。

<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>

解决方案3
 1  2020-08-06 05:25:21

The following example assumes you are using PHP and that a PHP Script, called delsessions.php , is setup on your Web Server. 此脚本将通过 HTTP POST 接受一个 ID 数组。 然后它将更新 SQL 数据库并从与传递给它的 Session ID 关联的表中删除行。

这还假设存在提供来自同一数据库表的表数据的脚本或 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各个行并单击“删除行”按钮，将更新数据表，删除这些行，并且这些行的 ID 将发布到 PHP。 然后该脚本将从数据库中删除相关行。 当用户返回站点或重新加载站点时，数据库表将不再包含这些行，并且在构建 HTML 表时不会显示它们。

解决方案4
 0  2020-08-06 03:43:43

如果没有像 PHP、node.js、firebase...

您可以使用 localStorage 进行破解，但仅当用户不删除浏览器数据时更改才会保留。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 当用户单击iframe中的按钮时，请重新加载网站（而不是iframe） 当用户点击按钮时，如何让html运行javascript函数？ 用户单击“后退”按钮时如何进行回发？ 您能做到这一点，以便当用户在iframe中单击任何位置时将他们重定向到源网址吗？ 按下按钮后如何重新加载页面？ 如何在单击 html 按钮时将文件下载到个人计算机？ 如何进行滚动，以便在滚动按钮时出现菜单 用户单击按钮时如何存储类名称，以便下次访问时可以将其用作默认名称？ 当用户单击按钮并到达底部或顶部时，将按钮设为“禁用” 当用户单击刷新按钮时，从mysql表中删除数据
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM