使用Ajax和Bootstrap美化网页及实现功能操作

d><td>" +lie[1]+ "</td><td>" +"<buttonclass='btnbtn-primarybtn-smdetail'>详情</button>" +"<buttonclass='btnbtn-dangerbtn-smdelete'>删除</button>" +"</td></tr>"; } $("#td").html(str); } }); 添加事件监听，实现查看详情和删除功能： $(".detail").on("click",function(){ vartr=$(this).closest("tr"); //找到当前点击的详情按钮所在的行 varcode=tr.find("td:eq(0)").text(); //获取代号 //通过代号查询详情并弹窗展示 $.ajax({ url:"xiangqing.php?code="+code, dataType:"TEXT", success:function(data){ alert("详情："+data); } }); }); $(".delete").on("click",function(){ vartr=$(this).closest("tr"); //找到当前点击的删除按钮所在的行 varcode=tr.find("td:eq(0)").text(); //获取代号 //提示用户确认删除 if(confirm("确定要删除吗？")){ //模拟删除操作，实际应用中应替换为真实删除请求 tr.remove(); } }); 在上述代码中，我们首先引入了Bootstrap的CSS和JavaScript文件，确保能够使用其提供的样式和组件。接着，我们创建了一个条纹表格，这是Bootstrap中常见的表格样式，通过`table-striped`类实现。每个表格行包含代号、名称和操作两列，操作列内有两个按钮，分别用于查看详情和删除。 为了实现Ajax加载数据，我们使用jQuery的`$.ajax`方法从服务器获取数据，并将返回的数据插入到表格中。这里，数据是以管道符号（|）分隔的多行字符串，每行再以破折号（-）分隔为两列。使用`split`函数处理这些数据，构建出表格的HTML结构。 然后，我们给“详情”和“删除”按钮添加点击事件监听。当点击“详情”按钮时，获取当前行的代号，通过Ajax请求获取详情信息，并在弹窗中显示。而点击“删除”按钮时，会先询问用户是否确认删除，得到确认后移除对应的表格行，模拟了删除操作。 这个示例展示了如何利用Ajax和Bootstrap来增强网页的交互性和美观性。Ajax允许页面在不刷新的情况下与服务器交换数据，Bootstrap则提供了丰富的预设样式和组件，使得开发者可以快速构建响应式且具有良好用户体验的网页。同时，通过事件监听和Ajax请求，实现了动态加载和更新数据的功能，使得页面更加动态和灵活。