Fatal编程技术网
  • javascript/
  • Javascript 如何使HTML网站具有交互性，以便当用户单击“删除”按钮时，即使在重新加载时，它也会为所有用户进行更改？

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

javascript html jquery css responsive-design

Javascript 如何使HTML网站具有交互性，以便当用户单击“删除”按钮时，即使在重新加载时，它也会为所有用户进行更改？,javascript,html,jquery,css,responsive-design,Javascript,Html,Jquery,Css,Responsive Design,我用HTML制作了一个表，并添加了一个删除按钮，这样它就可以删除表中最后记录的行 “删除”按钮起作用，但当我刷新页面时，编辑就消失了，一切都恢复到原始状态 我如何使其在用户编辑页面时永久更改 这是一个演示： 如果这不起作用： 正文{ 背景色：#ffffff； 字体系列：candara，monospace； 文本对齐：居中； 字体大小：粗体； 边缘顶部：5px； 文本转换：大写； 高度：600px； 宽度：1000px； 颜色：#1b1186； } #删除{ 背景色：#1b1186； 宽度：25

我用HTML制作了一个表，并添加了一个删除按钮，这样它就可以删除表中最后记录的行

“删除”按钮起作用，但当我刷新页面时，编辑就消失了，一切都恢复到原始状态

我如何使其在用户编辑页面时永久更改

这是一个演示：

如果这不起作用：

正文{
背景色：#ffffff；
字体系列：candara，monospace；
文本对齐：居中；
字体大小：粗体；
边缘顶部：5px；
文本转换：大写；
高度：600px；
宽度：1000px；
颜色：#1b1186；
}
#删除{
背景色：#1b1186；
宽度：250px；
颜色：白色；
边缘顶部：50px；
}
#删除：悬停{
背景色：#ff4625；
光标：指针；
}
钮扣{
背景色：#1b1186；
边界半径：0px；
边界：0px#中交；
字体系列：candara，monospace；
字体大小：粗体；
边缘顶部：15px；
颜色：#ffffff；
文本对齐：居中；
字号：18px；
填充：10px；
宽度：200px；
过渡：所有1；
光标：指针；
文本转换：大写；
显示：内联块；
文字装饰：无；
}
按钮：悬停{
背景色：#fff06d；
颜色：黑色；
右边填充：25px；
左侧填充：25px；
}
桌子{
边框：5px，#1b1186
}

家
设置
增加小时数
$（文档）.ready（函数（）{
var table=$（'#HOURTABLE'）.DataTable（）；
$（'HOURTABLE tbody'）。在（'click'，'tr'，function（）{
if（$（this）.hasClass（'selected'））{
$（this.removeClass（'selected'）；
}
否则{
表.$（'tr.selected'）。removeClass（'selected'）；
$（this.addClass（'selected'）；
}
});
});
一场
#小时数
日期
组织
描述
1.
4.
4/5/2020
辅导
很有趣
2.
67
4/8/2020
辅导
这很有趣


删除行
var x=document.getElementById（“HOURTABLE”）.rows.length；
函数行（）{
//删除行（索引-0）。
document.getElementById（“HOURTABLE”）.deleteRow（1）；
}
如果没有像PHP、node.js、firebase这样的后端，就无法做到这一点

您可以使用localStorage进行黑客攻击，但只有当用户不删除浏览器数据时，更改才会保留。

如果没有像PHP、node.js、firebase这样的后端，您就无法做到这一点

您可以使用localStorage进行黑客攻击，但只有当用户不删除浏览器数据时，更改才会保留。

首先，如果要显示动态内容，必须使用数据库，没有其他方法。
第二，若要实时更改内容，必须首先使用firebase、websocket或任何其他技术，若要显示动态内容，必须使用数据库，则没有其他方法。
其次，如果您想实时更改内容，您必须使用firebase、websocket或任何其他技术

在本例中，我使用的是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>


家
设置
增加小时数
一场
#小时数
日期
组织
描述


删除行
函数getData（）{
让local=localStorage.getItem（'data'）；
if（local==null）{
local=setData（）；
}
返回JSON.parse（本地）；
}
函数setData（数据=null）{
如果（数据==null）{
资料=
[
{
会议：1，
时间:4,，
日期：“2020年4月5日”，
组织：'辅导'，
描述：“很有趣”
},
{
会议：2，
小时：67，
日期：“2020年4月8日”，
组织：'辅导'，
描述：“很有趣”
}
];
}
const textData=JSON.stringify（数据）；
localStorage.removietem（'data'）；
setItem（'data'，textData）；
返回文本数据；
}
函数生成器OW（行）{
返回`
${row.session}
${row.hours}
${row.date}
${row.organization}
${row.description}
`;
}
函数deleteRow（会话）{
const data=getData（）；
设newArray=[]；
data.forEach（元素=>{
if（element.session！==会话）{
newArray.push（元素）；
}
})
log（newArray）；
setData（新数组）；
加载（）；
}
函数加载（）{
const data=getData（）；
const container=$（'.body container'）；
container.html（“”）；
如果（容器长度>0）{
data.forEach（行=>{
container.append（generateRow（row））；
})
}否则{
容器。外观（“空”）；
}
}
var x=document.getElementById（“HOURTABLE”）.rows.length；
函数deleteRowSelected（）{
常量行=$（'.body container'）。查找（'tr.selected'）；
if（row.length==0）{
警报（“您必须选择一行”）；
}否则{
row.remove（）；
deleteRow（row.data（'session'））；
}
}
$（文档）.ready（函数（）{
变量表=$（'#HOURTABLE'）.DataT