我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript实现生成动态表格和动态效果的方法详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript实现生成动态表格和动态效果的方法详解

今天上午完成了Vue实现一个表格的动态样式,那么JavaScript代码能不能实现同样的效果呢?这样也可以学习一下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">
    <h1 align="center">学生成绩表</h1>
    <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实现生成动态表格和动态效果的方法详解的文章就介绍到这了,更多相关JavaScript动态表格内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript实现生成动态表格和动态效果的方法详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript怎么实现生成动态表格和动态效果

本篇内容介绍了“JavaScript怎么实现生成动态表格和动态效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!代码:
2023-06-29

JavaScript如何实现动态生成表格

这篇文章给大家分享的是有关JavaScript如何实现动态生成表格的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。前言在这里实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格
2023-06-22

Vue动态生成表格的行和列如何实现

本篇内容主要讲解“Vue动态生成表格的行和列如何实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue动态生成表格的行和列如何实现”吧!具体的实现代码如下: