您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容介绍了“JavaScript怎么实现生成动态表格和动态效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript->动态生成漂亮的表格</title> <style> .table tr{ line-height:200%; } .table td{ width: 100px; } .rowTitleColorSet{background-color: #818080;color: rgb(232, 232, 232);text-align: center;} .evenRowColorSet{background-color: #efefef;color: rgb(8, 8, 8);text-align: center} .oddRowColorSet{background-color: #f8f8f8;color: rgb(128, 128, 128);text-align: center} .focusRowColorSet{background-color: #999;color:#d70008;text-align: center} </style> </head> <body onload="init()"> <div id="demo"> <h2 align="center">学生成绩表</h2> <table cellpadding="1" cellspacing="1" align="center" class="table" bgcolor="#cccccc" id="studentTable"> <tr align="center" class="rowTitleColorSet"> <td>学号</td> <td>姓名</td> <td>语文</td> <td>数学</td> <td>总分</td> </tr> </table> </div> </body> <script> function init(){ //创建studentList对象 var studentList=[ {Id:101,Name:'小明',ChineseScore:81.5,MathScore:87}, {Id:102,Name:'小黄',ChineseScore:61,MathScore:47.5}, {Id:103,Name:'小丽',ChineseScore:89.5,MathScore:83}, {Id:104,Name:'小宋',ChineseScore:56,MathScore:97}, {Id:105,Name:'小王',ChineseScore:82,MathScore:73}, {Id:106,Name:'小李',ChineseScore:31,MathScore:63}, {Id:107,Name:'小华',ChineseScore:49,MathScore:83}, ] //生成表格 for(item in studentList){ //第一步:创建td //创建学号td var tdId=document.createElement("td"); //加入学号 tdId.appendChild(document.createTextNode(studentList[item].Id)); //创建姓名td var tdName=document.createElement("td"); //加入姓名 tdName.appendChild(document.createTextNode(studentList[item].Name)); //创建语文td var tdChineseScore=document.createElement("td"); //加入语文 tdChineseScore.appendChild(document.createTextNode(studentList[item].ChineseScore)); //创建数学td var tdMathScore=document.createElement("td"); //加入数学 tdMathScore.appendChild(document.createTextNode(studentList[item].MathScore)); //创建总分td var tdTotalScore=document.createElement("td"); //加入总分 tdTotalScore.appendChild(document.createTextNode(studentList[item].MathScore+studentList[item].MathScore)); //第二步:生成tr var tr=document.createElement("tr"); //设置行样式 if(parseInt(item)%2==0){ tr.className="evenRowColorSet" }else{ tr.className="oddRowColorSet" } tr.appendChild(tdId); tr.appendChild(tdName); tr.appendChild(tdChineseScore); tr.appendChild(tdMathScore); tr.appendChild(tdTotalScore); //给行添加事件响应 tr.onmouseenter=funcMouseenter;//鼠标移入事件 tr.onmouseout=funcMouseout;//鼠标移出事件 //第三步:生成表格 //var table=document.getElementsByTagName("table")[0];//虽然也可以但不建议使用 var table=document.getElementById("studentTable");//用这个好 table.appendChild(tr); } } function funcMouseenter(event){ this.className='focusRowColorSet' } function funcMouseout(event){ var studentID=this.cells[0].innerHTML; if(parseInt(studentID)%2==0){ this.className="evenRowColorSet" }else{ this.className="oddRowColorSet" } } </script> </html>
效果图一(初始和鼠标移出状态):
效果图二(鼠标移入状态):
“JavaScript怎么实现生成动态表格和动态效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。