jQuery获取表格隐藏域与ajax请求数据结合显示详情

最新推荐文章于 2022-10-27 20:15:08 发布
最新推荐文章于 2022-10-27 20:15:08 发布
阅读量289 收藏
点赞数
文章标签： javascript 数据库 后端 ViewUI

0.表格样式

 

1.显示详情

 

第一种方法:利用表格的基本数据与从数据库中获取结合。

主要代码:

 
  
 <a href="javascript:void(0)" data-toggle="modal" data-target="#el_FourInfo" onClick="allInfo(this,${danger.dangerid})">详情</a>
 
  
 
 
 
 
 
 
 
 
 
 
 
全部表格代码
 
 
 
  
 
  
                      <c:forEach var="danger"
                                                items="${result.pageBean.productList }" varStatus="status"> <tr> <td>${ status.index + (result.pageBean.currentPage-1)*10+1}</td> <td><fmt:formatDate value="${danger.findtime }" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td> <td>${danger.checkunit }</td> <td>${danger.type }</td> <td>${danger.dangergrade }</td> <td>${danger.unit }</td> <td>${danger.content}</td> <td>${danger.unit}</td> <td>${danger.manager}</td> <td>问题</td> <td>${danger.rectificationmeasure }</td> <td><fmt:formatDate value="${danger.rectificationtime }" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td> <td><fmt:formatDate value="${danger.sidingtime }" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td> <td><c:if test="${danger.dangerstatus eq '已整改'}"> <!-- 变活， 1 ：隐患id ，1 ：跟踪id --> <a href="javascript:void(0)" onClick="el_setFour(this,${danger.dangerid},${danger.followid })">复查</a> </c:if> <c:if test="${danger.dangerstatus ne '已整改'}"> <!-- <--需要改一下。2 换成id --> <a href="javascript:void(0)" data-toggle="modal" data-target="#el_FourInfo" onClick="allInfo(this,${danger.dangerid})">详情</a> </c:if></td> </tr> </c:forEach>
 
  
 
 
 
 
 
 
 
 
点击详情的时候把自己传到JS函数中，JS函数根据传过来的处理(基本信息从表格中获取，剩下需要的其他信息用ajax从数据库中获取并填充到模态框的表格中，注意下面红字代码)
 
 
 
  
                                    <script>
                                        function allInfo(obj,recheckid) {
                                            $('#allInfo').modal();
                                            $tds = $(obj).parents('tr').children('td');
                                            $("#xxcheckdate").text($tds.eq(1).html());
                                            $("#xxcheckunit").text($tds.eq(2).html());
                                            $("#xxdangertype").text($tds.eq(3).html());
                                            $("#xxdutyunit").text($tds.eq(7).html());
                                            
                                            $("#xxzhenggaicuoshi").text($tds.eq(10).html());
                                            $("#xxcheckman").text($tds.eq(7).html());//需要隐藏
                                            $("#xxplace").text($tds.eq(4).html());//需要隐藏
                                            $("#xxdangerlevel").text($tds.eq(4).html());
                                            $("#xxdangercontent").text($tds.eq(6).html());
                                            $("#xxzhenggaitime").text($tds.eq(11).html());
                                            
                                            
                                            $.ajax({        
                                                    url : '${pageContext.request.contextPath}/recheck_getRecheck.action',
                                                    data : {"recheckid" : recheckid},
                                                    type : 'POST',
                                                    dataType : 'json',
                                                    success : function(data) {
                                                        $("#xxrecheckman").text(data.result.recheckman);
                                                        $("#xxrecheckcomment").text(data.result.comment);
                                                        if($tds.eq(13).html()=="未复查"){
                                                            $("#xxrecheckresult").text($tds.eq(13).html());
                                                        }else if(data.result.recheckresult=="1"){
                                                            $("#xxrecheckresult").text('合格');
                                                        }else if(data.result.recheckresult=="0"){
                                                            $("#xxrecheckresult").text('不合格');
                                                        }
                                                    }
                                            })
                                        }
                                    </script>
 
 
 
 
 
 
 
