JQuery实例（三）- 动态修改Table中的内容_jquery修改tbody内容_于贵洋的博客

相关文章推荐

仗义的炒面 · jQuery EasyUI 表单 – ...· 3 月前 ·

俊逸的仙人球 · 2018年第3期文章目次· 2 年前 ·

个性的草稿本 · sql中条件判断查询的使用 - 简书· 2 年前 ·

暴走的海龟 · less-loader 升级 6.X 后在 ...· 2 年前 ·

活泼的双杠 · EF ...· 3 年前 ·

<%@ 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">
		<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>
		<center>
			<h3>3.动态修改Table中的内容</h3>
			省份：<select id="sl_province"></select>
			<table>
					<td>ID</td><td>城市名</td>
				<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;

 其他的和第一篇《二级联动》的代码是一样的。 
                    在第一个例子中，二级联动，改变省份的时候，会动态修改另一个下拉框的内容。这里修改为，改变一个Table中的内容。<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>					JQuery Demo														3.动态修
	在上面输入框输入姓名，点击查询按钮，过滤出指定姓名数据显示
	点击删除超链接，删除对应的行
	点击修改超链接，修改超链接文本变为保存，同时ID、姓名、年龄变成输入框可编辑状态，点击保存超链接，如果输入框为空，将提示不能为空，输入框不为空时，修改后的数据将保存至表格并显示，同时保存超链接文本变成删除超链接
HTML代码：
<input type="text" />
		<input t
				//jQuery是一个非常好的JavaScript框架，用jQuery写的JavaScript代码会屏蔽不同浏览器之间的差异
//另外jQuery写Ajax代码非常方便，在其API中我们可以找到多种方法来实现Ajax功能。
//jQuery中所有的对象都被封装成了jQuery对象，这是我们写jQuery代码要注意的地方，这就意味它不再
//是一个document对象了。
var i=0;
...
				1、效果及功能说明 表格特效制作jquery表格可编辑任意修改里面的数值，是一种比较人性化的用户设计体验方式 2、实现原理 
通过点击事件来触发跳出一个输入框可以在里面输入当这个输入框失去焦点后就把，所有值放到当前的input里面。 主要的方法 
if(!$(this).is('.input'))   
//当点击了input后   
$(this).addClass('i...
				我们看到有些网站表格内容点击就可以直接修改，修改完后，点击回车键就能将修改内容显示成表格内容，最经典的例子：QQ签名，不点击时候看着是一段文字，点击后就能输入，点击编辑个性签名就能出现能够输入的文本框。所以在页面中也做一个这种效果的表格
   思想：给表格td注册一个onclick事件，当点击时候记住文本内容，并且将td表格编程一个输入的文本框，并且文本框Value的值改成以前td内容，对文
var datas = $('#datas').DataTable({
            buttons: [
                { extend: 'print', className: 'btn dark btn-outline',exportOptions: {columns: [ 0, 1, 2,3,4,5,6,7 ] }},
                { extend: 'copy', className: 'btn
需要一个页面，包括一张表格，一个button(id=”button1”)
button1点击事件是会在页面上方出现用来为表格添加显示框，背景为灰色
显示框中也有一个button(id=”button2),其点击事件是将显示框中的数据添加到页面                   的表格中
显示框中需要包括一个div,其点击事件是关闭显示框
HTML结构和CSS美化
1. 创建一个新的行元素，可以使用jQuery的`$('<tr>')`方法来创建一个新的行元素。
2. 在新的行元素中添加需要显示的数据，可以使用jQuery的`append()`方法来添加数据。
3. 将新的行元素添加到table中，可以使用jQuery的`append()`方法将新的行元素添加到table中。
示例代码如下：
// 获取table元素
var table = $('#myTable');
// 创建新的行元素
var newRow = $('<tr>');
// 在新的行元素中添加数据
newRow.append($('<td>').text('John'));
newRow.append($('<td>').text('Doe'));
newRow.append($('<td>').text('25'));
// 将新的行元素添加到table中
table.append(newRow);
以上代码会在名为`myTable`的table中添加一行数据，该行数据包含三列，分别为`John`、`Doe`和`25`。