快捷導(dǎo)航

JavaScript實(shí)現(xiàn)生成動(dòng)態(tài)表格和動(dòng)態(tài)效果的方法詳解

更新時(shí)間：2022年02月26日 10:42:01 作者：dawn

這篇文章主要介紹了如何通過(guò)JavaScript語(yǔ)言實(shí)現(xiàn)動(dòng)圖表格的生成以及動(dòng)態(tài)效果的實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下

今天上午完成了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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: