如何实现对某一表格按不同的触发事件显示不同的效果?谢谢各位!

dengliebing java工程师  2015-07-22 10:09:43
我的表格形式像这样:

我想实现的效果是当我输入A名称,点击查询则在A信息栏中显示A的属性信息,同理,当我输入B名称点击查询时,在B信息栏中显示B的属性信息。请问各位怎么实现?多谢!



...全文
138 点赞 收藏 11
写回复
11 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
ab637800 2015-07-23
引用 8 楼 dengliebing 的回复:
[quote=引用 7 楼 keyliwen 的回复:] 你把list直接传过去,肯定只能用刷新页面的方式,建议把list用json工具(比如FastJson)封装一下,返回给页面,采用ajax的形式来返回查询数据
这是我jsp代码: <script type="text/javascript"> $(function(){ //查询触发主机信息 $("#mloginid").on("click",function(){ alert("mmmmmmm"); if($("#masterip").val()==""){ $("#mip").text("主机名不能为空!"); } else{ $.ajax({ type:"post", url:"${pageContext.request.contextPath}/osdb/selectall", data:"mhostname="+$("#masterip").val(), success:function(ret){ //console.log(ret); if(ret=="mok"){ location.href="${pageContext.request.contextPath}/page/queryosdb.jsp"; }if(ret=="merror"){ $("#mip").text("该主机不存在!轻确认!"); } } }); } }); $("#masterip").blur(function(){ if($(this).val()==""){ $("#mip").text("主机名不能为空!"); }else{ $("#mip").text(""); } }); //触发查询从机信息 $("#sloginid").on("click",function(){ alert("sssss"); if($("#sasterip").val()==""){ $("#sip").text("从机名不能为空!"); } else{ $.ajax({ type:"post", url:"${pageContext.request.contextPath}/osdb/selectall", data:"shostname="+$("#sasterip").val(), success:function(ret){ //console.log(ret); if(ret=="sok"){ location.href="${pageContext.request.contextPath}/page/queryosdb.jsp"; }if(ret=="serror"){ $("#sip").text("该从机不存在!轻确认!"); } } }); } }); $("#sasterip").blur(function(){ if($(this).val()==""){ $("#sip").text("从机名不能为空!"); }else{ $("#sip").text(""); } }); }); </script> <body leftmargin=30 topmargin=30> ${mylist } <table border=0 bgcolor="000000" cellspacing="1" width=900> <tr bgcolor="FFFFFF" align="center"> <td><h3>AB信息</h3></td> <td><h3>A信息</h3></td> <td><h3>B信息</h3></td> </tr> <tr bgcolor="FFFFFF" align="center"> <td><h4>属性</h4></td> <td><font color="red">*请输入A名称:  </font><input type="text" name="mhostname" class="text" id="masterip"><span><font id="mip" color="red" size="1px"></font></span>    <input type="button" class="button" value="查  询" id="mloginid"></td> <td><font color="red">*请输入B名称:  </font><input type="text" name="shostname" class="text" id="sasterip"><span><font id="sip" color="red" size="1px"></font></span>    <input type="button" class="button" value="查  询" id="sloginid"></td> </tr> <c:forEach items="${requestScope.mylist }" var="m"> <tr bgcolor="FFFFFF" align="center"> <td>信息1</td> <td>${m.hostname }</td> <td>${m.hostname }</td> </tr> <tr bgcolor="FFFFFF" align="center"> <td>信息2</td> <td>${m.ip }</td> <td>${m.ip }</td> </tr> <tr bgcolor="FFFFFF" align="center"> <td>信息3</td> <td>${m.cpu }</td> <td>${m.cpu }</td> </tr> </c:forEach> ajax的跳转,数据接受什么的都没错,但是就是下面的<c:foreach></c:foreach>标签中的值没获取到。现在对json还不是太了解,所以有点懵啊。[/quote] <c:foreach></c:foreach>你这值那来的,AJAX请求和<c:foreach></c:foreach>可没什么关系,一个是浏览器脚本,一个是服务器语言。
回复
dengliebing 2015-07-23
引用 9 楼 ab637800 的回复:
[quote=引用 8 楼 dengliebing 的回复:] [quote=引用 7 楼 keyliwen 的回复:] 你把list直接传过去,肯定只能用刷新页面的方式,建议把list用json工具(比如FastJson)封装一下,返回给页面,采用ajax的形式来返回查询数据
这是我jsp代码: <script type="text/javascript"> $(function(){ //查询触发主机信息 $("#mloginid").on("click",function(){ alert("mmmmmmm"); if($("#masterip").val()==""){ $("#mip").text("主机名不能为空!"); } else{ $.ajax({ type:"post", url:"${pageContext.request.contextPath}/osdb/selectall", data:"mhostname="+$("#masterip").val(), success:function(ret){ //console.log(ret); if(ret=="mok"){ location.href="${pageContext.request.contextPath}/page/queryosdb.jsp"; }if(ret=="merror"){ $("#mip").text("该主机不存在!轻确认!"); } } }); } }); $("#masterip").blur(function(){ if($(this).val()==""){ $("#mip").text("主机名不能为空!"); }else{ $("#mip").text(""); } }); //触发查询从机信息 $("#sloginid").on("click",function(){ alert("sssss"); if($("#sasterip").val()==""){ $("#sip").text("从机名不能为空!"); } else{ $.ajax({ type:"post", url:"${pageContext.request.contextPath}/osdb/selectall", data:"shostname="+$("#sasterip").val(), success:function(ret){ //console.log(ret); if(ret=="sok"){ location.href="${pageContext.request.contextPath}/page/queryosdb.jsp"; }if(ret=="serror"){ $("#sip").text("该从机不存在!轻确认!"); } } }); } }); $("#sasterip").blur(function(){ if($(this).val()==""){ $("#sip").text("从机名不能为空!"); }else{ $("#sip").text(""); } }); }); </script> <body leftmargin=30 topmargin=30> ${mylist } <table border=0 bgcolor="000000" cellspacing="1" width=900> <tr bgcolor="FFFFFF" align="center"> <td><h3>AB信息</h3></td> <td><h3>A信息</h3></td> <td><h3>B信息</h3></td> </tr> <tr bgcolor="FFFFFF" align="center"> <td><h4>属性</h4></td> <td><font color="red">*请输入A名称:  </font><input type="text" name="mhostname" class="text" id="masterip"><span><font id="mip" color="red" size="1px"></font></span>    <input type="button" class="button" value="查  询" id="mloginid"></td> <td><font color="red">*请输入B名称:  </font><input type="text" name="shostname" class="text" id="sasterip"><span><font id="sip" color="red" size="1px"></font></span>    <input type="button" class="button" value="查  询" id="sloginid"></td> </tr> <c:forEach items="${requestScope.mylist }" var="m"> <tr bgcolor="FFFFFF" align="center"> <td>信息1</td> <td>${m.hostname }</td> <td>${m.hostname }</td> </tr> <tr bgcolor="FFFFFF" align="center"> <td>信息2</td> <td>${m.ip }</td> <td>${m.ip }</td> </tr> <tr bgcolor="FFFFFF" align="center"> <td>信息3</td> <td>${m.cpu }</td> <td>${m.cpu }</td> </tr> </c:forEach> ajax的跳转,数据接受什么的都没错,但是就是下面的<c:foreach></c:foreach>标签中的值没获取到。现在对json还不是太了解,所以有点懵啊。[/quote] <c:foreach></c:foreach>你这值那来的,AJAX请求和<c:foreach></c:foreach>可没什么关系,一个是浏览器脚本,一个是服务器语言。[/quote]<c:forEach items="${requestScope.mylist }" var="m">这里的值从requestScope中来的啊?
回复
u011102644 2015-07-23
直接在js里面定义: <script type="text/javascript"> function addUser() { document.userForm.action = "${pageContext.request.contextPath}/addUser"; document.userForm.submit(); } function updateAll() { document.userForm.action = "${pageContext.request.contextPath}/findAll"; document.userForm.submit(); } </script> <input type="submit" value="添加" onclick="addUser()">    <input type="submit" value="批量修改" onclick="updateAll()">
回复
dengliebing 2015-07-22
引用 7 楼 keyliwen 的回复:
你把list直接传过去,肯定只能用刷新页面的方式,建议把list用json工具(比如FastJson)封装一下,返回给页面,采用ajax的形式来返回查询数据
这是我jsp代码: <script type="text/javascript"> $(function(){ //查询触发主机信息 $("#mloginid").on("click",function(){ alert("mmmmmmm"); if($("#masterip").val()==""){ $("#mip").text("主机名不能为空!"); } else{ $.ajax({ type:"post", url:"${pageContext.request.contextPath}/osdb/selectall", data:"mhostname="+$("#masterip").val(), success:function(ret){ //console.log(ret); if(ret=="mok"){ location.href="${pageContext.request.contextPath}/page/queryosdb.jsp"; }if(ret=="merror"){ $("#mip").text("该主机不存在!轻确认!"); } } }); } }); $("#masterip").blur(function(){ if($(this).val()==""){ $("#mip").text("主机名不能为空!"); }else{ $("#mip").text(""); } }); //触发查询从机信息 $("#sloginid").on("click",function(){ alert("sssss"); if($("#sasterip").val()==""){ $("#sip").text("从机名不能为空!"); } else{ $.ajax({ type:"post", url:"${pageContext.request.contextPath}/osdb/selectall", data:"shostname="+$("#sasterip").val(), success:function(ret){ //console.log(ret); if(ret=="sok"){ location.href="${pageContext.request.contextPath}/page/queryosdb.jsp"; }if(ret=="serror"){ $("#sip").text("该从机不存在!轻确认!"); } } }); } }); $("#sasterip").blur(function(){ if($(this).val()==""){ $("#sip").text("从机名不能为空!"); }else{ $("#sip").text(""); } }); }); </script> <body leftmargin=30 topmargin=30> ${mylist } <table border=0 bgcolor="000000" cellspacing="1" width=900> <tr bgcolor="FFFFFF" align="center"> <td><h3>AB信息</h3></td> <td><h3>A信息</h3></td> <td><h3>B信息</h3></td> </tr> <tr bgcolor="FFFFFF" align="center"> <td><h4>属性</h4></td> <td><font color="red">*请输入A名称:  </font><input type="text" name="mhostname" class="text" id="masterip"><span><font id="mip" color="red" size="1px"></font></span>    <input type="button" class="button" value="查  询" id="mloginid"></td> <td><font color="red">*请输入B名称:  </font><input type="text" name="shostname" class="text" id="sasterip"><span><font id="sip" color="red" size="1px"></font></span>    <input type="button" class="button" value="查  询" id="sloginid"></td> </tr> <c:forEach items="${requestScope.mylist }" var="m"> <tr bgcolor="FFFFFF" align="center"> <td>信息1</td> <td>${m.hostname }</td> <td>${m.hostname }</td> </tr> <tr bgcolor="FFFFFF" align="center"> <td>信息2</td> <td>${m.ip }</td> <td>${m.ip }</td> </tr> <tr bgcolor="FFFFFF" align="center"> <td>信息3</td> <td>${m.cpu }</td> <td>${m.cpu }</td> </tr> </c:forEach> ajax的跳转,数据接受什么的都没错,但是就是下面的<c:foreach></c:foreach>标签中的值没获取到。现在对json还不是太了解,所以有点懵啊。
回复
keyliwen 2015-07-22
你把list直接传过去,肯定只能用刷新页面的方式,建议把list用json工具(比如FastJson)封装一下,返回给页面,采用ajax的形式来返回查询数据
回复
dengliebing 2015-07-22
引用 5 楼 defonds 的回复:
不是。你最好把这个 list 用 json 的格式传给 jQuery
我现在的action是这样的: HttpServletRequest req = ServletActionContext.getRequest(); HttpServletResponse resp = ServletActionContext.getResponse(); try { List<OsDbBk> list = osdbbkservice.queryAll(); //将得到的数据放入到request的作用域中,在页面通过requestScope来获取 req.setAttribute("mylist", list); RequestDispatcher rd = req.getRequestDispatcher("/page/queryosdb.jsp"); rd.forward(req, resp); } catch (Exception e) { e.printStackTrace(); } 这个list是不为空的,有值的。但是在jsp用${m.属性}取不到值。
回复
Defonds 2015-07-22
不是。你最好把这个 list 用 json 的格式传给 jQuery
回复
dengliebing 2015-07-22
引用 3 楼 defonds 的回复:
那就用 jQuery 拉下来显示了。。 你是不知道怎么动态改变表格的 style 还是?
是像这样来取吗? <c:forEach items="${mylist }" var="m"> <tr bgcolor="FFFFFF" align="center"> <td>信息1</td> <td>${m.hostname }</td> <td>${m.hostname }</td> </tr> <tr bgcolor="FFFFFF" align="center"> <td>信息2</td> <td>${m.ip }</td> <td>${m.ip }</td> </tr> <tr bgcolor="FFFFFF" align="center"> <td>信息3</td> <td>${m.cpu }</td> <td>${m.cpu }</td> </tr> </c:forEach> 通过JQery的c标签来迭代获取?然后用ajax无刷新的显示?
回复
Defonds 2015-07-22
那就用 jQuery 拉下来显示了。。 你是不知道怎么动态改变表格的 style 还是?
回复
dengliebing 2015-07-22
引用 1 楼 defonds 的回复:
是想用返回的数据显示在表格里? 还是动态显示在表格?
在相应的action中已经有数据了,当点击触发事件时,想让他/它显示在表格中。
回复
Defonds 2015-07-22
是想用返回的数据显示在表格里? 还是动态显示在表格?
回复
相关推荐
发帖
Web 开发
创建于2007-09-28

8.0w+

社区成员

Java Web 开发
申请成为版主
帖子事件
创建了帖子
2015-07-22 10:09
社区公告
暂无公告