实现为表格动态添加行

最新推荐文章于 2024-05-18 13:50:21 发布

求哦耶可也

最新推荐文章于 2024-05-18 13:50:21 发布

阅读量474

点赞数

文章标签： elementui wpf webview

本文链接：https://blog.csdn.net/qq_58625780/article/details/122173671

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <form name="form1">
           学号：<input name="stuId"><br>
           姓名：<input name="name"><br>
           C 语言： <input name="c"><br>
           动态脚本：<input name="js"> <br>
           <input type="button" value="添加学生成绩" οnclick="SumShow()">
           <input type="reset" value="重置输入内容 ">
       </form>
       <div id="info"></div>
       <table id="cj" cellspacing="0" width="100%" align="center" border="1">
           <caption style=" font-size:28px;line-height: 50px; color: blue ;"> 学生基本信息统计表</caption>
           <tr>
               <th>学号</th>
               <th>姓名 </th>
               <th>C语言</th>
               <th>动态脚本</th>
               <th>总分</th>
           </tr>
       </table>

   </body>
   <script>
               //请在此处输入javascript或jquery代码
               function addTable(stu){
                   var tab=document.getElementById("cj");
                   var colsNum=5;
                   rs=tab.insertRow(tab.rows.length);
                   for(var i=0;1<colsNum;i++)
                       rs.insertCell(i);
                   rs.cells[0].innerHTML-stu.Id;
                   rs.cells[1].innerHTML-stu.name;
                   rs.cells[2].innerHTML-stu.c;
                   rs.cells[3].innerHTML-stu.js;
                   rs.cells[4].innerHTML-stu.summation();
               }
               function Student(Id,name,c,js){
                   this.Id=Id;
                   this.name=name;
                   this.c=parseFloat(c);
                   this.js=parseFloat(js);
               }
               Student.prototype.summation=function(){
                   return this.c+this.js;
               }
               var count;
               var students=new Array();
               function SumShow(){
                   with(form1){
                       if(elements[0].value==""||elements[1].value==""){
                           document.getElementById('info').innerHTML="学号姓名不能为空!";
                           return;
                       }
                       for(var i=2;i<4;i++){
                           var s=parseFloat(elements[i].value);
                           if(s>100||s<0||isNaN(s)){
                               document.getElementById('info').innerHTML="成绩要在0到100之间，请从新输入！";
                               return;
                           }
                       }
                   stu=new Student(elements[0].value,elements[1].value,elements[2].value,elements[3].value);
                   document.getElementById('info').innerHTML="";
                   for(n in students){
                       if(students[n].Id==stu.Id){
                           document.getElementById('info') .innerHTML + "学号重复！！！";
                           return;
                       }
                   }
                   students[count]=stu;
                   count++;
                   addTable(stu);
                   }
               }
           </script>
</html>

求哦耶可也

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现为表格动态添加行

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form name="form1"> 学号：<input name="stuId"><br> ...
复制链接

扫一扫