代码分析:
 
 
　　$tds = $(obj).parents('tr').children('td');是获取元素的上级的td元素集合。 $("#xxcheckdate").text($tds.eq(1).html());是获取表格指定第二列的数据并赋给模态框中的id为xxcheckdate的输入框。
然后通过下面的ajax获取信息后添加到模态框。
 
 
 
 
 
重点:(例子二)
 
 
　　可以将所有的基本数据添加到隐藏域，然后在点击详情的时候获取隐藏域的值，并赋给模态框中的值，然后开启模态框。如果一行隐藏多个字段，可以每个加个class，然后通过获取到td元素，再通过过滤获取其兄弟节点或者其孩子节点.
 
 
 
 
 
jsp添加隐藏域
 
 
 
  
                                            <c:forEach var="danger"
                                                items="${result.pageBean.productList }" varStatus="status">
                                                <td>${ status.index + (result.pageBean.currentPage-1)*10+1}
                                                    <input type="hidden" id="danger_IdNum"
                                                    value="${danger.dangerid }" /> <input type="hidden"
                                                    id="siding_IdNum" value="${danger.sidingid }" /> <input
                                                    type="hidden" class="address_hidden"
                                                    value="${danger.address }" /> <input type="hidden"
                                                    class="dutyPerson_hidden" value="${danger.dutyperson}" /> <input
                                                    type="hidden" class="supervisor_hidden"
                                                    value="${danger.supervisor }" /> <input type="hidden"
                                                    class="rectificationmeasure_hidden"
                                                    value="${danger.rectificationmeasure }" />

                                                </td>
                                                <td>${danger.dangergrade }</td>
                                                <td>${danger.type }</td>
                                                <td>${danger.unit }</td>
                                                <td>${danger.content}</td>
                                                <td>问题</td>
                                                <td><fmt:formatDate value="${danger.findtime }"
                                                        pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>
                                                <td>${danger.checkunit }</td>
                                                <td>${danger.findperson }</td>
                                                <td><fmt:formatDate
                                                        value="${danger.rectificationtime }"
                                                        pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>
                                                <td><fmt:formatDate value="${danger.sidingtime }"
                                                        pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>
                                                <td>${danger.dangerstatus }</td>
                                                <td><a href="javascript:void(0)" onClick="trace(this)">隐患跟踪</a>
                                                    <a href="javascript:void(0)" onClick="allInfo(this)">详情</a>
                                                    <a href="javascript:void(0)" onClick="postpone(this)">延期</a>
                                                </td>
                                                </tr>
                                            </c:forEach>
                                        </tbody>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
详情事件:获取隐藏于数据与表格数据填充到模态框，没有的用ajax请求后端
 
 
 JS获取隐藏域的值赋给模态框
 
 
 
  
                                    <script>
                            //点击详情按钮进行的操作
                            function allInfo(obj) {
                                
                                //获取隐藏域值
                                var address_hidden = $(obj).parents("tr").find(".address_hidden").val();
                                var dutyPerson_hidden = $(obj).parents("tr").find(".dutyPerson_hidden").val();
                                var supervisor_hidden = $(obj).parents("tr").find(".supervisor_hidden").val();
                                var rectificationmeasure_hidden = $(obj).parents("tr").find(".rectificationmeasure_hidden").val();
                                
                                
                                //获取当前行中的所有列的信息
                                $tds = $(obj).parents('tr').children('td');
                                //alert($tds.eq(0).html() + $tds.eq(1).html());
                                //alert($("#findTime").text());
                                //$("#dangerGrade").text($tds.eq(1).html());
                                $("#dangerGrade_detail").text($tds.eq(1).html());
                                $("#dangerType_detail").text($tds.eq(2).html());
                                $("#dutyUnit_detail").text($tds.eq(3).html());
                                $("#dangerContent_detail").text($tds.eq(4).html());
                                $("#findTime_detail").text($tds.eq(6).html());
                                $("#checkUnit_detail").text($tds.eq(7).html());
                                $("#findPerson_detail").text($tds.eq(8).html());
                                $("#rectificationTime_detail").text($tds.eq(9).html());
                                
                                //添加隐藏域信息
                                $("#address_detail").text(address_hidden);
                                $("#dutyPerson_detail").text(dutyPerson_hidden);
                                $("#rectificationmeasure_detail").text(supervisor_hidden);
                                $("#supervisor_detail").text(rectificationmeasure_hidden);
                                
                                //从数据库中获取跟踪表的相关信息
                                
                                //获取当前行的隐患信息的四定ID
                                var sidingId = $(obj).parents("tr").find("#siding_IdNum").val();
                                //alert(sidingId);
                                //异步提交获取数据
                                $.ajax({
                                        url : '${pageContext.request.contextPath }/followHander_getDetailInfo.action',
                                        data : {"sidingId":sidingId},
                                        type : 'POST',
                                        dataType : 'json',
                                        async:true,
                                        success : function(data) {
                                                //alert(data.followInfo);
                                                //是否有安全措施--判断输出
                                                $("#hasSecurity_detail").text(data.followInfo.hassecurity>0?"是":"否");
                                                //追踪详情信息
                                                $("#safetyTechnician_detail").text(data.followInfo.safetytechnician);
                                                $("#managerNameFollow_detail").text(data.followInfo.managername);
                                            }
                                        });
                                
                                //开启模态框
                                $('#allInfo').modal();
                            }
                        </script>
 
 
 
 
 
 
 
 
 
 
 总结:
 
 
