const tbody = document.getElementById("tbody"); const img = document.getElementById("img"); const form = layui.form; const username = document.getElementsByName("username")[0]; let recycleIds = []; getList(); const aaa=document.getElementsByClassName("aaa")[0] aaa.onclick=function () { const name = username.value; if (name) { $.getJSON("/attendance/search/"+name, {}, function (data) { f1(data); }); } else { getList(); } return false; }

这段代码是用 JavaScript 和 layui 框架来实现一个具有搜索功能的表格页面，其中包括一个表格 tbody 和一个图片 img，以及一个表单 form 和一个输入框 username。在页面加载时，会调用 getList() 方法来获取数据列表。当用户在输入框中输入姓名并点击搜索按钮时，会通过 AJAX 请求向服务器发送搜索请求，并将搜索结果渲染在表格中。如果搜索框为空，则会重新加载完整的数据列表。另外，代码还添加了一个点击事件监听器，当用户点击 aaa 元素时会触发搜索操作。

相关问题

// 编辑数据 function editData(title, type) { const data = questionsData.find(q => q.title === title && q.type === type); title.value = data.title; type.value = data.type; options[0].value = data.options.A; options[1].value = data.options.B; options[2].value = data.options.C; options[3].value = data.options.D; answer.value = data.answer; score.value = data.score; } // 删除数据 function deleteData(title, type) { questionsData = questionsData.filter(q => !(q.title === title && q.type === type)); localStorage.setItem('questionsData', JSON.stringify(questionsData)); showData(); } // 选择类型 function selectType() { if (type.value === 'fill') { A.value = ''; B.value = ''; C.value = ''; D.value = ''; A.disabled = true; B.disabled = true; C.disabled = true; D.disabled = true; } else { A.disabled = false; B.disabled = false; C.disabled = false; D.disabled = false; } } // 显示数据 showData(); // 编辑和删除数据 const tbody = document.getElementById('tbody'); tbody.addEventListener('click', e => { const target = e.target; if (target.classList.contains('edit')) { editData(target.dataset.title, target.dataset.type); } else if (target.classList.contains('delete')) { const isConfirmed = confirm('确认删除此题目吗？'); if (isConfirmed) { deleteData(target.dataset.title, target.dataset.type); } } });为什么当我编辑完成 点击保存时不会实时更新并显示在页面上 且localstorage中也没有更新

这可能是因为你没有在保存数据时更新 questionsData 数组中对应的数据。在 editData 函数中，你只是更新了表单中的值，但没有将更新后的值写回 questionsData 数组中。你需要在保存数据时将表单中的值写回 questionsData 数组中，并重新写入 localStorage 中。这样，下次打开页面时就可以正确地加载更新后的数据了。你可以使用类似以下的代码将更新后的数据保存回 questionsData 和 localStorage 中：

function saveData() {
  // 获取表单中的值
  const title = document.getElementById('title');
  const type = document.getElementById('type');
  const A = document.getElementById('A');
  const B = document.getElementById('B');
  const C = document.getElementById('C');
  const D = document.getElementById('D');
  const answer = document.getElementById('answer');
  const score = document.getElementById('score');

  // 根据表单中的值构造一个新的数据对象
  const newData = {
    title: title.value,
    type: type.value,
    options: {
      A: A.value,
      B: B.value,
      C: C.value,
      D: D.value,
    },
    answer: answer.value,
    score: score.value,
  };

  // 更新 questionsData 数组中对应的数据
  const index = questionsData.findIndex(q => q.title === newData.title && q.type === newData.type);
  if (index !== -1) {
    questionsData[index] = newData;
  } else {
    questionsData.push(newData);
  }

  // 将更新后的数据保存回 localStorage 中
  localStorage.setItem('questionsData', JSON.stringify(questionsData));

  // 清空表单
  title.value = '';
  type.value = '';
  A.value = '';
  B.value = '';
  C.value = '';
  D.value = '';
  answer.value = '';
  score.value = '';

  // 显示更新后的数据
  showData();
}

这样，在编辑完成并点击保存时，数据会被正确地更新，并重新显示在页面上。

