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

2021 01 27

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			tr{
				height: 70px;
				
			}
			td ,th{
				
				width: 150px;
				
				
				text-align: center;
				
			}
			
		</style>
		<script>
			
			function  addNode(){
				
				//获得table表格对象
				var  tab=document.getElementById("tab"); 
				
				//创建tr节点对象
				
				var tr =document.createElement("tr");
				
				//创建td对象
				
				var  td =document.createElement("td");
				//											 失去焦点
				td.innerHTML="<input type='text' size='10px' onblur='seaveVal(this)'/>"
				
				var  td2 =document.createElement("td");
				
				td2.innerHTML="<input type='text' size='10px'  onblur='seaveVal(this)'/>"
				
				var  td3 =document.createElement("td");
				
				td3.innerHTML="<input type='button'  value='添加'/> "+
				              "<input type='button' value='删除' onclick='removeNode(this)'/>"
				
				tab.appendChild(tr);
				
				tr.appendChild(td);
				
				tr.appendChild(td2);
				
				tr.appendChild(td3);
				
				 
				
			}
			
			
			function  seaveVal(thi){
				
				
				//获得父亲级节点
				
				var  td =thi.parentNode;
				
				td.innerText=thi.value;
			
			}
			
			
			function removeNode(thi){
				
				//获得tr节点
				
				var tr= thi.parentNode.parentNode;
				
				tr.remove();
				
			}
		</script>
		
		
		
	</head>
	<body>
		
		<table border="1px" align="center" id="tab">
			<tr>
				<th>图书名称</th>
				<th>图书价格</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>javaSE</td>
				<td>19</td>
				<td>
					
					<input type="button" name="" id="" value="添加"  onclick="addNode()"/>
					
					<input type="button" name="" id="" value="删除" onclick='removeNode(this)' />
					
				</td>
			</tr>
			<tr>
				<td>javaEE</td>
				<td>39</td>
				<td>
					
					<input type="button" name="" id="" value="添加" onclick="addNode()"/>
					
					<input type="button" name="" id="" value="删除" onclick='removeNode(this)'/>
					
				</td>
			</tr>
		</table>
		
		
	</body>
</html>

老师,

function  seaveVal(thi){
				
				
				//获得父亲级节点
				
				var  td =thi.parentNode;
				
				td.innerText=thi.value;
			
			}

的thi参数是自己定义(任意写)用来接收数据的吗?

JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 25501楼
Python 全系列/第三阶段:Python 网络与并发编程/网络通信 25506楼
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 25507楼
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 25509楼
Python 全系列/第一阶段:Python入门/控制语句 25510楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/myAjax.js"></script>
</head>
<body>
 <button>发送请求</button>
 <script>
     /*var btn=document.querySelector('button');
     btn.onclick=function () {

     }*/

     function myAjax(paramsObj){
         //toLowerCase()将所有的都转为小写
         if (paramsObj.type.toLowerCase()=='get'){
             //封装get请求
             // console.log(paramsObj.data);
             //打印出来是对象,所以要先转换成数组
             var arr=[];
             for (var pro in paramsObj.data){
                 var str=pro+"="+paramsObj.data[pro];
                 arr.push(str);
             }
             //console.log(arr);//(2) ["username=test-beixi", "password=test-123456"]
             //将数组转换为字符串 以&作为分隔符
             var canshuStr=arr.join('&');
             //console.log(canshuStr);//username=test-beixi&password=test-123456
             // paramsObj.url+=canshuStr;
             //console.log(paramsObj.url);//3-封装Ajax.phpusername=test-beixi&password=test-123456
             /*在上面打印出来,路径后面没有?,所以要在这利用三目运算判断一下
              路径后面有没有?,==-1表示没有,就在路径后面加上?,如果有就加上
              字符串
              */
             paramsObj.url+=paramsObj.url.indexOf('?')==-1?'?'+canshuStr:'&'+canshuStr;
             // console.log(paramsObj.url);//3-封装Ajax.php?username=test-beixi&password=test-123456
         }else if(paramsObj.type.toLowerCase()=='post'){
             //封装post
             var formData=new FormData();
             //将数据放到对象里面
             for(var pro in paramsObj.data){
                 formData.append(pro,paramsObj.data[pro]);
             }
         }else{
             console.log('请求类型有误');
         }
         //创建xhr对象
         var xhr=new XMLHttpRequest();
         xhr.onreadystatechange=function(){
             if (xhr.readyState==4){
                 if (xhr.status==200){
                     //反馈回来的数据
                     paramsObj.success(xhr.responseText);
                 }
             }

         };
         //准备发送
         xhr.open(paramsObj.type,paramsObj.url,true);
         //发送请求
         if (paramsObj.type.toLowerCase()=='get'){
             xhr.send(null);
         }else if (paramsObj.type.toLowerCase()=='post'){
             xhr.send(formData);
         }else{
             console.log('请求类型有误');
         }

     }
     myAjax({
         type:'get',
         url:'3-封装Ajax.php',
         data:{
             username:'test-beixi',
             password:'test-123456'
         },
         success:function (res) {
             console.log(res);
         }
     })
 </script>
</body>
</html>

<?php?
 $success=array('msg'=>'ok','info'=>$_GET);
 echo json_encode($success);
>

老师我这是哪里出错啦,打印出来的是

blob.png

WEB前端全系列/第六阶段:Http服务与Ajax模块(旧)/Http服务与Ajax编程 25511楼
JAVA 全系列/第六阶段:项目管理与SSM框架/SpringMVC 25512楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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