如何使 HTML 网站具有交互性，以便当用户单击删除按钮时它会为所有用户更改

4回答

函数式编程

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

0 0

繁星coding

在此示例中，我使用的是本地存储，并且我创建了一些函数以便您可以处理数据。<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 0

守着一只汪

以下示例假定您正在使用 PHP，并且delsessions.php在您的 Web 服务器上设置了一个名为的 PHP 脚本。此脚本将通过 HTTP POST 接受 ID 数组。然后它将更新 SQL 数据库并从与传递给它的会话 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 表时也不会显示它们。

0 0

慕婉清6462132

如果没有像 PHP、node.js、firebase 这样的后端，你就无法做到这一点……您可以使用 localStorage 进行黑客攻击，但仅当用户不删除浏览器数据时，更改才会保留。

0 0