Jquery渲染表格数据

最新推荐文章于 2024-04-04 00:24:11 发布
最新推荐文章于 2024-04-04 00:24:11 发布
阅读量9.1k 收藏 14
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/samee5/article/details/85100351
版权

接到一个需求，要求根据开始和结束的选择来查询相应的结果。

最后的成品如下：


 

Start 和End选择不同的项，再点查询 渲染出下方的表格

<script>

         $(function () {

        $('#search').click(function () { //查询按钮点击事件

            $.ajax({

                url:"{:url('index/index/searchh')}",

                type:'post',

                data:$('form').serialize(), //form将上方的radio部分全包裹然后序列化

                dataType:'json',

                success:function (data) {

                     var html="";    

              //接口返回的都是单条数据

                    html+="<tr><td>"+data[0].inf+"</td><td>"+data[0].supply+"</td><td>"+data[0].tank+"</td><td>"+data[0].depart+"</td><td>"+data[0].dragon+"</td><td>"+data[0].armory+"</td></tr>";

               $('#tbody').html(html);

                }

            });

            return false; //防止触发后续form事件

        });

    });

    </script>

 

-----------------------------------表格部分代码------------------------------ 

<table class="table table-bordered">

                           <tr class="success">

                           <th>infirm</th>

                           <th>supply</th>

                           <th>tank</th>

                           <th>depart</th>

                           <th>dragon</th>

                           <th>armory</th>

                           </tr>

                           <tbody id="tbody">



                            </tbody>

                           </table>


url:"{:url('index/index/searchh')}", 部分 基于thinkphp

  

public function searchh()

    {

       $data = [

                'start' => input('post.start'),

                'end' => input('post.end')

            ];

       $res =Db::table('main')->where($data)->select();  

        return $res;

}

 

 

完整代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
   <title> 密码查询 </title>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8">
                <form >
                    <table class="table">
                        <tr>
                        <td>Start</td>
                            <td>
                                <div class="radio">
                                    <label class="radio-inline"><input type="radio" name="start" id="optionsRadios1" value="1" checked>infirm</label>
                                    <label class="radio-inline"><input type="radio" name="start" id="optionsRadios1" value="2" >supply</label>
                                    <label class="radio-inline"><input type="radio" name="start" id="optionsRadios1" value="3" >tank</label>
                                    <label class="radio-inline"><input type="radio" name="start" id="optionsRadios1" value="4" >depart</label>
                                    <label class="radio-inline"><input type="radio" name="start" id="optionsRadios1" value="5" >dragon</label>
                                    <label class="radio-inline"><input type="radio" name="start" id="optionsRadios1" value="6" >armory</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                        <td>End</td>
                            <td>
                                <div class="radio">
                                    <label class="radio-inline"><input type="radio" name="end" id="optionsRadios1" value="1" >infirm</label>
                                    <label class="radio-inline"><input type="radio" name="end" id="optionsRadios1" value="2" >supply</label>
                                    <label class="radio-inline"><input type="radio" name="end" id="optionsRadios1" value="3" >tank</label>
                                    <label class="radio-inline"><input type="radio" name="end" id="optionsRadios1" value="4" >depart</label>
                                    <label class="radio-inline"><input type="radio" name="end" id="optionsRadios1" value="5" >dragon</label>
                                    <label class="radio-inline"><input type="radio" name="end" id="optionsRadios1" value="6" checked>armory</label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button type="sumbit" class="btn btn-info" id="search">查询</button>
                            </td>
                        </tr>
  <tr>
                           <table class="table table-bordered">
                           <tr class="success">
                           <th>infirm</th>
                           <th>supply</th>
                           <th>tank</th>
                           <th>depart</th>
                           <th>dragon</th>
                           <th>armory</th>
                           </tr>
                           <tbody id="tbody">
                            </tbody>
                           </table>
                        </tr>

                    </table>
                    </form>
                </div>
            <div class="col-md-2"></div>
        </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
         $(function () {
        $('#search').click(function () {
            $.ajax({
                url:"{:url('index/index/searchh')}",
                type:'post',
                data:$('form').serialize(),
                dataType:'json',
                success:function (data) {
                var html="";
                html+="<tr><td>"+data[0].inf+"</td><td>"+data[0].supply+"</td><td>"+data[0].tank+"</td><td>"+data[0].depart+"</td><td>"+data[0].dragon+"</td><td>"+data[0].armory+"</td></tr>";
                $('#tbody').html(html);
                }
            });
            return false;
        });
    });
    </script>
    </div>
