会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133027个问题

老师,我也遇到这个问题了    怎么转换的啊image.png

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		
		<link rel="stylesheet" type="text/css" href="css/jd.css" />
		
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css" />
		
		<script type="text/javascript" src="js/jd.js"></script>
		
	</head>
	<body>
		
		<!--导航开始-->
		
			<div class="nav">
				
				<div class="warp">
					
					<ul class="nav_ul1">
						<li><a href=""><i class="iconfont">&#xe8ff;</i>京东首页</a></li>
						<li><a href="">配送到:北京</a></li>
					</ul>
					
					 
					<ul class="nav_ul2">
						<li><a href="">洋洋宝贝</a><span>|</span></li>
						<li><a href="">我的订单</a><span>|</span></li>
						<li><a href="">我的京东</a><span>|</span></li>
						<li><a href="">我的会员</a><span>|</span></li>
						<li><a href="">企业采购</a><span>|</span></li>
						<li><a href="">京东手机</a><span>|</span></li>
						<li><a href="">关注京东</a><span>|</span></li>
						<li><a href="">客服服务</a><span>|</span></li>
						<li><a href="">网站导航</a></li>
					</ul>
					
				</div>
				
				
			</div>
		
		<!--导航结束-->
		
		<!--搜索框开始-->
		
			<div class="search">
				
				<div class="warp">
					
					<img src="img/logo.jpg" />
					
					
					<div  class="search_div">
						
						<input type="text"  class="search_text"/>
						<input type="button" value="搜索"  class="search_but"/>
						
					</div>
					
					
				</div>
				
				
			</div>
					
		<!--搜索框结束-->
		
		<!--标题开始-->
		
		<div class="title warp">
			
			<h3>全部商品</h3>
			
			<div>
				
				<span>配送至</span>
				
				<select>
					
					<option>昌平区</option>
					
					<option>顺义区</option>
					
					<option>大兴区</option>
					
					<option>朝阳区</option>
					
				</select>
				
			</div>
			
		</div>
		
		<!--标题结束-->
		
		<!--显示菜单的开始-->
		
		<div class="tips warp">
			
			<ul>
				<li><input type="checkbox" name="fav" id="all" onclick="checkTest1(this)" />全选</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>数量</li>
			</ul>
			
			
		</div>
		
		<!--显示菜单的结束-->
		
		<!--商品详情展示开始-->
		
		<div class="info warp">
			
			<ul>
				<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()" /></li>
				<li class="info_2"> <img src="img/img1.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服 </a></li>
				<li class="info_4"><a>颜色:灰色+粉红</a></li>
				<li class="info_5">¥152.6</li>
				<li class="info_6">					
					<button onclick="checkTest3(this,1)">-</button>
					<input type="text" value="1" />
					<button class="bot" onclick="checkTest3(this,2)">+</button>					
				</li>
				<li class="info_7">¥152.6</li>
				<li class="info_8">
					<a>删除</a><br />
					<a>移至我的关注</a>
				</li>
			</ul>
					
		</div>
		
		<div class="info warp">
			
			<ul>
				<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
				<li class="info_2"> <img src="img/img2.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】联想电脑,第六代智能英特尔 </a></li>
				<li class="info_4"><a>颜色:灰色+粉红</a></li>
				<li class="info_5">¥152.6</li>
				<li class="info_6">					
					<button checkTest3(this,1)>-</button>
					<input type="text" value="1" />
					<button class="bot" checkTest3(this,2)>+</button>					
				</li>
				<li class="info_7">¥152.6</li>
				<li class="info_8">
					<a>删除</a><br />
					<a>移至我的关注</a>
				</li>
			</ul>
					
		</div>
		
		<div class="info warp">
			
			<ul>
				<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
				<li class="info_2"> <img src="img/img3.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服 </a></li>
				<li class="info_4"><a>颜色:灰色+粉红</a></li>
				<li class="info_5">¥152.6</li>
				<li class="info_6">					
					<button checkTest3(this,1)>-</button>
					<input type="text" value="1" />
					<button class="bot" checkTest3(this,2)>+</button>					
				</li>
				<li class="info_7">¥152.6</li>
				<li class="info_8">
					<a>删除</a><br />
					<a>移至我的关注</a>
				</li>
			</ul>
					
		</div>
		
		<!--商品详情展示结束-->
		
		
		<!--结算模块开始-->
		
		<div class="balance warp">
		
			<ul class="balance_ul1">
				<li><input type="checkbox" name="fav" onclick="checkTest1(this)" />全选</li>
				<li><a>删除选中商品</a></li>
				<li><a>移到我的关注</a></li>
				<li><a>清除下柜商品</a></li>
			</ul>
			
			<ul class="balance_ul2">
				<li>已经选择<span>1</span>件商品</li>
				<li>总价<span>¥12</span></li>
				<li>
					<button class="butt">去结算</button>				
				</li>
			</ul>
			
		</div>
		<!--结算模块结束-->
		
	</body>
