案例1.表格各行换色
需求：1.为了增强表格的易读性，使表格的偶数行和奇数行显示不同的颜色
2.复选框的全选和全不选
需要学习：Js中for循环的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* 修改表格行的颜色是在表单加载完成后出发的事件，所以是onload事件 */
function changecolor(){
var table = document.getElementById("tab");
var rows = table.rows;//获取表格的所有行
for(var i = 1;i<rows.length;i++){
var row = rows[i]; //根据index获取表格的每一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red";
}
}
}
function check(){
var check1 = document.getElementById("check1");//获取首行的复选框
var checkll = check1.checked; //获取首行复选框的状态
//将所有复选框都命名为checkone,这样可以方便同时获取,通过getElementsByName方法获取所有的复选框
var checks = document.getElementsByName("checkone");
//使用for循环设置每个复选框的状态
for(var j = 0;j<checks.length;j++){
var checkone = checks[j];
checkone.checked = checkll;
}
}
</script>
</head>
<body onload="changecolor()">
<table border="1px" width="600px" id="tab">
<tr>
<td><input type="checkbox" onclick="check()" id="check1"/></td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" name = "checkone"/></td>
<td>1</td>
<td>手机数码</td>
<td>苹果、小米、华为</td>
<td>都是手机</td>
<td><a href="#">修改</a><a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name = "checkone"/></td>
<td>2</td>
<td>冰箱彩电</td>
<td>海尔、康佳、TCL</td>
<td>支持国产</td>
<td><a href="#">修改</a><a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name = "checkone"/></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>耐克、乔丹、阿迪</td>
<td>就是鞋</td>
<td><a href="#">修改</a><a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name = "checkone"/></td>
<td>4</td>
<td>香烟香水</td>
<td>红塔山、香奈儿</td>
<td>你来闻闻香不香</td>
<td><a href="#">修改</a><a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name = "checkone"/></td>
<td>5</td>
<td>黑马超市</td>
<td>java、javascript</td>
<td>在线产品</td>
<td><a href="#">修改</a><a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
案例2.省市联动
需求：一般在注册过程中选择籍贯时，当你选择了省信息，随后的市信息也会跟随显示
需要学习：在Js中动态添加元素
步骤分析：确定事件 select的选择事件 onchange
触发的方法 selectCity()
selectCity()方法中要根据选择的省信息，展示出对应的市的信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<script>
/* 准备各个省份对应的城市的数据 ，数据随便准备的，不知是否有误*/
var cities = [
["长沙市","宜昌市","宜宾市","湘潭市"],
["唐山市","衡水市","邯郸市","廊坊市"],
["九江市","南昌市","上饶市","赣州市"]
]
<!-- 1.确定事件 onchange -->
function selectCity(){
var province = document.getElementById("province"); //获取省份
var value = province.value;//获取选择的省份对应的value值,以此区分
var aCities = cities[value];//获取与相应省份对应的市的信息
var citySelector = document.getElementById("citySelector");
//每次选择之后都要清空上一次选择的结果
citySelector.options.length = 0;
for(var i = 0 ;i < aCities.length;i++){
var city = aCities[i];
var option1 = document.createElement("option");//创建option元素
var citySelect = document.createTextNode(city);//创建市内容对应的文本
option1.appendChild(citySelect);//将文本内容关联到元素上
citySelector.appendChild(option1);//将元素内容关联到对应的节点
}
}
</script>
</head>
<body>
<select onchange="selectCity()" id="province">
<option value="-1">--请选择--</option>
<option value="0">湖南省</option>
<option value="1">河北省</option>
<option value="2">江西省</option>
</select>
<select id="citySelector">
</select>
</body>
</html>
案例3.左右选择关联
需求：很多时候都有这样的需求，将左侧列表中的内容选择添加到右侧列表中
需要学习：列表中的内容一遍遍历一遍修改时，for循环的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//将选中的商品移动到右边
function selectOne(){
var left = document.getElementById("left");
var options = left.options;//获取左侧选择列表中的所有元素
var right = document.getElementById("right");
//遍历所有元素,当元素的状态是被选的,则将其添加到右边
for(var i = 0 ; i < options.length;i++){
var option = options[i];
if(option.selected){
right.appendChild(option);
}
}
}
function selectAll(){
var left = document.getElementById("left");
var options = left.options;
var right = document.getElementById("right");
//此处需注意当有元素添加右边之后,元素的角标会改变,所以不能正序遍历
/* for(var i = 0 ; i < options.length;i++){
var option = options[i];
right.appendChild(option);
} */
for(var i = options.length - 1; i >= 0 ; i--){
var option = options[i];
right.appendChild(option);
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td>
<input type="text" value="手机数码" />
</td>
</tr>
<tr>
<td>分类描述</td>
<td>
<input type="text" value="这里都是手机" />
</td>
</tr>
<tr>
<td>分类商品</td>
<td>
<div style="float: left;">
已有商品<br />
<!-- 当需要select多行显示的时候，可以使用multiple属性 -->
<select multiple="multiple" id="left" ondbclick="selectOne()"><!-- 双击事件 -->
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select><br />
<a href="#" onclick="selectOne()"> >></a><br /><!-- 此处">"用转义符号> -->
<a href="#" onclick="selectAll()"> >>></a>
</div>
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="right">
<option>苹果</option>
<option>nokia</option>
<option>vivo</option>
<option>波导</option>
</select><br />
<a href="#"> <<</a><br /><!-- 此处"<"用转义符号< -->
<a href="#"> <<<</a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交" />
</td>
</tr>
</table>
</body>
</html>
5759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
