澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:至于新闻操作等效果,

删除和查看详情操作的共同语句:就是怎么显示表?

修改和添加关于数据库的信息,可以用于任何的添加和修改这些数据库和前面的随笔数据库是一样的

注意:smarty模板前提是:前端和后端是分开的,所以肯定会有很多的后台页面,php页面和html页面是分开存储的!!

澳门新浦京娱乐场网站:至于新闻操作等效果,向数据库改革和增进效果。1.在主体中写表的开头行,想要显示的内容,并且加载数据也要显示的地方也建张表

一、显示出数据库中的信息

可以通过模板编写很多的功能,这里不是用的ajax方法写的,所以会刷新页面~~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table width="100%" border="1" cellpadding="0" cellspacing="0">
   <tr>  //开头行显示的内容
        <td>代号</td>
        <td>名称</td>
        <td>价格</td>
        <td>产地</td>
        <td>库存</td>
        <td>操作</td>
  </tr>
             
  <tbody id="bg">   //循环遍历表显示的内容展示的位置
                 
  </tbody>
         
</table>

(1)显示的效果也可以是用bootstrap的标签页显示(前面一定要引入bootstrap)

下面就开始编写各种页面的功能了!!!

如图:澳门新浦京娱乐场网站 1

<ul id="myTab" class="nav nav-tabs">
  <li class="active" style=" font-size:30px" ><a href="#home" rel="external nofollow" data-toggle="tab"> 饭面类</a>
  </li>
  <li style=" font-size:30px"><a href="#ios" rel="external nofollow" data-toggle="tab">特色小吃</a></li>
  <li class="dropdown" style=" font-size:30px">
   <a href="#" rel="external nofollow" id="myTabDrop1" class="dropdown-toggle"data-toggle="dropdown">酒水饮品 <b class="caret"></b>
   </a>
   <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" style=" font-size:25px">
    <li><a href="#jmeter" rel="external nofollow" tabindex="-1" data-toggle="tab">
     酒水</a>
    </li>
    <li><a href="#ejb" rel="external nofollow" tabindex="-1" data-toggle="tab">
     饮品</a>
    </li>
   </ul>
  </li>
</ul>

一、登录页面的编写也是分两个页面(后台和前端)

2.显示数据:用ajax方法遍历一张表,显示出表的内容

澳门新浦京娱乐场网站 2

1.首先是后台的php页面,很简单只要引入“入口文件”,然后写出显示模板的方法就可以了。

1
2
3
4
5
$.ajax({<br>  //因为不用传输数据所以就不用写data和传输类型了
    url:"xianshicl.php",  //编写处理页面
    dataType:"TEXT",  
    success: function(data){<br>      //执行处理页面结束的语句编写
      }<br>})

二、修改内容

1
2
3
4
<?php
include("../init.inc.php");  //引入入口文件
 
$smarty->display("login.html");  //要显示的登录界面

如图:澳门新浦京娱乐场网站 3

 (1)标题显示之后,就是每一个标题中的内容了,可以用ajax遍历

2.再就是前台的html页面,这个就是要写登录界面要显示的内容了。

澳门新浦京娱乐场网站:至于新闻操作等效果,向数据库改革和增进效果。3.显示数据的处理页面

<p id="mian"> 
</p>
1
2
3
4
5
6
<h1>登录页面</h1>
<form action="logincl.php" method="post">  <!--表单元素中的活动页面,登陆的处理页面,传输方式是post方式-->
    <div>用户名:<input type="text"  name="uid"/></div>   <!--用户名文本框-->
    <div>密  码:<input type="password"  name="pwd"/></div>  <!--密码文本框-->
    <input type="submit" value="登录" /> <!--登录按钮-->
</form>
1
2
3
4
5
6
7
<?php
    include("DBDA.class.php");  /调用封装好的类
    $db new DBDA();   //构造新对象
     
    $sql "select * from fruit";  //查询水果表中的所有数据
     
    echo $db->StrQuery($sql);   //调用封装类中的字符串的放方法

(2)进行数据库遍历

看下运行效果(一定要运行php页面才可以)

上面用到的封装的转换字符串的方法