</body>
</html>

 

下过雨的夏天傍晚
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery数组渲染表格
正一品程序员的博客
09-23 2667
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>17、
jquery的表格组件-dataTables的基本使用
Artisan_w
10-13 4009
jQuery DataTables 是一个功能丰富且灵活的 jQuery 插件，用于创建交互式的数据表格，提供搜索、排序、分页、筛选等功能，以便更好地展示和管理数据。通过使用 jQuery DataTables，你可以轻松地将数据集转换为易于浏览和交互的表格，而无需手动编写大量的 HTML 和 JavaScript 代码。它具有广泛的配置选项和扩展，使你能够适应不同的数据源和显示需求。
jquery利用ajax请求数据渲染二级菜单，【跳槽必备】
最新发布
2401_84092727的博客
04-04 958
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取资料领取方式：点击这里前往免费获取。
【jQuery】ajax异步请求实现动态加载表格
debug
11-23 740
使用ajax异步请求，把数据动态渲染成一个表格
Jquery 渲染表单
liangshui772的专栏
01-01 2444
var data = { "txt": "leungs", "ckb": "2", "rdo": "2", "sel": "3", "area": "sentens","title":"render form demo..." }; $(function () { $("[col]").each(function () { v
jquery 表格 数据渲染 加速
ERIZHU的博客
11-24 2009
注释掉文件jquery.easyui.min.1.3.2.js中部分代码，允许浏览器自主选择表格渲染方式 /*var tr1=$(trs1[i]); var tr2=$(trs2[i]); tr1.css("height",""); tr2.css("height",""); var _47d=Math.max(tr1.height(),tr2.height()); tr1.css("
jQuery JSON动态获取表格数据代码
06-24
在本案例中，“jQuery JSON动态获取表格数据代码”涉及到的技术是利用jQuery从服务器获取JSON格式的数据，并将其动态地渲染到HTML表格中，同时提供了对表格的交互功能，如折叠和展开表格行。 首先，我们来详细理解...
jQuery动态表格数据分页检索排序代码.zip
09-22
《jQuery动态表格数据分页检索排序代码》 在网页开发中，动态表格数据的分页、检索和排序功能是常见的需求，特别是在数据量较大的情况下，为了提高用户体验，这些功能尤为重要。jQuery作为一个轻量级的JavaScript库...
jQuery制作网页表格数据优化插件.rar
10-01
《jQuery制作网页表格数据优化插件详解》 在网页开发中，数据展示是不可或缺的一环，尤其是对于数据量较大的表格，如何高效、美观地呈现这些信息成为了一个挑战。jQuery作为一个强大的JavaScript库，提供了丰富的...
jquery表格插件带分页动态数据表格代码
04-25
本项目涉及的是使用jQuery实现的一个带有分页功能的动态数据表格插件，该插件的设计灵感来源于Excel，允许用户进行类似Excel的操作，如数据编辑和排序。 首先，`index.html`是项目的主页面文件，它包含了HTML结构，...
jqgrid如何渲染表格数据_jqgrid,jquery_jqGrid pivot 增加分项小计，jqgrid,jquery,jquery插件,javascript,表格 - phpStudy...
weixin_32452127的博客
01-27 302
jqGrid pivot 增加分项小计1.表格用的插件是jqGrid pivot。 想在每一个单数 下面的分项后面加一个小计。看了插件demo 没找到每个分项都可以有小计的。 总的横向和纵向总计都是加到最后面，有了解的吗？ 需要加小计的部分我红线标记了。相当于外卖后面多一行小计(统计前面的数值)。客流后面也多一条小计(统计前面客流的数值)。代码：// data:[{// id...
jq发送网络请求案例--渲染数据、增删改查
weixin_53027472的博客
08-30 1619
jq发送网络请求案例，难易程度适中，帮助大家更好理解js原生网络请求，加强基础！
【jquery】kkpager分页插件使用及列表渲染
花椒和蕊的博客
10-18 302
<link rel="stylesheet" href="${basePath}/kkpage/kkpager_blue.css"> <link rel="stylesheet" href="${basePath}/css/page_device/kkpage.css"> <script type="text/javascript" src="${basePath}/js/jquery-1.8.2.js"></script> &...
使用jQuery渲染数据的小例子
u010032977的专栏
04-16 2082
现在应该很少有人使用jQuery了吧！为了回顾以前使用jQuery的经历，现在特意做了一个使用Ajax渲染数据的小例子。
jQuery+ajax请求数据，渲染到前端界面
前端视听
05-11 9670
作为一个前端开发，在日常工作中，会不断的请求接口，调用接口，再对接口的数据进行一定的处理，渲染在前端界面，尤其是在今天前后端分离的时代，这项技能是每个前端开发必备~ 这里就简单的记录工作之中遇到的一些常见的对数据处理的方法，今天要说的是遇到了数组格式的图片的时候，该怎么处理。 一：对于图片数组的渲染 data.json: { "pics": ["img/p15.png", "img/p16.png","img/p17.png"] } 代码示例： <!DOCTYPE HTML> <htm
jQuery使用动态渲染表单功能完成ajax文件下载
zhuzj12345的博客
02-17 1206
原文链接：http://www.poluoluo.com/jzxy/201301/195126.html 封装的通用js函数代码： [javascript] view plain copy  print? // Ajax 文件下载    jQuery.download = function(url, data, method){    // 获取
如何用Jquery将后台数据通过表格形式展现在页面上
Hero_QHZ的博客
01-10 7155
jsp页面代码：table id="materialGrid" class="table table-striped table-bordered table-hover dataTables-example"> table> js代码： $(document).ready(function() { $('#materialGrid').bootstrapTable({
jq怎么动态渲染table表格_EXCEL动态表格怎么制作
weixin_32999397的博客
01-12 529
如果你是一位校长，想看看学生的信息，你是希望这样看呢？还是希望是这样的呢？我想大部分人都希望看到的是后一种吧，看着舒服，简单！第一步：我们看到班别对应的班级与H2中的班级是一致的，直接引用就可以了，而H2中班级是用数据验证来做的，就是我们以前讲的下拉列表的做法，比较简单。第二步：下面动态的数据是根据B2中变化的班级来确定的。比如当B2中显示一班，我们想要一班的数据全部显示在下面，怎么办呢？首先以如...
计算数组中所有项的总和
GonTinyBlack的博客
11-06 1182
var arr = [1,2,3,4,5]; //ES6 数组reduce()方法 console.log('reduce:'+arr.reduce((a,b)=>a+b)); //ES6 forEach()方法.该方法内的返回值会对原数组进行操作 var total = 0; arr.forEach(function(a){ total += a; }); console.lo...
jquery 多数据渲染
07-27
回答: 在提供的代码中，使用了jQuery来进行多数据渲染。具体来说，通过使用jQuery的ajax方法发送请求到指定的接口地址"http://localhost:8080/user/list"，并在请求成功后，通过forEach方法遍历返回的数据response，然后将每个数据项的id和username添加到表格的tbody中。这样就实现了多数据的渲染。\[1\] #### 引用[.reference_title] - *1* [使用jQuery渲染数据的小例子](https://blog.csdn.net/u010032977/article/details/124216817)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [jQuery实现从后端获取数据并渲染到页面](https://blog.csdn.net/weixin_53141315/article/details/129459056)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值