• 售前

  • 售后

热门帖子
入门百科

js实现单击可修改表格

[复制链接]
bfdg3 显示全部楼层 发表于 2021-10-26 13:18:43 |阅读模式 打印 上一主题 下一主题
纯js实现单击可修改表格(类似成绩单),供各人参考,具体内容如下
功能:实现成绩单单击表格可对数据进行修改且对输入的数字巨细有验证比方不小于0不大于100,总分栏会对总分进行求和(使用了es6的模板字符串)。
实现效果:

代码:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         table{
  10.             margin: 0 auto;
  11.             z-index:999999;
  12.             border-collapse: collapse;
  13.         }
  14.         th {
  15.          background-color: #4CAF50;
  16.          /* background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%); */
  17.          color: white;
  18. }
  19.         table th,tr,td{
  20.             width:100px;
  21.             text-align: center;
  22.         }
  23.         table input{
  24.             border:none;
  25.             outline: none;
  26.             width: 100%;
  27.         }
  28.         .inputClass{
  29.             width:80px;
  30.             height:100%
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div style="position: relative;margin-top: 200px;text-align:center">
  36.         <h2 style="margin-bottom: 50px;">成绩登记表</h2>
  37.         <div >
  38.             <table border="1">
  39.                 <thead>
  40.                     <th>学号</th>
  41.                     <th>姓名</th>
  42.                     <th>语文</th>
  43.                     <th>数学</th>
  44.                     <th>英语</th>
  45.                     <th>总分</th>
  46.                 </thead>
  47.                 <tbody>
  48.                 </tbody>
  49.             </table>
  50.         </div>
  51.     </div>
  52. </body>
  53. <script>
  54.     // 数组
  55.     let data = [
  56.         {
  57.             id:1101,
  58.             name:'小王',
  59.             Chinese:100,
  60.             Math:80,
  61.            English:91,
  62.             total:271
  63.         },
  64.         {
  65.             id:1102,
  66.             name:'小曾',
  67.             Chinese:88,
  68.             Math:87,
  69.             English:92,
  70.             total:267
  71.         },
  72.         {
  73.             id:1103,
  74.             name:'小赵',
  75.             Chinese:75,
  76.             Math:20,
  77.             English:86,
  78.             total:181
  79.         },
  80.         {
  81.             id:1104,
  82.             name:'小周',
  83.             Chinese:65,
  84.             Math:81,
  85.             English:83,
  86.             total:229
  87.         }
  88.     ]
  89.     window.onload = function(){
  90.         initdata()
  91.     }
  92.     //初始化数据
  93.     // 模板填入数据
  94.     function initdata(){
  95.         let tbodyinner = document.getElementsByTagName("tbody")[0]
  96.         let html = ''
  97.         for(let i=0;i<data.length;i++){
  98.             html+=`
  99.             <tr>
  100.                 <td>${data[i].id}</td>
  101.                 <td>${data[i].name}</td>
  102.                 <td name="grade" class="chinese">${data[i].Chinese}</td>
  103.                 <td name="grade" class="math">${data[i].Math}</td>
  104.                 <td name="grade" class="english">${data[i].English}</td>
  105.                 <td class="allscore">${parseInt(data[i].Chinese)+parseInt(data[i].Math)+parseInt(data[i].English)}</td>
  106.             </tr>
  107.             `
  108.         }
  109.         // tbody.innerHTML="..."往tbody中添加内容
  110.         tbodyinner.innerHTML = html
  111.         getNode()
  112.     }
  113.     // 监听click事件
  114.     function getNode(){
  115.         let subject = document.getElementsByName("grade")
  116.         for(let i=0;i<subject.length;i++){
  117.             subject[i].addEventListener('click',function(){
  118.                 edit(this)
  119.             })
  120.         }
  121.     }
  122.     //鼠标 移入点
  123.     function edit(i){
  124.         let inputlen = document.getElementsByTagName('input').length
  125.         let oldvalue = i.innerHTML
  126.         if(inputlen==0){
  127.             // 设置该标签为空
  128.             i.innerHTML = ''
  129.             // 添加input对象
  130.             let inp = document.createElement("input")
  131.             inp.value = oldvalue
  132.             inp.classList.add("inputClass")
  133.             // 添加子节点
  134.             i.appendChild(inp)
  135.             // 获取文本中的内容
  136.             inp.select()
  137.             // 失去焦点事件
  138.             inp.onblur = function(){
  139.                 if(inp.value<=100&&inp.value>=0){
  140.                     i.innerHTML = inp.value
  141.                     let val1 = i.parentNode.childNodes[5].innerHTML
  142.                     let val2 = i.parentNode.childNodes[7].innerHTML
  143.                     let val3 = i.parentNode.childNodes[9].innerHTML
  144.                     i.parentNode.childNodes[11].innerHTML = parseInt(val1)+parseInt(val2)+parseInt(val3)
  145.                 }else{
  146.                  
  147.                     return alert("数据值不对,请重新输入!");
  148.                 }
  149.             }
  150.         }
  151.     }
  152. </script>
  153. </html>
复制代码
以上就是本文的全部内容,希望对各人的学习有所资助,也希望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作