</html>

JS代码:

	//获得所有的多选框对象
	var fav = document.getElementsByName("fav");

//判断是否全选操作
function checkTest1(th){
	
	var flag = th.checked;
	
		for(var i in fav){
			fav[i].checked = flag;
		}	
	}

//单选决定全选操作
function checkTest2(){
	
	var flag = true;
	
	for(var i=1;i<fav.length-1;i++){
		
		if(!fav[i].checked){
			
			flag=false;
			break;
		}		
	}
	//决定框是否勾选
	fav[0].checked = flag;
	
	fav[fav.length-1].checked = flag;
}

//控制数量的增加和减少
function checkTest3(th,sig){
	
	var pre;
	
	if(sig=="1"){
		
	 //获得下一个节点
	 pre = th.nextElementSibling;
	 
	 if(Number(pre.value)>0){
	 	//获得节点的value值
	pre.value = Number(pre.value)-1;
	 }

	}else{
		
	 //获得上一个节点对象
	 pre=th.previousElementSibling;
	 
	 //获得节点的value值
	pre.value = Number(pre.value)+1;
	
	}
	
	//计算每一个商品总的价格
	//获得每一个商品的单价         parentNode:父节点      innerHTML:该商品的价格
	var val = pre.parentNode.previousElementSibling.innerHTML;
	
	//计算总的价格       Number(pre.value):商品的数量
	var zong = Number(val)*Number(pre.value);
	
	//把总的价格赋值给指定的对象
	pre.parentNode.nextElementSibling.innerHTML = "¥"+zong;
	
}




JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 451楼

老师,为什么我点击全选框,没有反应啊?实在找不到哪出错了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		
		<link rel="stylesheet" type="text/css" href="css/jd.css" />
		
		<link rel="stylesheet" type="text/css" href="icon/iconfont.css" />
		
		<script type="text/javascript" src="js/jd.js"></script>
		
	</head>
	<body>
		
		<!--导航开始-->
		
			<div class="nav">
				
				<div class="warp">
					
					<ul class="nav_ul1">
						<li><a href=""><i class="iconfont">&#xe8ff;</i>京东首页</a></li>
						<li><a href="">配送到:北京</a></li>
					</ul>
					
					 
					<ul class="nav_ul2">
						<li><a href="">洋洋宝贝</a><span>|</span></li>
						<li><a href="">我的订单</a><span>|</span></li>
						<li><a href="">我的京东</a><span>|</span></li>
						<li><a href="">我的会员</a><span>|</span></li>
						<li><a href="">企业采购</a><span>|</span></li>
						<li><a href="">京东手机</a><span>|</span></li>
						<li><a href="">关注京东</a><span>|</span></li>
						<li><a href="">客服服务</a><span>|</span></li>
						<li><a href="">网站导航</a></li>
					</ul>
					
				</div>
				
				
			</div>
		
		<!--导航结束-->
		
		<!--搜索框开始-->
		
			<div class="search">
				
				<div class="warp">
					
					<img src="img/logo.jpg" />
					
					
					<div  class="search_div">
						
						<input type="text"  class="search_text"/>
						<input type="button" value="搜索"  class="search_but"/>
						
					</div>
					
					
				</div>
				
				
			</div>
					
		<!--搜索框结束-->
		
		<!--标题开始-->
		
		<div class="title warp">
			
			<h3>全部商品</h3>
			
			<div>
				
				<span>配送至</span>
				
				<select>
					
					<option>昌平区</option>
					
					<option>顺义区</option>
					
					<option>大兴区</option>
					
					<option>朝阳区</option>
					
				</select>
				
			</div>
			
		</div>
		
		<!--标题结束-->
		
		<!--显示菜单的开始-->
		
		<div class="tips warp">
			
			<ul>
				<li><input type="checkbox" name="fav" id="all" onclick="checkTest1(this)" />全选</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>数量</li>
			</ul>
			
			
		</div>
		
		<!--显示菜单的结束-->
		
		<!--商品详情展示开始-->
		
		<div class="info warp">
			
			<ul>
				<li class="info_1"><input type="checkbox" name="fav" /></li>
				<li class="info_2"> <img src="img/img1.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服 </a></li>
				<li class="info_4"><a>颜色:灰色+粉红</a></li>
				<li class="info_5">¥152.6</li>
				<li class="info_6">					
					<button>-</button>
					<input type="text" value="1" />
					<button class="bot">+</button>					
				</li>
				<li class="info_7">¥152.6</li>
				<li class="info_8">
					<a>删除</a><br />
					<a>移至我的关注</a>
				</li>
			</ul>
					
		</div>
		
		<div class="info warp">
			
			<ul>
				<li class="info_1"><input type="checkbox" name="fav"/></li>
				<li class="info_2"> <img src="img/img2.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】联想电脑,第六代智能英特尔 </a></li>
				<li class="info_4"><a>颜色:灰色+粉红</a></li>
				<li class="info_5">¥152.6</li>
				<li class="info_6">					
					<button>-</button>
					<input type="text" value="1" />
					<button class="bot">+</button>					
				</li>
				<li class="info_7">¥152.6</li>
				<li class="info_8">
					<a>删除</a><br />
					<a>移至我的关注</a>
				</li>
			</ul>
					
		</div>
		
		<div class="info warp">
			
			<ul>
				<li class="info_1"><input type="checkbox" name="fav"/></li>
				<li class="info_2"> <img src="img/img3.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服 </a></li>
				<li class="info_4"><a>颜色:灰色+粉红</a></li>
				<li class="info_5">¥152.6</li>
				<li class="info_6">					
					<button>-</button>
					<input type="text" value="1" />
					<button class="bot">+</button>					
				</li>
				<li class="info_7">¥152.6</li>
				<li class="info_8">
					<a>删除</a><br />
					<a>移至我的关注</a>
				</li>
			</ul>
					
		</div>
		
		<!--商品详情展示结束-->
		
		
		<!--结算模块开始-->
		
		<div class="balance warp">
		
			<ul class="balance_ul1">
				<li><input type="checkbox" name="fav" onclick="checkTest1(this)" />全选</li>
				<li><a>删除选中商品</a></li>
				<li><a>移到我的关注</a></li>
				<li><a>清除下柜商品</a></li>
			</ul>
			
			<ul class="balance_ul2">
				<li>已经选择<span>1</span>件商品</li>
				<li>总价<span>¥12</span></li>
				<li>
					<button class="butt">去结算</button>				
				</li>
			</ul>
			
		</div>
		<!--结算模块结束-->
		
	</body>
