例题.点击按钮显示内容+弹窗效果+ajax
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.11.2.min.js"></script>/*引入jquery*/
<script src="tanchuang.js"></script>/*引入弹窗*/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="tanchuang.css" rel="stylesheet" type="text/css" />/*引入弹窗css*/
</head> <body>
<input type="button" value="显示" id="btn" />
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="sj">
<td>代号</td>
<td>名称</td>
<td>操作</td>
</tr>
<tbody id="tb"></tbody>
</table>
<script type="text/javascript">
$("#btn").click(function(){
$.ajax({ url:"nationchuli.php",
dataType:"TEXT",
success: function(data){
var hang=data.split("|");
str="";
for(var i=0;i<hang.length;i++){
var lie=hang[i].split("^");
str=str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><span class='sc' bs='"+lie[0]+"'>删除</span><span class='xq' bs='"+lie[0]+"'>查看详情</span></td></tr>"; }
$("#tb").html(str);
$(".sc").click(function(){
alert("aa");
});
$(".xq").click(function(){
var code=$(this).attr("bs");
$.ajax({
url:"xqchuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
success:function(data){ var lie1=data.split("^");
var str="<div>代号:"+lie1[0]+"</div><div>名称:"+lie1[1]+"</div>";
var btn="<input type='button' value='确定' class='qd' />";
var tc=new Window({
title:"详细信息",
content:str,
buttons:btn,
});
$(".qd").click(function(){
$(".zhuti").remove();
$("#zz").remove();
});
}
});
});
} }); });
</script>
</body>
</html>
2.处理页面nationchuli.php
<?php
include("./lei/AAA.class.php");
$db=new AAA();
$sql="select * from nation";
echo $db->StrQuery($sql); ?>
3.处理页面xqchuli.php
<?php
include("./lei/AAA.class.php");
$db=new AAA();
$code=$_POST["code"];
$sql="select * from nation where code='{$code}'";
echo $db->StrQuery($sql);
?>
例题.点击按钮显示内容+弹窗效果+ajax的更多相关文章
- javascript学习代码--点击按钮显示内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- React 点击按钮显示div与隐藏div,并给div传children
最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- JavaScript点击按钮显示 确认对话框
//JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- 安卓TextView限定行数最大值,点击按钮显示所有内容
问题展示 如上图所示,在普通的TextView中,要求: 最多显示3行 超过三行显示展开按钮 且点击展开按钮显示完整内容 这个需求看似简单,但解决起来会遇到两个较为棘手的问题:1,如何判断是否填满了前 ...
- js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div
这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...
- jquery点击按钮复制内容
做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...
- js 实现页面点击按钮复制内容
前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...
- JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果
一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...
随机推荐
- 不能继承OrmLiteBaseActivity时,这样获取getHelper
private DatabaseHelper databaseHelper = null; public DatabaseHelper getHelper() { if (databaseHelper ...
- Effective C++ 学习笔记[2]
2. 第一节 习惯C++ 2.1 C++是一个语言联邦,包括以下四个部分: C:包括区块.语句.预处理器.内置数据类型.数组.指针等,但是C语言本身存在局限:没有模板template.没有异常exce ...
- (int &)a 和(int)a
[cpp] view plain copy float a = 1.0f; cout < < (int)a < < endl; cout < < ...
- 【转载】C语言中的undefined behavior/unspecified behavior - 序
嗷嗷的话: 这都是一些细枝末节的东西,我想不做编译器的话,大部分都很难碰到.研究学习这些只是出于对C语言一种偏执狂. 写出来是为了找到和我一样的偏执狂. 在随后的的文章中,首先我写一写191种unde ...
- c#日记
//返回一个指定类型的对象,该对象的值等于指定对象的值 object obj1 = Convert.ChangeType(dw[findRowIndex][cna ...
- Div 添加阴影
<style type="text/css">.mydiv{ width:250px;height:auto;border:#909090 1px solid;ba ...
- topcoder SRM 594 DIV2 AstronomicalRecordsEasy
此题主要考查的是求最长公共子序列 设A[i]:A[j] = a:b = ac:bc B[ii]:B[jj] = c:d = ac:ad , 如果A[i]:A[j] = B[ii]:B[jj ...
- 9.0 alpha 版安装出现 could not execute command lessc 的问题
解决方案: apt-get install node-less
- Using pg_dump restore dump file on Odoo
pg_restore -C -d postgres db.dump
- Cinder相关命令收集
1. 重置状态 source admin-openrc.sh cinder reset-state 51108241-7ffe-44a8-acfa-4cddac8d4793