JQuery实例（三）- 动态修改Table中的内容
在第一个例子中，二级联动，改变省份的时候，会动态修改另一个下拉框的内容。
这里修改为，改变一个Table中的内容。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Demo</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/province_city.js"></script>
</head>
<body>
<center>
<h3>3.动态修改Table中的内容</h3>
省份：<select id="sl_province"></select>
<table>
<tr>
<td>ID</td><td>城市名</td>
</tr>
<tbody id="tb_city">
</tbody>
</table>
</center>
</body>
</html>
JS
$(document).ready(function() {
//加载下拉框
$.getJSON("common!queryProvince" , function(data) {
//清空下拉框
$("#sl_province").text("");
$.each(data,function(i,ele){
//在下拉框中显示
if(i == 0) {
$("#sl_province").append("<option value='0' selected>请选择省份</option><option value='"+ele.id+"'>"+ele.name+"</option>");
} else {
$("#sl_province").append("<option value='"+ele.id+"'>"+ele.name+"</option>");
}
});
} );
//监听改变事件
$("#sl_province").change(function() {
//清空table中的数据
$("#tb_city").text("");
var id = $("#sl_province").val();//获取选择的省份的ID
if(id > 0) {
//获取数据，加载
$.getJSON("common!queryCity?id=" + id , function(data) {
$.each(data,function(i,ele){
//在Table中显示
$("#tb_city").append("<tr><td>" + ele.id + "</td><td>" + ele.name + "</td></tr>");
});
} );
}
});
});
Action
package org.ygy.jquery.action;
import java.util.ArrayList;
import java.util.List;
import org.ygy.jquery.vo.ResponseMessageVO;
import org.ygy.jquery.vo.SimpleVO;
import com.opensymphony.xwork2.ActionSupport;
public class JQueryAction extends ActionSupport {
private static final long serialVersionUID = 6797154008479295854L;
private static final String MSG = "msg";
private List<SimpleVO> voList;
private Integer id;
private ResponseMessageVO message;
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public ResponseMessageVO getMessage() {
return message;
}
public void setMessage(ResponseMessageVO message) {
this.message = message;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public List<SimpleVO> getVoList() {
return voList;
}
public void setVoList(List<SimpleVO> voList) {
this.voList = voList;
}
/**
* 获取省份信息
* @return
*/
public String queryProvince() {
voList = new ArrayList<SimpleVO>();
voList.add(new SimpleVO(1 , "山东省"));
voList.add(new SimpleVO(2 , "辽宁省"));
voList.add(new SimpleVO(3 , "江苏省"));
return SUCCESS;
}
/**
* 获取城市信息
* @return
*/
public String queryCity() {
voList = new ArrayList<SimpleVO>();
switch(id) {
case 1:
voList.add(new SimpleVO(10 , "青岛市"));
voList.add(new SimpleVO(11 , "济南市"));
voList.add(new SimpleVO(12 , "烟台市"));
break;
case 2:
voList.add(new SimpleVO(20 , "丹东市"));
voList.add(new SimpleVO(21 , "大连市"));
voList.add(new SimpleVO(22 , "沈阳市"));
voList.add(new SimpleVO(23 , "鞍山市"));
break;
case 3:
voList.add(new SimpleVO(30 , "无锡市"));
voList.add(new SimpleVO(31 , "常州市"));
break;
}
return SUCCESS;
}
/**
* 检测用户名是否存在
* @return
*/
public String checkName() {
message = new ResponseMessageVO();
if(name.equals("ygy")) {
message.setSuccess(false);
message.setMessage("该用户名已被注册!");
} else {
message.setSuccess(true);
message.setMessage("该用户名可以使用!");
}
return MSG;
}
}
其他的和第一篇《二级联动》的代码是一样的。