$.ajax({
 url:"mianlei.php", //编写处理页面
 dataType:"TEXT",
 success: function(d){
  var hang = d.split("|"); //拆分字符“|”串:显示行
  var str = "";
  for(var i=0;i<hang.length;i  )
  {
   var lie = hang[i].split("^"); //拆分字符串“^”:显示列
   str  = "<input type='button' value='" lie[2] "' class='aa1' code='" lie[1] "' data-toggle='modal' data-target='#myModal'/> ";
  }
   $("#mian").html(str); //把遍历的内容写在上面的     
  }
}) 

澳门新浦京娱乐场网站 4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class DBDA
{
    public $host="localhost";  //数据库连接
    public $uid="root";   //数据库用户
    public $password="123";   //用户密码
    public $dbname="test2";  //数据库名
 
     
        //返回字符串的方法
    public function StrQuery($sql,$type=1)
    {
      $db new MySQLi($this->host,$this->uid,$this->password,$this->dbname);
      $r $db->query($sql);
             
      if($type==1)
      {
        $attr $r->fetch_all();
        $str "";
        foreach($attr as $v)
        {
          $str .= implode("^",$v)."|";  //拼接数组为字符串
        }
                 
      return substr($str,0,strlen($str)-1);  //截取字符串:最后的拼接符不显示
     
      }
      else
      {
        return $r;
      }
    }
}       

(3)处理页面的编写如下

3.页面出来了,再就是表单的提交处理页面,这个是相对于前面的php页面的

4.步骤2中的执行处理页面结束的语句编写:

<?php
include("DBDA.php"); //调用封装好的数据库类
$db = new DBDA(); 
$sql = "select * from caidan where fcode =('1101')"; //查询符合父级号的所有信息
echo $db->StrQuery($sql); //输出结果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
include("../DBDA.class.php");  //调用出来封装好的类
$db new DBDA();  //造新对象
 
$uid $_POST["uid"];  //接收传过来的数据
$pwd $_POST["pwd"];
 
$sql "select password from user where uid='{$uid}' ";  //编写语句查找用户名是传过来的用户名的密码
$attr $db->StrQuery($sql);  //执行语句
 
if($attr==$pwd && !empty($pwd))  //判断一下
{
    header("location:main.php");  //如果登陆成功就可以,就会跳到主页面
}
1
2
3
4
5
6
7
8
9
var hang = data.split("|");  //拆分字符“|”串:显示行
                     
var str = "";
for(var i=0;i<hang.length;i )
{
   var lie = hang[i].split("^");  //拆分字符串“^”:显示列
  str = "<tr><td>" lie[0] "</td><td>" lie[1] "</td><td>" lie[2] "</td><td>" lie[3] "</td><td>" lie[4] "</td><td>操作</td></tr>";
}              
 $("#bg").html(str); //将处理的数据放到上面显示的div中   

(4)然后进行修改的内容可以用模态框

4.登录成功后的显示页面,我这里是显示出来的数据库中的内容

  

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title" id="myModalLabel">修改</h4>
      </div>
      <div class="modal-body" id="content">
     <!--这里是显示的修改的内容-->
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      <button type="button" class="btn btn-primary" id="tijiao">提交</button>
      </div>
   </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>  

  4.1后台页面的编写,其实和上一篇随笔是一样的,调出数据库并且注册变量和模板显示的方法

数据的显示效果,删除和查看时将操作一栏修改并且加入按钮的触发事件就可以了:需要修改的代码就是“操作”这一列:

(5)修改的时候,里面要默认显示原来的名字和价格,所以要将前面遍历的代号传过来

1
2
3
4
5
6
7
8
9
10
11
<?php
include("../init.inc.php");  //调出入口文件
 
include("../DBDA.class.php");  //调出数据库封装好的类
$db new DBDA();  //造新对象
 
$sql "select * from nation";  //查找数据库中的数据信息
$attr $db->Query($sql);  //执行语句
 