修改以下代码增加表格分页 let popup = document.createElement('div'); let table = document.createElement('table'); let thead = document.createElement('thead'); let tbody = document.createElement('tbody'); let tableHead = '<tr><th>映射对象id</th><th>映射对象类型</th><th>映射对象名称</th><th>操作</th></tr>'; let tableBody = '' for (let i = 0; i < dom.tableData.length; i++) { const obj = dom.tableData[i] tableBody = tableBody + '<tr><td style="text-align: center;">'+ obj.dataId +'</td><td style="text-align: center;">'+ obj.type +'</td><td style="text-align: center;">'+ obj.dataName +'</td><td style="text-align: center;"><button class="info-btn" data-dataid="'+ obj.dataId +'" data-type="'+ obj.type +'" data-dataname="'+ obj.dataName +'">查看</button></td></tr>' } thead.innerHTML = tableHead; tbody.innerHTML = tableBody; table.appendChild(thead); table.appendChild(tbody); popup.appendChild(table);

可以使用第三方库或者手写实现分页功能。以下是手写实现的示例代码：

1. 在HTML中添加分页元素

<div id="pagination"></div>

2. 修改代码增加分页逻辑

let popup = document.createElement('div');
let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');

let currentPage = 1; // 当前页
let pageSize = 10; // 每页显示的数据量

// 根据当前页和每页显示的数据量，截取数据
let startIndex = (currentPage - 1) * pageSize;
let endIndex = startIndex + pageSize;
let tableData = dom.tableData.slice(startIndex, endIndex);

let tableHead = '<tr><th>映射对象id</th><th>映射对象类型</th><th>映射对象名称</th><th>操作</th></tr>';
let tableBody = '';
for (let i = 0; i < tableData.length; i++) {
  const obj = tableData[i];
  tableBody = tableBody + '<tr><td style="text-align: center;">'+ obj.dataId +'</td><td style="text-align: center;">'+ obj.type +'</td><td style="text-align: center;">'+ obj.dataName +'</td><td style="text-align: center;"><button class="info-btn" data-dataid="'+ obj.dataId +'" data-type="'+ obj.type +'" data-dataname="'+ obj.dataName +'">查看</button></td></tr>';
}

thead.innerHTML = tableHead;
tbody.innerHTML = tableBody;
table.appendChild(thead);
table.appendChild(tbody);
popup.appendChild(table);

// 计算总页数
let totalPages = Math.ceil(dom.tableData.length / pageSize);

// 生成分页按钮
let pagination = document.getElementById('pagination');
for (let i = 1; i <= totalPages; i++) {
  let btn = document.createElement('button');
  btn.innerText = i;
  btn.onclick = function() {
    currentPage = i;
    renderTable();
  }
  pagination.appendChild(btn);
}

function renderTable() {
  // 清空表格和分页按钮
  table.innerHTML = '';
  pagination.innerHTML = '';

  // 根据当前页和每页显示的数据量，截取数据
  let startIndex = (currentPage - 1) * pageSize;
  let endIndex = startIndex + pageSize;
  let tableData = dom.tableData.slice(startIndex, endIndex);

  let tableBody = '';
  for (let i = 0; i < tableData.length; i++) {
    const obj = tableData[i];
    tableBody = tableBody + '<tr><td style="text-align: center;">'+ obj.dataId +'</td><td style="text-align: center;">'+ obj.type +'</td><td style="text-align: center;">'+ obj.dataName +'</td><td style="text-align: center;"><button class="info-btn" data-dataid="'+ obj.dataId +'" data-type="'+ obj.type +'" data-dataname="'+ obj.dataName +'">查看</button></td></tr>';
  }

  tbody.innerHTML = tableBody;
  table.appendChild(tbody);
  popup.appendChild(table);

  // 重新生成分页按钮
  for (let i = 1; i <= totalPages; i++) {
    let btn = document.createElement('button');
    btn.innerText = i;
    btn.onclick = function() {
      currentPage = i;
      renderTable();
    }
    pagination.appendChild(btn);
  }
}

renderTable();