JavaScript实现单击可编辑成绩单

最新推荐文章于 2022-05-25 13:30:59 发布

阿走同学

最新推荐文章于 2022-05-25 13:30:59 发布

阅读量313

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/azou1234/article/details/117996927

版权

该博客介绍如何使用JavaScript实现一个功能，即点击成绩单表格即可编辑数据，数据由随机数生成。同时，博客中提到对输入的数字进行了正则验证，确保值在0到100之间，并实现了成绩的自动求和功能。

摘要由CSDN通过智能技术生成

功能：实现成绩单单击表格可对数据进行修改，数据通过随机数生成。且对输入的数字大小有正则验证例如不小于0不大于100，并进行求和。
截图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html.body {
        width: 100%;
        height: 100%;
      }

      h1 {
        margin-top: 50px;
        text-align: center;
      }

      #main {
        margin-top: 50px;
      }

      #t {
        margin: 0 auto;
        width: 50%;
        border-collapse: collapse;
      }

      thead {
        background-color: rgb(235, 228, 228);
      }

      caption {
        font-size: 24px;
        margin: 12px;
        background-color: #99ccff;
      }

      th {
        background-color: #eee;
      }

      th,
      td {
        text-align: center;
        border: solid 1px black;
        padding: 5px;
        width: 50px;
      }

      tfoot td {
        text-align: center;
        color: #99ccff;
      }
    </style>
  </head>

  <body>
    <h1>可编辑表格</h1>
    <div id="main">
      <table id="t">
        <tr>
          <th>学号</th>
          <th>姓名</th>

最低0.47元/天解锁文章

阿走同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现单击可编辑成绩单

功能：实现成绩单单击表格可对数据进行修改，数据通过随机数生成。且对输入的数字大小有正则验证例如不小于0不大于100，并进行求和。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" c
复制链接

扫一扫

专栏目录