$smarty->assign("shuju",$attr);  //注册变量信息
$smarty->display("main.html");   //模板显示
1
str = "<tr><td>" lie[0] "</td><td>" lie[1] "</td><td>" lie[2] "</td><td>" lie[3] "</td><td>" lie[4] "</td><td>操作</td></tr>";  
$(".aa1").click(function(){
 var code = $(this).attr("code"); //找到code值
 $.ajax({
  url:"xiugaichuli.php", //编写处理页面
  data:{c:code}, //将code值传过去
  type:"POST",
  dataType:"TEXT",
  success: function(d){
   var hang = d.split("|"); //拆分字符“|”串:显示行
   var str = "";
   for(var i=0;i<hang.length;i  )
   {
    var lie = hang[i].split("^"); //拆分字符串“^”:显示列
    str  = "<div>名称:<input type='text' value='" lie[2] "' code='" lie[1] "' class='name' /></div><br /><div>价格:<input type='text' value='" lie[0] "' code='" lie[1] "' class='price' /></div>";
   }
   $("#content").html(str); //写入模态框中的content的位置
     }
 })
})

  4.2前台html页面的编写,利用表的样式显示出想要显示的信息数据

澳门新浦京娱乐场网站 5

澳门新浦京娱乐场网站 6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h1>主页面</h1>
<table width="50%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td>代号</td>  <!--表中的头信息-->
        <td>名称</td>
        <td>操作</td>
    </tr>
             
    <{foreach $shuju as $v}>  <!--遍历php页面的数据显示-->
         <tr>
              <td><{$v[0]}></td>  <!--代号所指的数据库信息-->
              <td><{$v[1]}></td>
              <td>操作</td>
         </tr>
    <{/foreach}>
             
</table>   

 

(6)单击提交按钮后写入数据库,并且这里也修改了,单击提交按钮进行修改

运行结果可以看下

一、数据的删除处理

$("#tijiao").click(function(){
 var code = $(".name").attr("code"); //找到名称中的代号
 var code = $(".price").attr("code"); //找到价格的代号
 var name = $(".name").val(); //找到名称的值
 var price = $(".price").val(); //找到价格的值
 $.ajax({
  url:"tjsk.php", //处理页面的编写
  data:{n:name,p:price,c:code}, //将值传到处理页面
  type:"POST",
  dataType:"TEXT",
  success: function(data){ ///处理页面成功后输出
   if(data.trim()=="ok")
   {
     alert("修改成功!");
   }
  }
 })
})

澳门新浦京娱乐场网站 7

1.在循环数据库的时候,在最后的一个单元格中添加删除按钮,然后就是起个名字便于对其添加数据,写个主键值

澳门新浦京娱乐场网站 8 澳门新浦京娱乐场网站 9 澳门新浦京娱乐场网站 10         

 

1
<td><input type='button' value='删除' class='shanchu' code='" lie[0] "'/></td>

三、添加内容

二、信息的相关操作(删除功能)

澳门新浦京娱乐场网站 11

(1)同上面的写一个弹框,里面有文本框

1.那么就要main的html页面中遍历信息中的“操作”就要修改成“删除”了,这里的传数据的方式就是“get”方式了,如下:

2.对删除按钮添加事件

<div id="tianjia" data-toggle='modal' data-target='#myModall'>添加菜品</div>
<div class="modal-content">
  <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h4 class="modal-title" id="myModalLabel">添加菜品</h4>
  </div>
  <div class="modal-body" id="content">
   <div id="name">名称:<input type="text" id="ming"/></div>
   <br />
  <div id="price">价格:<input type="text" id="jia"/></div>
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-primary" id="tijiao1">提交</button>
  </div>
</div>
1
2
3
4
5
6
7
<{foreach $shuju as $v}>
  <tr>
    <td><{$v[0]}></td>
    <td><{$v[1]}></td>
    <td><a href="shanchu.php?code=<{$v[0]}>">删除</a></td>
  </tr>
<{/foreach}>
1
2
3
$(".shanchu").click(function(){  //找到删除按钮,对其添加单击事件,单击之后执行事件
    var code = $(this).attr("code");   //找到属性值
})

澳门新浦京娱乐场网站 12澳门新浦京娱乐场网站 13

那么运行出来的“操作”的那一栏就会变成了“删除”了

3.调用ajax方法,ajax里的步骤

(2)填写信息后,单击提交按钮写入数据库

澳门新浦京娱乐场网站 14

