在实现代码前有一下几点需要注意:
1.构建dom元素,即将口诀表的框架给搭建好。例如:生成一个div可以如下实现:
<script type="text/javascript">
$(function () {
var $div = $("<div> DIV </div>");
$("body").append($div);
});
</script>
2.dom对象和jquery对象是有区别的,特别要注意你操作的是那种对象。
在获取jquery机会的某一项是我们可以通过eq,get,索引来获取,但值得注意的是eq返回的是jquery对象,而get和索引返回的是dom对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qqqqq</title>
<script type="text/javascript" src="jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
function create(){
var cellss = new Array()
for (var i = 0; i < 9; i++) {
cellss[i] = new Array()
}
for (var out = 1; out <= 9; out++) {
for (var inside = 1; inside <= out; inside++) {
cellss[out - 1][inside - 1] = out + "x" + inside + "=" + out * inside;
}
}
return cellss
}
function ShowTable(cellss){
$(function(){
var $div1 = $("<div class='box'></div>");
$("body").append($div1);
$(function(){
$(function(){
for (out in cellss) {
for (var $i = 0; $i < 9; $i++) {
var $ul = $("<ul class='faceul' time=" + $i + "></ul>")
$("div").append($ul);
for (inside in cellss[out]) {
var number = cellss[out][inside].substr(4, cellss[out][inside].length - 1);
var $li = $("<li class=" + number + " >" + cellss[out][inside] + "</li>");
var $arr = $("ul");
for ($time = 0; $time < $arr.length; $time++) {
if (parseInt($("ul").eq($time).attr("time")) == $i) {
$("ul").eq($time).append($li);
}
}
}
break;
}
}
})
})
})
}
function search(){
var $arr = $("li");
for ($i = 0; $i < $arr.length; $i++) {
if (parseInt($("li").get($i).className) % 2 == 0) {
$("li").eq($i).css("color", "red");
}
}
}
</script>
<style>
.box {
width: 3000px;
height: 300px;
}
.faceul {
height: 17px;
display: block;
}
.faceul li {
list-style-type: none;
float: left;
margin-left: 10px;
display: block;
width: 48px;
}
</style>
</head>
<script type="text/javascript">
var array = create();
ShowTable(array);
</script>
<body>
<input type="button" value="change!"οnclick="search()"/>
</body>
</html>
效果如下图: