JavaScript物件陣列表格處理加案例
阿新 • • 發佈：2019-02-10
Javascript中的物件
JavaScript是一種弱型別語言 所以說這樣的語言是不規範的 比如就像下面建立物件一樣 在java中 我們必須建立類 在建立物件
然而在JavaScript中 我們可以直接建立物件 並且直接建立物件中的屬性 和方法
方法一、直接建立物件
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");
陣列物件Array
方法一
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")
一個表格處理的例子
這個是最新完善的 添加了刪除的功能 當你有打鉤的時候 就可以對這行進行刪除
刪除行需要deleteRow()
<!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>無標題文件</title> <script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script> <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:16px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable th { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede; } table.gridtable td { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff; } </style> </head> <body> <table class="gridtable" id="tab"> <tr><th><input type="checkbox" name="ch" id="btn1" onclick="chocie();"/></th><th> </th><th>作者</th><th>姓名</th><th>價格</th></tr> <script type="text/javascript"> function delete_row() { for(var i=1; i<document.getElementsByName("ch").length; i++) { if(document.getElementsByName("ch")[i].checked) { document.getElementById("tab").deleteRow(i); i--; } } } function chocie() { for(var i=1; i<document.getElementsByName("ch").length; i++) { document.getElementsByName("ch")[i].checked= document.getElementsByName("ch").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>"+"<input type='checkbox' name='ch'>"+"</td>"); document.write("<td>"+(i+1)+"</td>"); document.write("<td>"+books[i].name+"</td>"); document.write("<td>"+books[i].author+"</td>"); document.write("<td>"+books[i].price+"</td>"); document.write("</tr>") } </script> </table> <input type="button" value="刪除" id="btn" onclick="delete_row();"/> </body> </html>