1
2
3
4
5
6
7
8
$.ajax({
    url:"shanchucl.php",   //处理页面的名称
    data:{c:code},  //为值取个名字
    type:"POST",   //传值方式
    dataType:"TEXT",  //数据类型
    success: function(d){   <br>      //处理页面执行成功后在执行下面的语句
        }  
})
$("#tijiao1").click(function(){
 var n = $("#ming").val(); //找到名称文本框的值
 j = $("#jia").val(); //找到价格文本框的值
 $.ajax({
  url:"tianjia.php", //编写处理页面
  data:{n:n,j:j}, //将值传过去
  type:"POST",
  dataType:"TEXT",
  success: function(d){
   if(d.trim()=="ok")
   {
     alert ("添加成功!");
   }
     window.location.href="xiugaicanpin.php" rel="external nofollow" ;
  } 
    }) 
})  

2.前台的页面解决之后,那就是删除的处理页面了,记得要和php页面放在一起

4.接下来写删除的处理页面,这个页面写过很多次了

(3)处理页面的编写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
include("../DBDA.class.php");  //调用封装好的数据库类
$db new DBDA();  //造新对象
 
$code $_GET["code"];  //用get方式接收传过来的数据
$sql "delete from nation where code='$code' ";  //删除代号等于传过来得代号的数据
$attr $db->Query($sql,0);  //执行语句
 
