[第六季]10.对象、数组及表格处理

最新推荐文章于 2024-04-11 07:00:00 发布

低调的嚣张的程序员

最新推荐文章于 2024-04-11 07:00:00 发布

阅读量277

点赞数

分类专栏： 008 JavaScript

本文链接：https://blog.csdn.net/zeephom/article/details/77075203

版权

008 JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

这个很明显了,这里就不总结了

5.自测代码

2.课堂笔记

(1)首先定义book对象,然后创建数组,里面存放了5个对象,然后用循环的方式打印到表格中.
<body>



<table id="tb">
<tr><th>书名</th><th>作者</th><th>价格</th></tr>
<script language="javascript">
function Book(name,author,price)
{
    this.name=name;
    this.author=author;
    this.price=price;
}

var books=new Array();
books[0]=new Book("Javascript从入门到精通","李智同",45);
books[1]=new Book("JQuery全面提速","赵增敏",48);
books[2]=new Book("零基础学Java","王志丹",62);
books[3]=new Book("J2EE王者之路","刘雪",88);
books[4]=new Book("Andriod开发之路","肖华兵",65);
for(var i=0;i<books.length;i++)
{
    document.write("<tr>");
        document.write("<td>");
        document.write(books[i].name);
        document.write("</td>");
        document.write("<td>");
        document.write(books[i].author);
        document.write("</td>");
        document.write("<td>");
        document.write(books[i].price);
        document.write("</td>");
    document.write("</tr>");
}
</script>
</table


</body>
(2)从网上复制样式表然后修改
<style type="text/css">
table#tb
{
    font-family: verdana,arial,sans-serif;
    font-size:16px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}
table#tb th 
{
    background:#b5cfd2 url('cell-blue.jpg');
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999999;
}
table#tb td 
{
    background:#dcddc0 url('cell-grey.jpg');
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999999;
}
</style>
</head>
(3)给表格添加序号
表头
<th>&nbsp;</th>
表体
document.write("<td>");
        document.write(i+1);
        document.write("</td>");

(4)添加一行对勾,并且设置第一个选中,后面都选中,反之亦然.
表头
<th><input type="checkbox" name="op" onclick="setIt()" /></th>
表体
document.write("<td>");
        document.write("<input type='checkbox' name='op' />");
        document.write("</td>");
编辑函数,设置
function setIt()
{
    for(var i=0;i<document.getElementsByName("op").length;i++)
    {
        document.getElementsByName("op").item(i).checked=
        document.getElementsByName("op").item(0).checked;
    }
}