</html>

JS代码:

//判断是否全选操作
function checkTest1(th){
	
	var flag = th.checked;
	
	//获得所有的多选框对象
	var fav = document.getElementsByName("fav");
		
		for(var i in fav){
			fav[i].checked = false;
		}	
	}

运行效果图

GIF.gif

JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 452楼
JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 453楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 457楼

<html>
    <head>
        <title>jQuery操作表格</title>
        <meta charset="UTF-8"/>
        <!--声明css代码域-->
        <style type="text/css">
            tr{
                height: 40px;
            }
        </style>
        
        
        <script type="text/javascript" charset="UTF-8" src="js/jquery-1.12.3.min.js"></script>
     
        <script type="text/javascript" charset="UTF-8" src="js/gwc.js"></script>
        
        
        
    </head>
    <body>
        <h3>jQuery操作表格</h3>
        <hr />
        <input type="button" id="fx" value="反选" />
        <input type="button" id="addRow" value="新增一行" />
        <input type="button" id="delRow" value="删除行" />
        <input type="button" id="copyRow" value="复制行" />
        <table border="1px" cellpadding="10px" cellspacing="0" id="ta">
            <tr>
                <td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td>
                <td width="200px">书名</td>
                <td width="200px">作者</td>
                <td width="200px">数量</td>
                <td width="200px">操作</td>
            </tr>
            <tr id="">
                <td><input type="checkbox" name="chk" id="" value="2"/></td>
                <td>《Java编程之道》</td>
                <td>wollo</td>
                <td>10</td>
                <td>
                    <input type="button" name="aa" id="" value="修改数量" onclick="change(this)"/>
                    <input type="button" name="" id="" value="删除" />
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="chk" id="" value="3" /></td>
                <td>《Python和我的故事》</td>
                <td>赵老师</td>
                <td>10</td>
                <td>
                    <input type="button" name="" id="" value="修改数量" onclick="change(this)"/>
                    <input type="button" name="" id="" value="删除" />
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" name="chk" id="" value="4" /></td>
                <td>《web开发详解》</td>
                <td>张老师</td>
                <td>30</td>
                <td>
                    <input type="button" name="" id="" value="修改数量" onclick="change(this)"/>
                    <input type="button" name="" id="" value="删除" />
                </td>
            </tr>            
        </table>
    </body>