　　使用方法可以总结为:  表格的td里面放一些a标签，onclick时间传自己下去。JS函数首先获取其父元素tr(获取到一行)，再获取其所有的td元素（获取到每列），然后对每列进行过两次取值。
 
 
 
  
<a href="javascript:void(0)" data-toggle="modal"
                                                                data-target="#el_FourInfo"
                                                                onClick="allInfo(this)">详情</a>
 
 
 
 
 
 
 
 $tds = $(obj).parents('tr').children('td');  //获取到每列集合
 
 
$("#xxcheckdate").text($tds.eq(1).html());  //第一种过滤方式(在表格中位置)
 
 
 var findperson_hidden = $(obj).parents('tr').find(".hidden_findperson").val();      //第二种过滤方式。找到每列再过滤每列下面的class为hidden_findperson
 var findperson_hidden = $tds.find(".hidden_findperson").val();　　　　//同上面第二种过滤方式一样。只是用到$tds
 
 



第二种方法:调用函数的时候传一个id，然后根据id去数据库查询后添加到模态框中。

 


                

        

        




    

  


            

                    
            

    

      

        

            

              
                
                  weixin_34124939
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
web前端基础html,css,js,jquery

				
			

			

				

					weixin_57619565的博客
				

				

					08-04
					
					1518
					
				

			

		

		

			
				
目录
1       前端技术：
1.1           学习方法
1.1.1               前端要怎么学？
1.1.2               前端技术栈
1.2           HBuilderX
1.2.1               介绍
1.2.2               安装
1.2.3               主题
1.2.4               字体
1.2.5               去掉px转rem提示
1.2.6              

			
		

	



                

            
              



	

		

			

				
					
vue基础（主要为vue3）

				
			

			

				

					weixin_42823014的博客
				

				

					04-11
					
					3498
					
				

			

		

		

			
				
VUE基础入门
vue 简介
Vue 是一套用于构建用户界面的前端框架。

1.1构建用户界面

前端开发者最主要的工作，就是为网站的使用者（又称为：网站的用户）构建出美观、舒适、好用的网页。

1.1构建用户界面的传统方式

在传统的 Web 前端开发中，是基于jQuery + 模板引擎 的方式来构建用户界面的。

1.1.2使用 vue 构建用户界面

使用 vue 构建用户界面，解决了 jQuery + 模板引擎 的诸多痛点，极大的提高了前端开发的效率和体验。

编写结构：基于 vue 中提供的指令，

			
		

	



              


  
              

                


	

		

			

				
					
隐藏域在Ajax中的应用

				
			

			

				

					char56789的博客
				

				

					11-08
					
					409
					
				

			

		

		

			
				
