Ajax bootstrap美化网页并实现页面的加载删除与查看详情

Bookstrap：美化页面：

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。

它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。

Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

只需要引用一些定义好的类，也就是class名字，就可以创建出已经有非常漂亮的样式的网页，而且支持自适应，是一个很不错的框架。

调用文件：

<link href="dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="jquery-1.11.2.min.js"></script> <script src="dist/js/bootstrap.min.js"></script>

如果要引用其中一个包含jquery的多个JS文件，那么jquery文件一定要放在第一位

接下来是表格的美化

条纹表格：

<table class="table table-striped"> <thead> <tr>  <td>代号</td>  <td>名称</td>  <td>操作</td> </tr> </thead> <tbody id="td"> </tbody></table>

加上详情按钮，并改变两个按钮样式，美化；

$.ajax({   url: "jiazai.php",//  显示所有的数据不用写data   dataType: "TEXT",   success: function (data) {    var str = "";    var hang = data.split("|");    //split拆分字符串    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>" +      "<button type='button' class='btn btn-info sc' ids='"+lie[0]+"'>点击删除</button><button type='button' class='btn btn-primary xq' ids='"+lie[0]+"'>查看详情</button>" +      //ids里面存上主键值      "</td></tr>";    }    $("#td").html(str);    //找到td把html代码扔进去    addshanchu();    addxiangqing();   }  });

查看详情的点击事件：

 //给查看详情加事件 function addxiangqing() {  $(".xq").click(function(){   $('#myModal').modal('show')   //打开模态框   var ids = $(this).attr("ids");   $.ajax({    url:"xiangqing.php",    data:{ids:ids},    dataType:"TEXT",    type:"POST",     success:function(data){     //拆分      var lie = data.split("^");      var str = "<div>代号:"+lie[0]+"</div><div>名称:"+lie[1]"</div>";      //造字符串      var str = "<div>代号："+lie[0]+"</div><div>名称："+lie[1]+"</div>";      $("#nr").html(str);   }   });   //在模态框里面要显示的内容  }) }