JavaScript案例
案例一：全选练习
<body>
<input type="checkbox" id="boxid" onclick="selAllNo();" />全选/全不选
<br />
<input type="checkbox" name="love" />篮球
<input type="checkbox" name="love" />足球
<input type="checkbox" name="love" />橄榄球
<input type="checkbox" name="love" />羽毛球
<br />
<input type="button" value="全选" onclick="selAll();" />
<input type="button" value="全不选" onclick="selNo();" />
<input type="button" value="反选" onclick="selOther();" />
<script type="text/javascript">
//全选功能
function selAll() {
//获取要操作的复选框
var loves = document.getElementsByName("love");
//便利数组得到没一个复选框
for (var i = 0; i < loves.length; i++) {
//得到每一个复选框
var love1 = loves[i];
love1.checked = true;
}
}
//全不选
function selNo(){
var loves = document.getElementsByName("love");
for(var i = 0; i < loves.length; i++){
var love1 = loves[i];
love1.checked = false;
}
}
//反选
function selOther(){
var loves = document.getElementsByName("love");
for(var i = 0; i < loves.length; i++){
var love1 = loves[i];
if(love1.checked == true){
love1.checked = false;
}else{
love1.checked = true;
}
}
}
//复选框的全选/全不选
function selAllNo() {
var loves = document.getElementsByName("love");
var checkedbox = document.getElementById("boxid");
for(var i = 0; i < loves.length; i++){
var love1 = loves[i];
if(checkedbox.checked == true){
love1.checked = true;
}else{
love1.checked = false;
}
}
}
</script>
</body>
案例二：下拉列表左右选择
<script type="text/javascript">
function selToRight() {
var select1 = document.getElementById("select1");
var options = select1.getElementsByTagName("option");
var select2 = document.getElementById("select2");
for(var i = 0; i < options.length; i++){
var option1 = options[i];
if(option1.selected == true){
select2.appendChild(option1);
i--;
}
}
}
function allToRight(){
var select1 = document.getElementById("select1");
var options = select1.getElementsByTagName("option");
var select2 = document.getElementById("select2");
for(var i = 0; i < options.length; i++){
var option1 = options[i];
select2.appendChild(option1);
i--;
}
}
function selToLeft(){
var select2 = document.getElementById("select2");
var options = select2.getElementsByTagName("option");
var select1 = document.getElementById("select1");
for(var i = 0; i < options.length; i++){
var option2 = options[i];
if(option2.selected == true){
select1.appendChild(option2);
i--;
}
}
}
function allToLeft(){
var select2 = document.getElementById("select2");
var options = select2.getElementsByTagName("option");
var select1 = document.getElementById("select1");
for(var i = 0; i < options.length; i++){
var option2 = options[i];
select1.appendChild(option2);
i--;
}
}
</script>
案例三：省市联动
<body>
<select id="provinceid" onchange="add(this.value);">
<option value="0">--请选择--</option>
<option value="四川">四川</option>
<option value="吉林">吉林</option>
<option value="广东">广东</option>
<option value="北京">北京</option>
<option value="西藏">西藏</option>
</select>
<select id="cityid">
</select>
</body>
<script type="text/javascript">
var arr = new Array(4);
arr[0] = ["四川","成都","达州","眉山","内江","乐山","遂宁","南充"];
arr[1] = ["吉林","吉林","长春","四平","通化","白城","松原","白山"];
arr[2] = ["广东","广州","惠州","汕头","汕尾","东莞","江门","佛山"];
arr[3] = ["北京","海淀","朝阳","东城","西城","宣武","丰台","石景山"];
arr[4] = ["西藏","拉萨","日喀则","昌都","林芝","山南","那区"];
function add(val){
//获取city的select
var city1 = document.getElementById("cityid");
//得到city里面的option
var options = city1.getElementsByTagName("option");
//遍历数组
for(var m = 0; m < options.length; m++){
var op = options[m];
city1.removeChild(op)
}
}
//遍历二维数组
for(var i = 0; i < arr.length; i++){
//得到二维数组里面的每一个数组
var arr1 = arr[i];
//得到遍历之后的数组的第一个值
var firstvalue = arr1[0];
//判断传递过来的值是否和第一个值相等
if(firstvalue == val){
//相同就得到第一个值后面的元素
//遍历arr1
for(var j = 1;j < arr1.length; j++){
var value1 = arr1[j];//得到城市的名称
//创建option
var option1 = document.createElement("option");
//创建文本
var text1 = document.createTextNode(value1);
//把文字添加到option1里面
option1.appendChild(text1);
//添加值到city1里面
city1.appendChild(option1);
}
}
}
</script>
案例四：自动生成表格
<body> 行：<input type="text" id="h"> 列：<input type="text" id="l"><br/> <input type="button" value="生成" onclick="add()"> <div id="divv"> </div> </body> <script type="text/javascript"> function add() { //获取输入的行和列 var h = document.getElementById("h").value; var l = document.getElementById("l").value; //把表格变量放在一个变量里面 var tab = "<table border='1' bordercolor='yellow'>"; //循环行 for(var i=1;i<=h;i++){ tab += "<tr>"; //循环单元格 for(var j=1;j<=l;j++){ tab += "<td>aaaaaaaa</td>" } tab += "</tr>" } tab +="</table>"; //得到div标签 var divv = document.getElementById("divv"); //把table的代码设置到div里面去 divv.innerHTML = tab; } </script>
浙公网安备 33010602011771号