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

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去数据库查询后添加到模态框中。