美文网首页
六、JavaScript--6、对象、数组及表格处理

六、JavaScript--6、对象、数组及表格处理

作者: cybeyond | 来源:发表于2018-06-01 15:16 被阅读0次

    1、对象

    方法一、直接创建对象:

    person=new Object();
    person.firstname="Bill";
    person.lastname="Gates";
    person.age=56;
    person.eyecolor="blue";

    替代语法:

    person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

    方法二、使用函数来构造对象:

    function Person(firstname,lastname,age,eyecolor)
    {
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    }

    var myFather=new Person("Bill","Gates",56,"blue");

    2、数组对象

    方法一:

    var mycars=new Array()
    mycars[0]="Saab"
    mycars[1]="Volvo"
    mycars[2]="BMW"

    var mycars=new Array(3)
    mycars[0]="Saab"
    mycars[1]="Volvo"
    mycars[2]="BMW"

    方法二:
    var mycars=new Array("Saab","Volvo","BMW")

    3、示例:一个书单,当方框选中时全中,为空时全空

    <html>
    <head>
    <title>这是对象数组测试网页</title>
    <style type="text/css">
    table#tb{
        font-family:verdana,arial,sans-serif;
        font-size:16px;
        color:#333333;
        border-width:1px;
        border-color:#666666;
        border-collapse:collapse;
    }
    table#tb th{
        border-width:1px;
        padding:8px;
        border-style:solid;
        border-color:#666666;
        background-color:#dedede;
    }
    table#tb td{
        border-width:1px;
        padding:8px;
        border-style:solid;
        border-color:#666666;
        background-color:#ffffff;
    }
    </style>
    </head>
    <body>
    <table id="tb">
    <tr><th><input type="checkbox" name="op" onclick="setIt()"/></th><th>&nbsp;</th><th>书名</th><th>作者</th><th>价格</th></tr>
    <script language="javascript">
    function setIt()
    {
        for(var i=0;i<document.getElementsByName("op").length;i++)
        {
            document.getElementsByName("op").item(i).checked=
            document.getElementsByName("op").item(0).checked;
        }
    }
    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("<input type='checkbox' name='op'/>");
        document.write("</td>");
        document.write("<td>");
        document.write(i+1);
        document.write("</td>");
        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>
    </html>
    
    执行结果1
    执行结果2

    相关文章

      网友评论

          本文标题:六、JavaScript--6、对象、数组及表格处理

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