动态添加表格行列来展示表单获取的信息

    科技2022-08-24  108

    获取一个学生数据: 

    获取多个学生数据: 

    具体代码如下: 

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</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="显示总分" onclick="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> <script> // 功能实现:增加函数addTable(stu)实现动态添加行与列来展示学生信息。 function addTable(stu){ var tab=document.getElementById("cj"); var colsNum=5; rs=tab.insertRow(tab.rows.length); for(var i=0;i<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){ documnet.getElementById("info").innerHTML+="学号重!"; return; } } students[count]=stu; count++; addTable(stu); } } </script> </body> </html>

     

    Processed: 0.008, SQL: 10