美文网首页
六、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