JavaScript下篇
使用JS控制表格的隔行换色
需求分析
在网站的后台的表格页面中让表格显示出隔行换色的效果。
技术分析
使用JS控制表格
var tab1 = Document.getElementById(“tab1”);
var rows = tab1.rows.length;
for(){
if(i % 2 == 0){
}
}
步骤分析
步骤一：确定事件：onload事件。
步骤二：获得表格元素。
步骤三：获得表格的所有行的长度。
步骤四：遍历表格的所有行。
步骤五：使用下标对2取余。
步骤六：设置奇偶行的颜色。
代码实现：
<script type="text/javascript">
function ShowRowColor()
{
//1. 获取表格
var tab1=document.getElementById("tab1");
//2. 获取表格的行数
varrows=tab1.rows.length;
//表格的行数
//alert(rows);
//遍历表格行
for(vari=0;i<rows;i++)
{
//判断行的奇偶数
if(i%2==0)
{
//如果能被2整除 ,那么是一种颜色
//设置每一行的样式背景颜色
tab1.rows[i].style.backgroundColor="red";
}
else
{
//如果不能被2整除,那么是另外一种颜色
//设置每一行的样式背景颜色
tab1.rows[i].style.backgroundColor="blue";
}
}
}
onload=ShowRowColor;
</script>
代码实现,友情提示
表格隔行换色的时候，将最上一行也换掉了。第一行往往不需要进行换色的。
<table align="center" id="tab1">
<thead>
<tr>
<th>序号</th>
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鼠标</td>
<td>100</td>
<td>65</td>
</tr>
<tr>
<td>2</td>
<td>键盘</td>
<td>66</td>
<td>120</td>
</tr>
<tr>
<td>3</td>
<td>显示器</td>
<td>50</td>
<td>1000</td>
</tr>
</tbody>
</table>
代码实现：
<script type="text/javascript">
//匿名函数: 只在加载时,调用一次
window.onload=function()
{
//1 获取表格
var tab1=document.getElementById("tab1");
//2. 获取除了第一行以外的表格内容行tbody中的内容行数
var rows=tab1.tBodies[0].rows.length;
for(vari=0;i<rows;i++)
{
if(i%2==0)
{
tab1.tBodies[0].rows[i].style.backgroundColor="red";
}
else
{
tab1.tBodies[0].rows[i].style.backgroundColor="blue";
}
}
}
</script>
JS控制复选框的全选和全不选的效果
需求分析
在后台管理页面中，往往会有批量删除数据的效果，就需要有复选框全选和全不选的效果。
技术分析
使用JS控制复选框
varchkAll = Document.getElementById(“chkAll”);
if(chkAll.checked== true)
{
for(){
chks[i].checked= true;
}
}
步骤分析:
步骤一：确定事件：单击事件。
步骤二：获得下面的所有的复选框。
步骤三：如果上面的复选框被选中，将下面的所有的复选框选中状态变为checked=true。
步骤四：如果上面的复选框没被选中，将下面的所有的复选框选中状态变为checked=false。
代码实现
function ChangeAll()
{
varchkAll=document.getElementsByName("chkAll");
//获取全选复选框是否选中
varisChecked=chkAll[0].checked;
//获取是否全选
//alert(isChecked);
//得到所有的 name= chk的复选框控件
varchks=document.getElementsByName("chk");
for(vari=0;i<chks.length;i++)
{
//下面的每一个复选框,都是和全选状态一致
chks[i].checked=isChecked;
}
}
DOM的操作：
DOM：Document Object Model 文档对象模型。
将HTML文档装载到内存,将HTML文档形成一个DOM的树形结构。
Document:文档对象代表的是加载到内存中的整个的文档.
方法：
document.getElementById(“”);
document.getElementsByName(“”);
document.getElementsByTagName(“”);
document.createElement(“”);
Element:元素对象.代表文档中的每个元素（标签）
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
</ul>
属性：
firstChild：获得其第一个子节点。
lastChild：获得其最后一个子节点。
方法：
appendChild();将节点添加到当前节点的最后。
insertBefore();将节点添加到某个元素之前。
Attribute:属性对象.代表元素上的属性。
Document,Element,Attribute统称为Node（节点）。
JS控制二级联动：
需求分析
在注册页面上有一个下拉列表,下拉列表显示省份信息,有另一个下列列表.选择某个省份，将这个省份下的城市列出。
技术分析
使用JS创建新选项
varnewOpt=new Option(“”, “”);
varcitySel = document.getElementById(“city”);
citySel.options.add(newOpt);
数组对象的使用
创建数组：
vararr = new Array(1,2,3);
数组的属性：
数组的方法：
步骤分析:
步骤一：确定事件：onchange。
步骤二：获得改变的省份值 。
步骤三：比较省份的值与数组中定义的值是否相等，如果相等获得这个省份对应的所有的市的数组。
步骤四：创建option元素，将数组中的值添加到option元素中。
步骤五：将option添加到第二个下拉列表中。
代码实现
<script type="text/javascript">
var arr1=new Array("济南市","青岛市","淄博市","枣庄市","东营市","烟台市","潍坊市","济宁市");
var arr2=new Array("南京市","无锡市","徐州市","常州市","苏州市","南通市","连云港市","淮安市");
var arr3=new Array("长沙市","株洲市","湘潭市","衡阳市","邵阳市","岳阳市","常德市","张家界市");
window.onload=function()
{
//省份的控件绑定触发城市的加载事件
document.getElementById("province").onchange=function(){
varproValue=document.getElementById("province").value;
var city=document.getElementById("city");
city.length=1;//把除了第一个选择项,其他都删除
//根据省份加载绑定城市的下拉框的数据
if(proValue=="1")
{
for(vari=0;i<arr1.length;i++)
{
//new Option(?,?)第一个参文本内容，第二个参value值
varNewOption=new Option(arr1[i],arr1[i]);
city.options.add(NewOption);
}
}else if(proValue=="2")
{
for(vari=0;i<arr2.length;i++)
{
varNewOption=new Option(arr2[i],arr2[i]);
city.options.add(NewOption);
}
}
else if(proValue=="3")
{
for(vari=0;i<arr3.length;i++)
{
varNewOption=new Option(arr3[i],arr3[i]);
city.options.add(NewOption);
}
}
}
}
</script>
扩展内容:
查看文档了解方法：
全局函数：
parseInt(); 将字符串转出整型
parseFloat(); 将字符串转成小数
JS控制下拉列表左右选择
4.1需求分析
有两个列表，需要将左侧列表中的数据添加到右侧的列表中：
技术分析
添加下拉框选项
options.add()
移除下拉框选项
options.remove()
步骤分析:
单击事件：
编写函数：获得左侧的下拉列表。
遍历左侧列表中的所有的option元素.判断是否被选中。
如果被选中添加到右侧。
删除左侧被移动的选中项。
单击事件：
编写函数：获得左侧的下拉列表。
遍历左侧的列表中的所有的option。
全部添加到右侧。
删除左侧的所有项。
代码实现
<script type="text/javascript">
function MoveSelect()
{
varselLeft=document.getElementById("selLeft");
varselRight=document.getElementById("selRight");
//alert(selLeft.selectedIndex);
if(selLeft.selectedIndex>-1)
{
//添加
selRight.options.add(new Option(selLeft.value,selLeft.value));
//原有的选项,删除
selLeft.options.remove(selLeft.selectedIndex);
}
}
function MoveSelectAll()
{
varselLeft=document.getElementById("selLeft");
varselRight=document.getElementById("selRight");
//alert(selLeft.selectedIndex);
if(selLeft.options.length>0)
{
for(vari=0;i<selLeft.options.length;i++)
{
//循环添加
selRight.options.add(new Option(selLeft.options[i].value,selLeft.options[i].value));
}
//删除所有的左侧项
selLeft.length=0;
}
}
</script>
</head>
<body>
<table>
<tr>
<td>分类商品</td>
<td valign="top">
<!--左侧-->
<span style="float: left;">
<span style="color:red">已有商品</span><br />
<select id="selLeft" multiple="true">
<option value="IPhone6s">IPhone6s</option>
<option value="小米4">小米4</option>
<option value="锤子T2">锤子T2</option>
</select><br />
<a href="javascript:MoveSelect()">>></a><br />
<a href="javascript:MoveSelectAll()">>>></a>
</span>
<!--右侧-->
<span style="float: right;">
<span style="color:green">未有商品</span><br />
<select id="selRight" multiple="true">
<option value="三星Note3">三星Note3</option>
<option value="华为6s">华为6s</option>
</select><br />
<a href=""><<</a><br />
<a href=""><<<</a>
</span>
</td>
</tr>
</table>
1340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
