JQuery实例（三）- 动态修改Table中的内容

最新推荐文章于 2023-04-07 18:32:37 发布

橘猫吃不胖胖

最新推荐文章于 2023-04-07 18:32:37 发布

阅读量7.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JQuery 实例 table

本文链接：https://blog.youkuaiyun.com/yuguiyang1990/article/details/8942590

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

该博客展示了如何使用JQuery实现动态修改表格中的数据，通过实例解释了当选择项变化时，如何实时更新Table的相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在第一个例子中，二级联动，改变省份的时候，会动态修改另一个下拉框的内容。

这里修改为，改变一个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>

$(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;
	}
}

其他的和第一篇《二级联动》的代码是一样的。