if($attr)  //判断一下,成功刷新,不成功提示
{
    header("location:main.php");
}
else
{
    echo "删除失败!";  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
include("DBDA.class.php");  //调用封装
$db new DBDA();   //造新对象
 
$code $_POST["c"];  //将值传过来
$sql "delete from fruit where ids='{$code}'";   //写sql语句
if($db->Query($sql,0))   //执行语句并且判断
{
    echo "OK"
}
else
{
    echo "NO"
}
<?php
 include("DBDA.php");
 $db = new DBDA();
 $n = $_POST["n"]; //将传来的值接收
 $j = $_POST["j"];
 $sql = " select max(code) from caidan where fcode='1101' "; //查找这个父级代号的最大代号
 $attr = $db->Query($sql);
 foreach($attr as $v)
 {
  $c = $v[0] 1; //使最大值加1
  $sqll = " insert into caidan values('{$j}','{$c}','{$n}','1101','','','')"; //写入数据库
  $db->Query($sqll,0);
  echo "ok";
 }
?>

可以看下运行结果

5.返回调用的ajax中开始写成功后的代码

(4)添加结束后看下结果

澳门新浦京娱乐场网站 15

1
2
3
4
5
6
7
8
if(d.trim()=="OK")
  {
    shuju();  //因为整体的从显示到删除的ajax都要在这重新写一遍,那么可以把整个写成个方法,然后这样调用
  }
  else
  {
    alert("删除失败!");
  }

澳门新浦京娱乐场网站 16 澳门新浦京娱乐场网站 17

单击“删除”按钮后,就会将那条信息删除

6.这样就可以完成对数据的删除了

到此,结束了,简单的添加和修改的功能,后面还要增加删除功能~~

澳门新浦京娱乐场网站 18

(原数据图)

以上所述是小编给大家介绍的Ajax 向数据库修改和添加功能(较简答),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

 

澳门新浦京娱乐场网站 19

您可能感兴趣的文章:

  • Ajax遍历jSon后对每一条数据进行相应的修改和删除(代码分享)
  • Ajax修改数据即时显示篇实现代码
  • 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
  • AJAX 自学练习 无刷新提交并修改数据库数据并显示
  • Ajax动态为下拉列表添加数据的实现方法
  • ajax添加数据后如何在网页显示
  • Ajax添加数据与删除篇实现代码
  • Ajax添加数据即时显示信息篇
  • JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动

三、信息的相关操作(修改功能)

(随便删除一条数据图)

1.同样的main的html页面中遍历信息中的添加一个“修改”按钮,这里的传数据的方式同时也是“get”方式了,如下:

澳门新浦京娱乐场网站 20

1
2
3
4
5
6
7
8
9
<{foreach $shuju as $v}>
  <tr>
    <td><{$v[0]}></td>
       <td><{$v[1]}></td>
       <td><a href="shanchu.php?code=<{$v[0]}>">删除</a>
           <a href="xiugai.php?code=<{$v[0]}>">修改</a>
       </td>
  </tr>
<{/foreach}>

二、查看数据

前端的页面就成了如下页面

点击查看数据,会弹出数据详情的窗口

澳门新浦京娱乐场网站 21

1.既然是详情,那么修改上面所讲的那一句语句就可以:在操作的那添加个按钮,传一个主键值,删除时肯定是用代号来进行查看,因为代号没有重复的

2.同样也是开始编写“修改”的页面了,这里要显示修改的原来的信息,这样就是要用到正常的显示页面,那么就是两个页面了(php页面和html页面)

起一个名字,然后传一个主键值

  2.1修改的php页面的编写

1
str = "<tr><td>" lie[0] "</td><td>" lie[1] "</td><td>" lie[2] "</td><td>" lie[3] "</td><td>" lie[4] "</td><td><input type='button' value='详情' class='xiangqing' code='" lie[0] "'/></td></tr>"
1
2
3
4
5
6
7
8
9
10
11
<?php
include("../init.inc.php");  //调出入口文件
include("../DBDA.class.php");  //调出数据库封装好的类
$db new DBDA();  //造新对象
 
$code $_GET["code"];
$sql "select * from nation where code='$code' ";  //查询代号等于传过来代号的信息
$attr $db->Query($sql);
 
$smarty->assign("nation",$attr[0]);  //注册变量信息,顺便将值传过去
$smarty->display("xiugai.html"); //显示模板

澳门新浦京娱乐场网站 22

  2.2修改的html页面的编写

2.想要显示的可以少一点,可以只显示名称和操作,这两列

1
2
3
4
5
6
<h1>修改页面</h1>
<form action="xiugaicl.php" method="post">  <!--修改页面的处理页面-->
  <input type="hidden" name="code" value="<{$nation[0]}>"/><!--默认值显示的时候就是要将传过来的值显示value,但是这里的代号是不能改的,所以要隐藏-->
  <div>名称:<input type="text" name="name" value="<{$nation[1]}>"/></div>  <!--同上面的结束-->
  <input type="submit" value="修改" />
</form>
1
2
3
4
5
6
7
8
<table width="50%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>名称</td>
    <td>操作</td>
  </tr>
  <tbody id="bg">           
  </tbody>  
</table>

单击“修改”按钮后,看下运行的页面

对于ajax的遍历时将div也写成两个

澳门新浦京娱乐场网站 23

1
2
3
4
5
for(var i=0;i<hang.length;i )
  {
    var lie = hang[i].split("^");  //拆分字符串“^”:显示列
    str = "<tr><td>" lie[1] "</td><td><input type='button' value='详情' class='xiangqing' code='" lie[0] "'/></td></tr>"
  }

为了不想修改返回到主页面,可以在修改后面添加一个“返回”按钮

效果如图:

1
2
<input type="submit" value="修改" />
<a href="main.php"><input type="button" value="返回" /></a>

澳门新浦京娱乐场网站 24

澳门新浦京娱乐场网站 25

注意:这里的对添加窗口有两种方法,一个是用自己写好的封装类,二是可以用bootstrap的弹窗

3.单击修改后,进行信息的修改,数据库也要进行修改(编写“修改”的处理页面)

一是用自己写好的封装类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
include("../DBDA.class.php");  //调出数据库封装好的类
$db new DBDA();  //造新对象
 
$code $_POST["code"]; //将代号传过来接收
$name $_POST["name"];  //同上
 
$sql "update nation set name='{$name}' where code='{$code}'";  //修改名称当代号等于传过来的代号时
$attr $db->Query($sql,0);  //执行语句
 
if($attr)  //判断一下语句
{
    header("location:main.php");  //修改成功后返回主页面
}
else
{
    echo "修改失败!";  
}

3.1 对“详情”进行编写的时候可以使用封装好的弹窗js,引入弹窗js还有弹窗的样式表,应为封装的js语句很多,js显示基本功能如下:

运行看下整体修改过程

1
2
3
4
5
6
7
width : config.width || 300, //宽度
height : config.height || 200, //高度
buttons : config.buttons || ''//默认无按钮
title : config.title || '标题'//标题
content : config.content || '内容'//内容
isMask : config.isMask == false?false:config.isMask || true, //是否遮罩
isDrag : config.isDrag == false?false:config.isDrag || true, //是否移动

(1)登陆后的主页面

4.1 根据上面的主键值,对详情按钮添加事件

澳门新浦京娱乐场网站 26

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(".xiangqing").click(function(){    //对详情添加单击事件
    var code = $(this).attr("code"); 
    $.ajax({
        url:"chakancl.php",    //详情的处理页面
        data:{c:code},  //传入处理页面的值
        type:"POST",  //传值方式
        dataType:"TEXT",
        success: function(d){
            var lie = d.split("^");<br>              //想要在窗口中显示的内容
            var c = "<div>代号:" lie[0] "</div><div>姓名:" lie[1] "</div><div>性别:" lie[2] "</div><div>民族:" lie[3] "</div><div>生日:" lie[4] "</div>";<br>              //调用封装好的弹窗方法
            var win = new Window({
                width : 300, //宽度
                height : 200, //高度
                buttons :  ''//默认无按钮
                title : '详情介绍'//写入显示的标题
                content : c, //内容
                isMask : true, //有遮罩
                isDrag : true, //能够移动
            })
        }  
    })
})

(2)单击修改按钮

5.1 编写详情的处理页面:就是根据传过去的code找到代号那一列,然后执行就可以,当然是字符串形式的数据,就要进行转换

澳门新浦京娱乐场网站 27

这是封装类中的字符函数里的:

(3)修改后单击修改按钮,不修改单击返回按钮

1
2
3
4
5
6
7
//执行语句后是个二维数组,下面进行字符串装换<br>$str = ""; 
foreach($attr as $v)
{
    $str .= implode("^",$v)."|";  //拼接数组为字符串implode()方法
}
                 
return substr($str,0,strlen($str)-1);  //截取字符串:最后的拼接符不显示substr()方法

澳门新浦京娱乐场网站 28

处理页面的代码编写

(4)数据库也跟着修改了

1
2
3
4
5
6
7
8
<?php
include("DBDA.class.php");
$db new DBDA();
 
$code $_POST["c"];
$sql "select * from fruit where ids='{$code}'";
 
echo $db->StrQuery($sql);  

澳门新浦京娱乐场网站 29

最后就是走起来看效果,单击详情按钮后,就会显示窗口了

 

单击桔子后面的详情按钮,就弹出窗口:

到此,基本的功能就结束了,这是用的php写的,也可以让它不刷新页面进行删除和修改功能,同样的道理。

澳门新浦京娱乐场网站 30

 

二是用bootstrap的弹窗

3.1首先也要引入bootstrap的js和css包:

1
2
<script src="dist/js/bootstrap.min.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

3.2在主体部分写入弹窗:直接从bootstrap的官网进行复制粘贴就可以

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">详细信息</h4>  //标题的地方
            </div>
            <div class="modal-body" id="content"></div>  // 显示是内容的地方
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>   //按钮
                 
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

3.3在进行显示数据时记得在遍历结束时,在详情按钮中加入属性

1
<td><input type='button' value='详情' class='xiangqing' code='" lie[0] "'  data-toggle='modal' data-target='#myModal' /></td>

3.4在详情的单击事件遍历结束后要将内容写入上面的“显示的内容”的地方

这个地方和第一种方法差不多,不同的地方就是第一种方法引入了封装方法,第二种方法是将显示结果交给显示内容的div中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(".xiangqing").click(function(){    //对详情添加单击事件
    var code = $(this).attr("code"); 
    $.ajax({
        url:"chakancl.php",    //详情的处理页面(和第一种方法的处理页面一样)
        data:{c:code},  //传入处理页面的值
        type:"POST",  //传值方式
        dataType:"TEXT",
        success: function(d){
            var lie = d.split("^");
              //想要在窗口中显示的内容
            var c = "<div>代号:" lie[0] "</div><div>姓名:" lie[1] "</div><div>性别:" lie[2] "</div><div>民族:" lie[3] "</div><div>生日:" lie[4] "</div>";
              $("#content").html(c);
               }
    }) 
})

单击桃子后的详情按钮,弹窗效果如下:  

澳门新浦京娱乐场网站 31

删除和查看详情就是以上。

本文由澳门新浦京娱乐场网站发布于www.146.net,转载请注明出处:澳门新浦京娱乐场网站:至于新闻操作等效果,