JavaScript實(shí)現(xiàn)生成動(dòng)態(tài)表格和動(dòng)態(tài)效果的方法詳解
今天上午完成了Vue實(shí)現(xiàn)一個(gè)表格的動(dòng)態(tài)樣式,那么JavaScript代碼能不能實(shí)現(xiàn)同樣的效果呢?這樣也可以學(xué)習(xí)一下JavaScript的語(yǔ)法,晚上試了一下,完全可以,效果一模一樣。
<!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->動(dòng)態(tài)生成漂亮的表格</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"> <h1 align="center">學(xué)生成績(jī)表</h1> <table cellpadding="1" cellspacing="1" align="center" class="table" bgcolor="#cccccc" id="studentTable"> <tr align="center" class="rowTitleColorSet"> <td>學(xué)號(hào)</td> <td>姓名</td> <td>語(yǔ)文</td> <td>數(shù)學(xué)</td> <td>總分</td> </tr> </table> </div> </body> <script> function init(){ //創(chuàng)建studentList對(duì)象 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){ //第一步:創(chuàng)建td //創(chuàng)建學(xué)號(hào)td var tdId=document.createElement("td"); //加入學(xué)號(hào) tdId.appendChild(document.createTextNode(studentList[item].Id)); //創(chuàng)建姓名td var tdName=document.createElement("td"); //加入姓名 tdName.appendChild(document.createTextNode(studentList[item].Name)); //創(chuàng)建語(yǔ)文td var tdChineseScore=document.createElement("td"); //加入語(yǔ)文 tdChineseScore.appendChild(document.createTextNode(studentList[item].ChineseScore)); //創(chuàng)建數(shù)學(xué)td var tdMathScore=document.createElement("td"); //加入數(shù)學(xué) tdMathScore.appendChild(document.createTextNode(studentList[item].MathScore)); //創(chuàng)建總分td var tdTotalScore=document.createElement("td"); //加入總分 tdTotalScore.appendChild(document.createTextNode(studentList[item].MathScore+studentList[item].MathScore)); //第二步:生成tr var tr=document.createElement("tr"); //設(shè)置行樣式 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); //給行添加事件響應(yīng) tr.onmouseenter=funcMouseenter;//鼠標(biāo)移入事件 tr.onmouseout=funcMouseout;//鼠標(biāo)移出事件 //第三步:生成表格 //var table=document.getElementsByTagName("table")[0];//雖然也可以但不建議使用 var table=document.getElementById("studentTable");//用這個(gè)好 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>
效果圖一(初始和鼠標(biāo)移出狀態(tài)):
效果圖二(鼠標(biāo)移入狀態(tài)):
到此這篇關(guān)于JavaScript實(shí)現(xiàn)生成動(dòng)態(tài)表格和動(dòng)態(tài)效果的方法詳解的文章就介紹到這了,更多相關(guān)JavaScript動(dòng)態(tài)表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 原生javaScript做得動(dòng)態(tài)表格(注釋寫(xiě)的很清楚)
- js生成動(dòng)態(tài)表格并為每個(gè)單元格添加單擊事件的方法
- JS實(shí)現(xiàn)動(dòng)態(tài)表格的添加,修改,刪除功能(推薦)
- JavaScript實(shí)現(xiàn)簡(jiǎn)單動(dòng)態(tài)表格
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格效果
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格的方法詳解
- java前端javascript生成動(dòng)態(tài)表格示例演示
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格的示例代碼
相關(guān)文章
詳細(xì)聊聊JavaScript是如何影響DOM樹(shù)構(gòu)建的
DOM (Document Object Model) 的全稱(chēng)是文檔對(duì)象模型,它可以以一種獨(dú)立于平臺(tái)和語(yǔ)言的方式訪(fǎng)問(wèn)和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu),這篇文章主要給大家介紹了關(guān)于JavaScript是如何影響DOM樹(shù)構(gòu)建的相關(guān)資料,需要的朋友可以參考下2021-08-08JS實(shí)現(xiàn)將數(shù)據(jù)導(dǎo)出到Excel的方法詳解
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)將數(shù)據(jù)導(dǎo)出到Excel的兩種方法詳解,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以動(dòng)手嘗試一下2022-06-06JS簡(jiǎn)單生成由字母數(shù)字組合隨機(jī)字符串示例
這篇文章主要介紹了JS簡(jiǎn)單生成由字母數(shù)字組合隨機(jī)字符串,結(jié)合實(shí)例形式分析了javascript使用Math.random()生成隨機(jī)字符串相關(guān)操作技巧,需要的朋友可以參考下2018-05-05HTML+JS實(shí)現(xiàn)監(jiān)控切屏功能
這篇文章主要介紹了如何利用HTML和JavaScript實(shí)現(xiàn)監(jiān)控切屏功能,監(jiān)控是否離開(kāi)當(dāng)前頁(yè)面,文中的示例代碼講解詳細(xì),需要的可以參考一下2022-03-03js實(shí)現(xiàn)彈窗插件功能實(shí)例代碼分享
這篇文章主要介紹了2013-12-12javascript實(shí)現(xiàn)iframe框架延時(shí)加載的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)iframe框架延時(shí)加載的方法,可基于setTimeout實(shí)現(xiàn)這一功能,是非常實(shí)用的技巧,需要的朋友可以參考下2014-10-10bootstrap-table組合表頭的實(shí)現(xiàn)方法
本篇文章主要介紹了bootstrap-table組合表頭的實(shí)現(xiàn)方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09