</html>
$(function(){
    
    $("#chks").click(function(){
        
        //确定全选和全不选的操作
        var flag=$(this).prop("checked")
        $("input[name=chk]").prop("checked","flag");    
                
        /* if(flag){
            
            $("input[name=chk]").prop("checked","true");
            
        }else{
            
            $("input[name=chk]").prop("checked","false");
            
        } */
        
    })
    
    //判断是否全选
    $("input[name=chk]").click(function(){
        
        var flag=true;
        var chk=$("input[name=chk]")
        
        chk.each(function(){
            if(!$(this).prop("checked")){
                
                flag=false;
                return;
            }
            
        })
        
        $("#chks").prop("checked",flag);
        
    })
    
    
    //反选的操作
    $("#fx").click(function (){
        
        var chx=$("input[type=checkbox]");
        chx.each(function(){
            
            //获得多选框的初始的状态
            var flag=$(this).prop("checked");
            $(this).prop("checked",!flag);
        })
    })
    
    
    //新添加一行的操作
    
    $("#addRow").click(function(){
        
        //获得table对象
        var tab=$("#ta");
        tab.append('<tr id="">'+
                '<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
                '<td>《Java编程之道》</td>'+
                '<td>wollo</td>'+
                '<td>10</td>'+
                '<td>'+
                    '<input type="button" name="aa" id="" value="修改数量"  /> &nbsp;'+
                    '<input type="button" name="" id="" value="删除" />'+
                '</td>'+
            '</tr>');
        
    })
    
    //删除的操作
    
    $("#delRow").click(function(){
        
        var del=$("input[name=chk]:checked");
        if(del.length==0){
            alert("至少选择一行");
        }else{
            
            //执行删除的操作
            del.parent().parent().remove();
            
        }
    })
    
    //复制行
    $("#copyRow").click(function(){
        
        var copy=$("input[name=chk]:checked");
        if(copy.length==0){
        alert("至少选择一行");    
        }else{
            //执行copy
            
            //复制
            var tr=copy.parent().parent().clone();
            //粘贴
            $("#ta").append(tr);
        }
    })
    
    //修改数量的操作
    function  change(th){
        //tr节点
        var par=$(th).parent().parent();
        par.children().eq(3).html("<input type='text' size='3px'/>");
    }


    
})

1.png

老师我的jQuery引入正常,但是到修改数量就出现参数未定义,这个是哪里有问题

JAVA 全系列/第四阶段:网页编程和设计/Jquery(旧) 458楼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <script>
            
            function checkName(){
                
                //获得input对象的值
                var uname=document.getElementById("uname").value;
                //获得span对象
                
                var span=document.getElementById("uname_span");
                
                if(uname==null||name==""){
                    
                    span.innerText="×账号不能为空";
                    
                }else {
                    
                    span.innerText="√账号合法";
                }
                
            }
            
        </script>
        
    </head>
    <body>
        
        <form action="" name="fom" id="fom">
            
            <p>                        
                账号:<input type="text" name="uname" id="uname" onblur="checkName()"/><span id="uname_span"></span>
            </p>
            
            <p>
                密码:<input type="password" name="pwd" value="123"/>    
                
            </p>
            
            <p>
            
                <input type="button" value="提交" onclick="checkName()"/>
                
            </p>
            
        </form>
        
    </body>
</html>

1.png老师,这里空账号正常显示,刷新网页输入数字后它为什么还是提示错误

JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 460楼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <script type="text/javascript">
            
            function addNode(){
                //获得表单对象
                var fom=document.getElementById("fom");
                
                //创建节点的方法
                var p=document.createElement("p");
                
                
                
                
                
                var inp=document.createElement("input");
                
                inp.type="file";
                
                var inp2=document.createElement("input");
                
                inp2.type="button";
                
                inp2.value="删除";
            
            
            //添加节点对象
            //fom.appendChild(p);
            
            //获得最后一个节点对象
            var lastNode=document.getElementById("lastNode");
            
            fom.insertBefore(p.lastNode);
            
            p.appendChild(inp);
            
            p.appendChild(inp2);
            }
            
        </script>
        
    </head>
    <body>
        
        <form id="fom">
            
            <p>
            用户名:<input type="text"/>
            </p>
            
            <p>
                
            照片:<input type="file"/>
            <input type="button"value="添加"  onclick="addNode()"/>
            
            </p>
            
            <p id="lastNode">
            <input type="button" name="" id="" value="提交" />
            <input type="button" name="" id="" value="清空" />
            </p>
            
        </form>
        
    </body>
</html>

1.png老师为什么我给指定元素之前添加节点后网页就一直报错

JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 461楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 463楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 465楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637