一,在多个列表下,一次只需要展开一个列表其他列表都关闭.
怎么保证开一个,而其他的关闭呢?
方法一:
<!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>
<style type="text/css">
dl dd
{
margin :0px;//把默认的距离设置为零
}
dl
{
height:16px;
}
.close
{
overflow:hidden; //不显示超过对象尺寸的内容,而我这个对象的height设置成了16px
}
.open
{
overflow:visible;//当我们把它的选择器更改成这个.是否内容已经所被更改呢?
}
dl dt
{
color:#990033;
}
</style>
</head>
<body>
<script type="text/javascript">
/*
思路:
1,标签封装数据
2,定义样式表
3,明确事件源,以及要处理节点dom
4,明确具体的操作方式,其实就是事件的处理内容,js
5,列表展开闭合的效果
思路:
1,无非就是将dl属性的overflow的值改变成visible即可.
2,要先获取dl节点
3,改变该节点的style.overflow属性.
function list(node)
{
if(node.className=="close")
{
node.className = "open";
}
else
{
node.className="close";
}
}
*/
</script>
<dl class="close" οnclick="list(this)"> <!--使用的是这个类选择器-->
<dt>显示条目一</dt>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
</dl>
<dl class="close" οnclick="list(this)">
<dt>显示条目二</dt>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
</dl>
<dl class="close" οnclick="list(this)">
<dt>显示条目三</dt>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
</dl>
<dl class="close" οnclick="list(this)">
<dt>显示条目四</dt>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
</dl>
<dl class="close" οnclick="list(this)">
<dt>显示条目五</dt>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
</dl>
</body>
</html>
方法二:
<!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>
<style type="text/css">
dl dd
{
margin :0px;//把默认的距离设置为零
}
dl
{
height:16px;
}
.close
{
overflow:hidden; //不显示超过对象尺寸的内容,而我这个对象的height设置成了16px
}
.open
{
overflow:visible;//当我们把它的选择器更改成这个.是否内容已经所被更改呢?
}
dl dt
{
color:#990033;
}
</style>
</head>
<body>
<script type="text/javascript">
function list(node)
{
//获取当前的父节点是:
var onode = node.parentNode; //获取到它的父节点 dd 的上一层是dl
//获取到所有的dl节点
var nodes = document.getElementsByTagName("dl");//获取所有的dl节点
for(var x=0; x<nodes.length; x++)
{
if(nodes[x]==onode) //判断所获取到的所有dl节点里面的内容是否是dd下面的dl节点
{
if(onode.className=="close")
{
onode.className = "open"
}
else
{
onode.className = "close";//把选择器更改一下
}
}else
{
nodes[x].className = "close";
}
}
}
</script>
<dl class="close" > <!--使用的是这个类选择器-->
<dt οnclick="list(this)">显示条目一</dt>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
</dl>
<dl class="close" >
<dt οnclick="list(this)">显示条目二</dt>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
</dl>
<dl class="close" >
<dt οnclick="list(this)">显示条目三</dt>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
</dl>
<dl class="close" >
<dt οnclick="list(this)">显示条目四</dt>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
</dl>
<dl class="close" >
<dt οnclick="list(this)">显示条目五</dt>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
<dd>这是我的列表里面的内容</dd>
</dl>
</body>
</html>
二,新闻字体的大中小样式改变.
<!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>
<style type="text/css">
a:link,a:visited
{
color:#33CCCC;
text-decoration:none;
}
a:hover
{
color:#00CC66;
}
#newstext
{
width:600px;
border:#99FF66 1px solid;
padding:10px;
}
.norm
{
color:#0000FF;
font-size:16px;
background-color:#FFFFFF;
}
.max
{
color:#00FF66;
font-size:24px;
background-color:#FFFFFF;
}
.min
{
color:#FF0000;
font-size:14px;
background-color:#FFFF00;
}
</style>
</head>
<!--首先设置好选择器-->
<body>
<script type="text/javascript">
function changeFont(info)
{
//需要明确谁是事件源
var node = document.getElementById("newstext");
node.className = info;
}
</script>
<h1>这是一个新闻标题</h1>
<hr/>
<!--javascript:viid(0)默认启动javascript引擎-->
<a href="javascript:void(0)" οnclick="changeFont('max')">大字体</a>
<a href="javascript:void(0)" οnclick="changeFont('norm')">中字体</a>
<a href="javascript:void(0)" οnclick="changeFont('min')">小字体</a>
<div id="newstext" class="norm">
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
</div>
</body>
</html>
三.完成一个好友菜单,展开闭合的效果,而且需要一次展开一个而关闭其他的
<!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>
<style type="text/css">
/*
对表格中的ul进行样式的定义
1,去除无序列表的样式
2,将列表中的外边距取消.
*/
table ul
{
list-style:none;
margin:0px;
background-color:#26e356;
display:none;
/*border:#ff0000 1px solid;*/
padding:0px;
}
/*
对表格框线进行定义.
以及单元格的框线进行定义.
*/
table
{
border:#8080ff 1px solid;
width:80px;
}
table td
{
border:#8080ff 1px solid;
background-color:#f3c98f;
padding:0px;
}
/*
单元格的超链接进行样式的定义
*/
table td a:link,table td a:visited
{
color:#3333CC;
text-decoration:none;
}
/*
预定义一些样式
*/
.open
{
display:block;//更改成不隐藏
}
.close
{
display:none;//隐藏
}
</style>
<script type="text/javascript">
//获取被操作的节点ul。
/*
* 先通过事件源超链接标签获取其父节点td，然后在通过父节点获取ul节点。
*/
function list(node)
{
var onode = node.parentNode; //获取到td标签
var node = onode.getElementsByTagName("ul")[0]; //数组来的.
/*
获取到所有的表格节点
*/
var tables = document.getElementById("goodList"); //获取到table标签
var nodes = tables.getElementsByTagName("ul"); //table标签里面的ul标签
for(var x=0; x<nodes.length; x++)
{
if(nodes[x]==node)
{
if(node.className=="close")
{
node.className="open";
}else
{
node.className="close";
}
}else
{
nodes[x].className = "close";
}
}
}
</script>
</head>
<body>
<table id="goodList">
<tr>
<td>
<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
四.创建一个表格,并且具有删除行和列的功能
<!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>
</head>
<body>
<!--
在页面中创建一个5行6列的表格。
1，事件源，比如按钮。
2，必须有一个生成的表格节点存储位置。
-->
<script type="text/javascript">
function crtTable1()
{
//1.创建表格
var tableNode = document.createElement("table");
//2.创建tbody标签
var tbodyNode = document.createElement("tbody");
var trNode = document.createElement("tr");
var tdNode = document.createElement("td");
/*
让这些内容进行关联-->因为我们创建好的并没有关联
*/
tableNode.appendChild(tbodyNode);
tbodyNode.appendChild(trNode);
tbodyNode.appendChild(tdNode);
//把内容添加到div里面去
var divNode = document.getElementsByTagName("div")[0];
divNode.appendChild(tableNode); //-->在把整体的内容添加回来
}
/*
* 上面的方法很麻烦。
* 既然操作的是表格，
* 那么最方便的方式就是使用表格节点对象的方法来完成。
*
* 表格是由行组成。表格节点对象中 insertRow方法就完成了创建行并添加的动作。
*
* 行是由单元格组成。通过tr节点对象的insertCell来完成。
*/
function crtTable()
{
//1.创建table标签
var tableNode = document.createElement("table");
//2.为table标签设置id
tableNode.setAttribute("id","tableid");//为这个table标签设置一个id
var rows =document.getElementsByName("rownum")[0].value;//获取到行的数量
var cols = document.getElementsByName("colnum")[0].value;//获取到列的数量
tableNode.border = "1";
tableNode.width = "500px";
for(var x=0;x<rows;x++)
{
var rowNode = tableNode.insertRow(); //每循环一次就创建一行
for(var y=0; y<cols; y++)
{
var colNode = rowNode.insertCell();//每循环一次.我就创建多少个格子呢?
//表格里面没有内容对吧?
colNode.innerHTML= x+"--"+y;
}
}
var divNode = document.getElementById("divid");
divNode.appendChild(tableNode);
}
function delRow()
{
//获取到tableid标签,判断该标签是否存在
var tableNode = document.getElementById("tableid");
if(tableNode==null)
{
alert("表格不存在!!");
return;
}
//获取所需要的删除的表格的行数
var derow = document.getElementsByName("delrow")[0].value;//获取到value值
if(derow>=1&&derow<=tableNode.rows.length-1) //判断table集合里面的行是否是小于这个数哦
{
tableNode.deleteRow(derow-1);
}else
{
alert("小日本草你妈");
}
}
//删除列,其实就是把每一行的每一个格子给删除掉
function delCol()
{
//获取到table
var tableNode = document.getElementById("tableid");
//获取需要删除的列数
var decol = document.getElementsByName("delcol")[0].value;
if(tableNode == null)
{
alert("该表格不存在");
return;
}
if(decol>=1&&decol<=tableNode.rows[0].cells.length) //判断里面的行数是否符合规格
{
for(var x=0;x<tableNode.rows.length;x++) //获取到行的数量
{
//把每一行的..第6个的位置的单元格删除-->假设我5行..循环6次.. 那么就删了一个列的位置啦.
tableNode.rows[x].deleteCell(decol-1);
}
}
}
</script>
行:<input type="text" name="rownum"/>
列:<input type="text" name="colnum"/>
<input type="button" name="crtBut" value="创建" οnclick="crtTable()"/>
<hr/>
<input type="text" name="delrow"/><input type="button" value="删除行" οnclick="delRow()"/>
<br/>
<input type="text" name="delcol" /><input type="button" value="删除列" οnclick="delCol()"/>
<div id="divid"></div>
</body>
</html>
五,着色的功能哦..
<!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>
<style>
.one
{
background-color:#339999;
}
.two
{
background-color:#CC0066;
}
.over
{
background-color:#0000CC;
}
table {
clear: left;
float: left;
height: auto;
width: 600px;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
}
</style>
<script type="text/javascript">
var name ;//做一下标记
function trColor()
{
/*
* 思路：
* 1，因为要操作行的样式，所以要先获取表格对象。
* 2，获取所有被操作的行对象。
* 3，遍历行并给每一行指定样式。
*/
var tableNode = document.getElementById("info");
//获取到表格中所有的行数
var row = tableNode.rows;
for(var x=1;x<row.length;x++)
{
if(x%2==1)
{
row[x].className = "one"; //把行数里面的样式表为单数
}else
{
row[x].className = "two";
}
row[x].onmouseover = function()
{
name = this.className; //当前对象的class标签赋值给它,标记收藏起来
this.className = "over";
}
//当鼠标移动出来的时候呢?>
row[x].onmouseout = function()
{
this.className = name; //当前的等于所记住的,把然来的返回给您哦
}
}
}
//当浏览器完成加载时候触发
onload = function()
{
trColor();
}
</script>
</head>
<body>
<table id="info">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>27</td>
<td>上海</td>
</tr>
<tr>
<td>小强</td>
<td>26</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>29</td>
<td>广州</td>
</tr>
<tr>
<td>孙八</td>
<td>23</td>
<td>南京</td>
</tr>
<tr>
<td>二麻子</td>
<td>19</td>
<td>大连</td>
</tr>
<tr>
<td>犀利姐</td>
<td>32</td>
<td>青岛</td>
</tr>
<tr>
<td>旺财</td>
<td>19</td>
<td>深圳</td>
</tr>
<tr>
<td>周七</td>
<td>42</td>
<td>铁岭</td>
</tr>
<tr>
<td>毕姥爷</td>
<td>18</td>
<td>沈阳</td>
</tr>
</table>
</body>
</html>
六.对表格上面的年龄进行排序-重要.需要复习..
<!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>
<style type="text/javascript">
</style>
</head>
<script type="text/javascript">
var flag = true;
function sortTable()
{
/*
* 思路：
* 1，排序就需要数组。获取需要参与排序的行对象数组。
* 2，对行数组中的每一个行的年龄单元格的数据进行比较，并完成行对象在数组中的位置置换。
* 3，将排好序的数组重新添加回表格。
*/
var tableNode = document.getElementById("info");
var rowNode = tableNode.rows;
var arr = [];
for(var x=1; x<rowNode.length;x++)
{
arr[x-1] = rowNode[x];//获取到的是每一行的行对象,存储到容器中 注意: 里面存储的都是每一行的对象
}
mysort(arr);
//将排序
if(flag) //如果为真
{
for(var x=0;x<arr.length; x++)
{
//行对象
arr[x].parentNode.appendChild(arr[x]);
}
flag = false;
}else
{
for(var x=arr.length-1;x>=0;x--)
{
arr[x].parentNode.appendChild(arr[x]) //将拍好序的对象返回去
}
flag = true;
}
}
function mysort(arr)
{
for(var x=0; x<arr.length-1; x++)
{
for(var y=x+1; y<arr.length; y++)
{
//按照年龄数值进行排序,并且转换成整数 ,这里面的1代表了外面的第二个
if(parseInt(arr[x].cells[1].innerHTML)>parseInt(arr[y].cells[1].innerHTML))
{
var temp = arr[x]; //就把里面的行更换位置
arr[x] = arr[y];
arr[y] = temp;
// alert("来没");
}
}
}
}
</script>
<body>
<table id="info">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" οnclick="sortTable()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>27</td>
<td>上海</td>
</tr>
<tr>
<td>小强</td>
<td>6</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>29</td>
<td>广州</td>
</tr>
<tr>
<td>孙八</td>
<td>23</td>
<td>南京</td>
</tr>
<tr>
<td>二麻子</td>
<td>24</td>
<td>大连</td>
</tr>
<tr>
<td>犀利姐</td>
<td>32</td>
<td>青岛</td>
</tr>
<tr>
<td>旺财</td>
<td>19</td>
<td>深圳</td>
</tr>
<tr>
<td>周七</td>
<td>42</td>
<td>铁岭</td>
</tr>
<tr>
<td>毕姥爷</td>
<td>18</td>
<td>沈阳</td>
</tr>
</table>
</body>
</html>
统计总价格:
<!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>
</head>
<body>
<script type="text/javascript">
/*
* 获取所有的名称为item的复选框。
* 判断checked状态，为true表示被选中，获取该节点的value进行累加。
*/
function getSum()
{
var sum = 0;
var nodes = document.getElementsByName("item");
for(var x=0; x<nodes.length; x++)
{
if(nodes[x].checked) //如果默认为真
{
sum+=parseInt(nodes[x].value);
}
}
var sums= sum +"元";
document.getElementById("sumid").innerHTML = sums.fontcolor('red');
}
/*
* 将全选的box的checked状态赋值给所有的itembox的checked。
*/
function checkAll(node)
{
var nodes = document.getElementsByName("item");//获取所有的
for(var x=0; x<nodes.length; x++)
{
nodes[x].checked = node.checked;//当我触发,就把状态都更改成checked
}
}
</script>
<input type="checkbox" name="allitem" οnclick="checkAll(this)" />全选<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="allitem" οnclick="checkAll(this)" />全选<br/>
<input type="button" value="总金额是" οnclick="getSum()"/><span id="sumid"></span>
</body>
</html>
再度复习:
<!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>
<style type="text/css">
.one{
background-color:#e1e16a;
}
.two{
background-color:#75f094;
}
.over{
background-color:#f9360d;
}
table
{
}
table {
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
background-color:#00CCFF;
font-size: 16px;
width:600px;
}
</style>
</head>
<body>
<script type="text/javascript">
var name ;
function trColor()
{
var tableNode = document.getElementById("info");
for(var x=1;x<tableNode.rows.length; x++)
{
if(x%2==1)
{
tableNode.rows[x].className = "two";
}else
{
tableNode.rows[x].className = "one";
}
//给每一个对象添加行为
tableNode.rows[x].onmouseenter = function()
{
name = this.className;//当前对象的className
this.className = "over";
}
tableNode.rows[x].onmouseleave = function()
{
this.className = name;
}
}
}
/*
当浏览器完成加载的时候触发
*/
window.onload = function()
{
trColor();
}
</script>
<table id="info">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>27</td>
<td>上海</td>
</tr>
<tr>
<td>小强</td>
<td>26</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>29</td>
<td>广州</td>
</tr>
<tr>
<td>孙八</td>
<td>23</td>
<td>南京</td>
</tr>
<tr>
<td>二麻子</td>
<td>19</td>
<td>大连</td>
</tr>
<tr>
<td>犀利姐</td>
<td>32</td>
<td>青岛</td>
</tr>
<tr>
<td>旺财</td>
<td>19</td>
<td>深圳</td>
</tr>
<tr>
<td>周七</td>
<td>42</td>
<td>铁岭</td>
</tr>
<tr>
<td>毕姥爷</td>
<td>18</td>
<td>沈阳</td>
</tr>
</table>
</body>
</html>
二.创建列表单元格的删除列和行
<!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>
</head>
<body>
<script type="text/javascript">
function crtTable()
{
var row = document.getElementsByName("rownum")[0].value;
var cell = document.getElementsByName("colnum")[0].value;
//必须要创建一个table
//为这个table设置一个id
var tableNode = document.createElement("table");
tableNode.setAttribute("id","tableId");
if(row>=1&&cell>=1)
{
for(var x=0;x<row;x++)
{
//创建一个行数
var rows = tableNode.insertRow();
for(var y=0;y<cell;y++)
{
//创建单元格
var cells = rows.insertCell();
cells.innerHTML = x+"--"+y;
}
}
var divNode = document.getElementsByTagName("div")[0];
divNode.appendChild(tableNode);
document.getElementsByName("crtBut")[0].disabled = true; //更改这个属性的状态
}
else
{
alert("你这是表格?");
return;
}
}
//删除行
function delRow()
{
//获取table标签
var tableNode = document.getElementById("tableId");
var rowCount = document.getElementsByName("delrow")[0].value;
var row = document.getElementsByName("rownum")[0].value;
if(rowCount>=1&&rowCount<=row)
{
tableNode.deleteRow(rowCount-1);
}
else
{
alert("你玩我?");
return;
}
}
//删除列,其实就是删除每一行的每一个单元格
function delCol()
{
var tableNode = document.getElementById("tableId");
if(tableNode==null)
{
alert("没有表格,何来删除!!");
return;
}
var cellCount = document.getElementsByName("delcol")[0].value;
var cell = document.getElementsByName("colnum")[0].value;
if(cellCount>=1&&cellCount<=tableNode.rows[0].cells.length)//获取到第一个行数里面的格子数
{
for(var x=0; x<tableNode.rows.length; x++) //获取到所有行数的个数
{
//从表格行及 cells 集合中删除指定单元格(td
tableNode.rows[x].deleteCell(cellCount-1);//位置呢?
}
}else
{
alert("错~~");
return;
}
}
</script>
行：<input type="text" name="rownum" />列：<input type="text" name="colnum" />
<input type="button" value='创建表格' name="crtBut" οnclick="crtTable()"/>
<hr/>
<input type="text" name="delrow" /><input type="button" value="删除行" οnclick="delRow()"/><br/>
<input type="text" name="delcol" /><input type="button" value="删除列" οnclick="delCol()"/>
<hr/>
<div></div>
</body>
</html>
三.对表格中的年龄进行排序
<!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>
</head>
<body>
<script type="text/javascript">
var flag = true;
function sortTable()
{
//1.获取table标签
var tableNode = document.getElementById("info");
//2.获取table标签里面的行的对象 是一个集合
var row = tableNode.rows;
var arr = [];//临时数组
/*
第一个不需要计算的--->
而我存储到数组里面是从第零位开始的-->存储到的元素-1就好咯 0 - 9
*/
for(var x=1; x<row.length; x++) //我是从第一个开始-->因为第一个的不需要传递进去
{
arr[x-1] = row[x]; //arr是一个数组,.但您必须要x-1单元格才可以找到..因为
}
//对里面的内容进行交换位置
mySort(arr);
//将拍完顺序的添加到表格中
if(flag)
{
for(var x=0; x<arr.length; x++)
{
//获取tbody标签 其实就是把对象的位置交换啦..\
/*
tableNode.childNodes[0].appendChild(arr[x]); //获取到每一行
alert(arr[x].cells[0].innerHTML);
获取到table里面的tbody标签下面的儿子行 再通过行的集合获取到单元格的内容
看似添加了元素..实际上就是交换了每个对象的地址..把地址存储进去..就把原来的地址覆盖掉啦
*/
arr[x].parentNode.appendChild(arr[x]);
alert(arr.length);
}
flag = false;
}else
{
for(var x=arr.length-1; x>=0; x--)
{
arr[x].parentNode.appendChild(arr[x]);
}
flag = true;
}
}
function mySort(arr)
{
for(var x=0 ;x<arr.length-1; x++)
{
for(var y=x+1; y<arr.length; y++)
{
//我们比较的是行对象里面单元格的集合的第一个元素...之后.我们更改的位置是对象-->地址的位置..
if(parseInt(arr[x].cells[1].innerHTML)>parseInt(arr[y].cells[1].innerHTML))
{
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
//必须要转换成int类型再比较
}
}
}
</script>
<table id="info">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" οnclick="sortTable()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>27</td>
<td>上海</td>
</tr>
<tr>
<td>小强</td>
<td>6</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>29</td>
<td>广州</td>
</tr>
<tr>
<td>孙八</td>
<td>23</td>
<td>南京</td>
</tr>
<tr>
<td>二麻子</td>
<td>24</td>
<td>大连</td>
</tr>
<tr>
<td>犀利姐</td>
<td>32</td>
<td>青岛</td>
</tr>
<tr>
<td>旺财</td>
<td>19</td>
<td>深圳</td>
</tr>
<tr>
<td>周七</td>
<td>42</td>
<td>铁岭</td>
</tr>
<tr>
<td>毕姥爷</td>
<td>18</td>
<td>沈阳</td>
</tr>
</table>
</body>
</html>
心得: 每天2个小时候英语每天的任务必须要完成.-->
不要影响学习的心情,,不要分心.总有一天你是最厉害的.
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
