美文网首页
[项目]课程表 v1.2

[项目]课程表 v1.2

作者: 路人乙小明 | 来源:发表于2015-12-14 19:24 被阅读0次

v1.1里面我们遇到了v1.0埋下的坑,因为乱写id所以导致难以参数化。虽然提前拟定好id命名的方法也可以,但是其实在课程表这种问题里面,选取单元格是不应该靠id的,尤其在我们依靠循环对课程表内容进行填充的时候,遍历才是最好的选择。

需要遍历的时候引入jQuery就很合适了,话说我也懒得写getElementById了,别跟我说学jQuery之前一定要把js学会,我看到document.getElementById就烦,用$("#")有什么不好。

如果要在一个网页里面用jquery,那首先要把jquery给引入到自己的网页里面,引入的方法是这样的:

<script src="你的jquery文件链接"></script>

这个可以放在head里面,或者body的结尾。jquery是一个非常常用的框架。用jquery能做的东西,javascript也是可以做的,而且实际上就是通过javascript实现的,但是在jquery里面会方便很多。

jquery可以从http://jquery.com/下载,假如已经下载了1.11.3版本并且和当前html文件放在一个目录那么上面的html代码就是这样的了:

<script src="jquery-1.11.3.js"></script>

现在可以先测试一下jQuery能不能用

$("table tr th").css("color","blue")

这条语句是找table元素下面的后辈元素tr下面的后辈元素th,找齐了以后把这些th的字体颜色设置成蓝色。如果jQuery引入正确,上面这段代码又放对地方了的话应该能看到表格第一行现在是蓝色的了

如果没变颜色,嗯,那试试$("body").css("color","blue")?根据坊间说法,<script>标签最好放在body的最后面,不知道放对没有?th是一种特殊的单元格,表示表头,不知道你的表里面有没有把th全写成td了?

现在说回来我们要怎么把v1.0的坑给填上,用jQuery的遍历就好,比较常用的遍历命令是children(),find()也可以,关于table下属元素的遍历可以看看这里[jQuery]table元素和其他元素在遍历的时候有点不一样。简而言之,如果要获取第三行第四列(这是星期几第几节的课呢?)应该这么写:

$("table").children().children("tr:eq(2)").children("td:eq(3)")

这么写也可以:

    $("table").children().children().eq(2).children().eq(3)

这么写也可以:

    $("table tr:eq(2) td:eq(3)")

现在用这种写法就可以重写一下v1.1的功能2了。之前的功能2是这样的:

function cellUpdate(weekday,classNum){
 document.getElementById(weekdays[weekday]+classNum+"").innerHTML=getCellContent(weekday,classNum)
}

用jQuery我们就不从id入手了,而是用遍历的方式。遍历可以理解为数格子,比如我们现在要选择周一第三节,周一在第二列,第三节在第四行,所以我们只需要数到第四行第二列就可以了,然后因为我们用eq()作为筛选方式(也就是说我们不会把所有的行或者一行里面所有的单元格都拿过来,而是按照这些元素在上一层级的排序进行选择),eq这种筛选呢,是从0开始计数的,当然了,也有从1开始计数的(css那一块),那个我们先不讲。那功能2应该怎么改呢?

function cellUpdate(weekday,classNum){
  $("table").children().children().eq(这里写什么?).children().eq(这里些什么?).html(getCellContent(weekday,classNum))
}

这样就ok了,.html()的用法请自查api文档。

相关文章

  • [项目]课程表 v1.2

    在v1.1里面我们遇到了v1.0埋下的坑,因为乱写id所以导致难以参数化。虽然提前拟定好id命名的方法也可以,但是...

  • 实现课程表

    实现一个简单的课程表 一开始,项目要求实现类似于 “超级课程表” 的那种课程表 我发现后台给的数据是这样的 两个m...

  • 2018-09-05

    尊敬的用户: YOYOW APP V1.2已发布,IOS版本同步上线,不是V1.2版本的用户请先卸载旧的APP,重...

  • YOYOW APP V1.2发布,新增第三方回复功能

    尊敬的用户: YOYOW APP V1.2已发布,IOS版本同步上线,不是V1.2版本的用户请先卸载旧的APP,重...

  • WakeUp课程表项目指南

    写在前面 大学生活一下子就过去两年了,在这里也小小地感慨一下,时间过得好快哦。最近心情比较复杂,所以大学生活究竟过...

  • Android Studio/JetBrains IDE 翻译插

    Translation Plugin V1.2 Android Studio/IntelliJ IDEA 翻译插件...

  • YOYOW钱包App V1.3开发进展

    YOYOW App经过一系列的开发工作已更新至版本V1.2。在V1.2版本中,我们上线了iOS版本并添加了信息售卖...

  • [项目]课程表 v1.0

    假如现在要做一个极为简单的课程表,就是从一个javascript的object里面读取数据,然后往html里面的表...

  • [项目]课程表 v1.1

    之前,也就是课程表v1.0里面让人重复40次的那段代码,其实做的就是两件事: 根据星期几第几节选取对应的表格单元格...

  • android选择器汇总、仿最美应用、通用课程表、卡片动画、智能

    Android精选源码 android各种 选择器 汇总源码 高仿最美应用项目源码 android通用型课程表效果...

网友评论

      本文标题:[项目]课程表 v1.2

      本文链接:https://www.haomeiwen.com/subject/kgduhttx.html