JavaScript对象数组表格处理加案例

最新推荐文章于 2024-01-16 15:19:05 发布

小李讲源码

最新推荐文章于 2024-01-16 15:19:05 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签：对象 javascript

本文链接：https://blog.csdn.net/ncut_LJD/article/details/50886301

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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" οnclick="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" οnclick="delete_row();"/>
</body>
</html>

小李讲源码

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript对象数组表格处理加案例

Javascript中的对象方法一、直接创建对象person=new Object();person.firstname="Bill";person.lastname="Gates";person.age=56;person.eyecolor="blue";替代语法：person={firstname:"John",lastname:"Doe",age:
复制链接

扫一扫

专栏目录