js课程框架实现

来源：互联网发布：macbook 自带软件编辑：程序博客网时间：2024/05/21 11:10

首先是考虑使用jqery进行编程，使用appendTo()等函数进程标签的覆盖插入元素集合操作。比如使用<table>覆盖<div>标签，之后用appendTo()函数将<tr><td>标签插入到<table>，通过指定行列数，动态的生成课程表的表格框架，并且在每个<td>上附上不同的id值，为了使将明确每个<td>的标识，以后插入数据比较容易实现。

下面是js的核心代码

/*创建时间：2016年10月25日创建人：echo_zqh功能：通过自定义函数传入两个参数变量，即行数和列数进行课表的框架生成*/             <script>     $(document).ready(function(){     CreateTable(7,8);     });     function CreateTable(row,cell)//指定行列数生成表格，row为行数，cell为列数     {     var table=$("<table border=\"1\" >");//<table>标签头,设置border属性     table.appendTo($("#createtable"));//将匹配到的<table>追加到另一个class=createtable元素集合中     for(var i=0;i<row;i++)     {     var tr=$("<tr></tr>");//<tr></tr>标签，设置id属性     tr.appendTo(table);//将<tr></tr>加到<table>中          for(var j=0;j<cell;j++)     {     var td=$("<td id="+i+"-"+j+" width=\"200px\" height=\"80px\" align='center'></td>");//<td></td>标签，设置属性     td.appendTo(tr);//<td></td>包含在<tr></tr>中     //指定表格行列插如数据     //指定<td>标签的id标签位置插入     if(i==1&&j==2)     {     $("#"+i+"-"+j).append("<b>hello</b>");     }          //课程时间     if(i==0&&j==0)     {     $("#"+i+"-"+j).append("<b>1-2</b>");     }     if(i==1&&j==0)     {     $("#"+i+"-"+j).append("<b>3-4</b>");     }     if(i==2&&j==0)     {     $("#"+i+"-"+j).append("<b>5-6</b>");     }     if(i==3&&j==0)     {     $("#"+i+"-"+j).append("<b>7-8</b>");     }     if(i==4&&j==0)     {     $("#"+i+"-"+j).append("<b>9</b>");     }     if(i==5&&j==0)     {     $("#"+i+"-"+j).append("<b>10-11</b>");     }     if(i==6&&j==0)     {     $("#"+i+"-"+j).append("<b>12-13</b>");     }     }     }     trend.appendTo(table);     $("#createtable").append("</table>");//</table>结尾     }     </script>

下面是html页面代码

         <table border="1"><tr align="center"><td width="200px" height="20px">时间</td><td width="200px" height="20px">周一</td><td width="200px" height="20px">周二</td><td width="200px" height="20px">周三</td><td width="200px" height="20px">周四</td><td width="200px" height="20px">周五</td><td width="200px" height="20px">周六</td><td width="200px" height="20px">周日</td></tr> </table><div id="createtable"></div>

打开浏览器运行结果如下：

0 0