jsp 页面代码:table 用div包裹住$("#div_tb table").remove(); 移除div里面的table 然后再加入table
servlet 与struts2一样的道理只是配置文件不一样
========================分割线========================
推荐阅读:
jQuery基础教程(第4版) PDF 完整高清版+配套源码
========================分割线========================
点击查看struts2写的级联下拉框
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="https://www.linuxidc.com/<%=basePath%>">
<title>列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="https://www.linuxidc.com/jquery/jquery-1.9.1.js"></script><!--jquery自己导入-->
<script type="text/javascript" src="https://www.linuxidc.com/jquery/jquery-1.9.1.min.js"></script>
<link type="text/css" href="https://www.linuxidc.com/css/itemListStyle.css"><!--CSS 自己设置-->
<script type="text/javascript">
function getList(){
var sel_val =$("#sel_itemGroup").val();
jQuery.ajax({
url : "getList",
data : {key: sel_val},
type : "post",
cache : false,
dataType : "json",
success:callback
});
}
function callback(json) {
if(json.length==0){
$("#div_tb table").remove();
var new_table="<table>"+
"<tr><td>序号</td>"+
"<td>检测项描述</td>"+
"<td>传感器类型</td>"+
"<td>监测项ID</td>"+
"<td>操作</td></tr>"+
"<tr><td colspan='5'><font color='red'>"+
"该站点没有传感器或者加载数据出错.....</font></td></tr></table>";
$("#div_tb").append(new_table);
}else{
$("#div_tb table").remove();
var new_table="<table>"+
"<tr><td>序号</td>"+
"<td>检测项描述</td>"+
"<td>传感器类型</td>"+
"<td>监测项ID</td>"+
"<td>操作</td></tr></table>";
$("#div_tb").append(new_table);
var tb = $("#listTable");
var str ;
for(var i=0;i<json.length;i++){
if(i%2==0){
str = "<tr><td>" + (i + 1) + "</td><td>" + json[i].itemName
+ "</td><td>" + json[i].model + "</td><td>"
+ json[i].itemKey + "</td><td>"
+ "<a>删除</a> | <a>编辑</a>" + "</td></tr>";
}else{
str = "<tr><td>" + (i + 1) + "</td><td>" + json[i].itemName
+ "</td><td>" + json[i].model + "</td><td>"
+ json[i].itemKey + "</td><td>"
+ "<a>删除</a> | <a>编辑</a>" + "</td></tr>";
}
tb.append(str);
}
}
}
$(function() {
$("#sel_itemGroup").change(getList);
});
</script>
</head>
<body>
<center>
<form action="AC86RegisterAction" method="post">
<div>
<table>
<tr>
<td >
<select>
<option value="1">站点1</option>
<option value="2">站点2</option>
</select>
</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td>序号</td>
<td>检测项描述</td>
<td>传感器类型</td>
<td>监测项ID</td>
<td>操作</td>
</tr>
</table>
</div>
<br>
<table>
<tr>
<td >
<select>
<option>item</option>
</select>
<input type="button" value="添加监测项">
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
servlet代码:
package com.sunwe.ems.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;