如何实现点击学生数据仅展示对应ID的考勤数据？附现有代码

我有两个表单，分别用于存储学生数据、日期与考勤状态数据。当前点击考勤按钮时存在展示异常，需求是实现点击某条学生数据时，仅展示该ID对应的考勤数据。

考勤表单数据存储代码 #

function saveatt() {  
  // 从localStorage获取数据并存储到attendancesheet数组
  // 必须用JSON.parse，因为存储的是字符串，需要转为数组
  attendancesheet = JSON.parse(localStorage.getItem("stdlist")) ?? [];  
  // 获取最后一条数据的ID，用于新数据ID生成
  var id;  
  attendancesheet.length != 0  
    ? attendancesheet.findLast((item) => (id = item.id))  
    : (id = 0);  
  if (document.getElementById("id").value) {  
    // 根据表单值修改attendancesheet数组
    var att=[];        
    var Present = document.getElementById("Present");  
    if(Present.checked){  
        att.push(Present.value)  
    }  
    var Absent = document.getElementById("Absent");  
    if(Absent.checked){  
        att.push(Absent.value)  
    }    
    attendancesheet.forEach((value) => {  
      if (document.getElementById("id").value == value.id) {  
          value.date = document.getElementById("date").value;  
          value.attendance = att;  
      }  
    });
}

学生数据相关代码 #

学生数据的实现逻辑与考勤存储逻辑一致，仅数组名称为contactlist而非attendancesheet，相关代码如下：

function studentData() {  
    studenttable.innerHTML = ``;  
    // 从localStorage获取数据并存储到attendancesheet数组
    // 必须用JSON.parse，因为存储的是字符串，需要转为数组
    attendancesheet = JSON.parse(localStorage.getItem("stdlist")) ?? [];  
    // 循环数据并展示到表格中
    attendancesheet.forEach(function (value, i) {  
      studenttable.innerHTML += `
              <tr>
                  <td>${i + 1}</td>
                  <td>${value.date}</td>
                  <td>${value.attendance}</td>
                  <td>
                      <button class="btn btn-sm btn-success" onclick="findreport(${value.id})">
                          <i class="fa fa-edit"></i>
                      </button>
                  </td>
                  <td>
                      <button class="btn btn-sm btn-danger" onclick="removeatt(${value.id})">
                          <i class="fa fa-trash"></i>
                      </button>
                  </td>
              </tr>`;
    });
}  

function findreport(id){  
    // 从localStorage获取数据并存储到attendancesheet数组
    // 必须用JSON.parse，因为存储的是字符串，需要转为数组
    attendancesheet = JSON.parse(localStorage.getItem('stdlist')) ?? [];  
    attendancesheet.forEach(function (value){  
        if(value.id == id){  
           document.getElementById('id').value = value.id;  
           document.getElementById('date').value = value.date;  
           // document.getElementById('attendance').value = value.attendance;  
        }  
    });
}   

function removeatt(id){  
    // 从localStorage获取数据并存储到attendancesheet数组
    // 必须用JSON.parse，因为存储的是字符串，需要转为数组
    attendancesheet = JSON.parse(localStorage.getItem('stdlist')) ?? [];  
    attendancesheet = attendancesheet.filter(function(value){  
         return value.id != id;  
     });  
    // 将数组保存到localStorage
    localStorage.setItem('stdlist', JSON.stringify(attendancesheet));  
    // 重新获取数据并渲染
    studentData();
}

内容的提问来源于stack exchange，提问作者dhimant patel