话不多说直接上代码
以下是利用隐藏iframe实现的ajax:
index.htm

    
    
    
        
        
        
        
        
ajax.htm

    
    
    
        
    

现在我们再来分析这个隐藏域究竟是什么呢？
隐藏域就是用来收集和发送信息的不可见元素，对于网页来的访问者来说，隐藏域是看不见的。但是在与服务器进行数据交互式时隐藏域就会将信息(用你设置时定义的名称和值)发送到服务器上。
我们在什

			
		

	





	

		

			

				
					
datatables如何把列设置成hidden隐藏域？

				
			

			

				

					weixin_34068198的博客
				

				

					08-15
					
					429
					
				

			

		

		

			
				
官网：https://datatables.net/reference/option/设置： visible: false如下：
<!DOCTYPE html><html><head>    <meta charset="utf-8">     <script src="../../js/jquery-1.9.1.min.js">&lt...

			
		

	



		

			
		



	

		

			

				
					
隐藏域方式的Ajax实现

				
			

			

				

					wheeler的专栏
				

				

					01-24
					
					1725
					
				

			

		

		

			
				
xmlHttp形式的Ajax：XmlHttp形式的Ajax IBM技术文档库以下是利用隐藏iframe实现的ajax:index.htm                                                                                        func

			
		

	





	

		

			

				
					
jquery 使用ajax请求数据显示到页面表格中

				
			

			

				

					TTO_OTT的专栏
				

				

					06-05
					
					7328
					
				

			

		

		

			
				
“循环数据--->>每5条数据放到一个里” 的效果



 


 $.ajax({
                    url: "ajax/func.php",
                    type: "POST",
                    dataType: 'json',
                    data: 'func=getU

			
		

	





	

		

			

				
					
前端面试题（补充）

				
			

			

				

					weixin_71407122的博客
				

				

					10-27
					
					2465
					
				

			

		

		

			
				
前端面试题（补充）

			
		

	





	

		

			

				
					
jquery 获取隐藏域的值

					
热门推荐

				
			

			

				

					冰恋云的专栏
				

				

					04-07
					
					2万+
					
				

			

		

		

			
				
获取隐藏域的值
页面
">


jquery获取
  var ycid = $("input:hidden[name='ycid']").val();

			
		

	





	

		

			

				
					
jQuery validate验证表单隐藏域

				
			

			

				

					天阶的专栏
				

				

					01-15
					
					1223
					
				

			

		

		

			
				
非常简单，在你的validate中加入ignore = "" //英文引号


$("#form").validate({
    ignore: "",
});

 

 

			
		

	





	

		

			

				
					
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）

				
			

			

				

					m0_55613022的博客
				

				

					02-24
					
					3237
					
				

			

		

		

			
				
HTML和Css部分
1、对BFC规范（块级格式化上下文）的理解

BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响
BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。
怎么触发BFC
1. float的值left或right
2. overflow的值不为visible（默认）
3. display的值为inline-block、table-cell、table-caption
4. position的值为absolute（绝对定位）或f

			
		

	





	

		

			

				
					
jquery获取隐藏域的值

				
			

			

				

					ly8261861的专栏
				

				

					10-19
					
					4583
					
				

			

		

		

			
				
$(function () {
        
        var str1 = $("input:hidden[id='HiddenField1']").val();
        
        alert(str1);
    });

尼玛，粗心大意，以为跟获取input的方法一样，唉，记录下来。...

			
		

	





	

		

			

				
					
JS 将 JSON 对象添加到隐藏域中，取出输出是 object 类型，无法获取属性问题

				
			

			

				

					yage124的博客
				

				

					03-06
					
					1390
					
				

			

		

		

			
				
【问题】
        在页面中经常使用隐藏域暂存一些数据，但是在存放 json 对象时，会出现将 json 对象存放到隐藏域中，但是取出后输出显示为 [Object object]，而且无法通过“ .属性名 ”的方式获取属性。
【解决方法】

先通过 var jsonStri = JSON.stringify( J...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值