js根据数据条数，使表格每一行只显示三条数据，最后一行显示多余的数据。

最新推荐文章于 2024-11-28 16:09:53 发布

大黄的Java笔记

最新推荐文章于 2024-11-28 16:09:53 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： js 控制表格显示获取数组对象长度

本文链接：https://blog.youkuaiyun.com/qq_39331713/article/details/85104223

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态向HTML页面添加标签的方法，具体展示了如何解析从数据库返回的JSON数据，并将其转换为可视化的表格形式。此外，还提供了一个计算数组对象长度的辅助函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人思路，仅供参考！

function show_spots_table(result) {
        //清空table表格
        var spots = result.extend.pageInfo;
        var len = count(spots);
        var s = "";
        var s1 ="";
        var i = 1;
        $.each(spots, function (index, item) {
            var scenicSpotName = $("<p></p>").addClass("pos-abs").append(item.scenicSpotName);
            var html = "<img src='" + item.pictureOne + "' style='width: 400px' height='240px'>";
            var a = $("<a href='#'></a>").append(html).append(scenicSpotName);
            var b = $("<div data-module-name='c_fimg_t_0' style='zoom: 1;float: left;'></div>").addClass("slider-main-img").append(a);
            var c = $("<div></div>").addClass("spot").append(b);
            var t = $("<td></td>").append(c);
            debugger;
            if(((i%3==0) && (i!=0)) || ((i%3!=0)&&(index==len-1))){
                s=s+"<td>"+t[0].innerHTML+"</td>";
                var t1 = $("<tr></tr>").append(s);
                s1 = s1+"<tr>"+t1[0].innerHTML+"</tr>";
                $("#tableImg1 tbody").append(s1);
                s="";
                t1="";
                s1="";
                i=i+1;
            }
            else{
                s=s+"<td>"+t[0].innerHTML+"</td>";
                i=i+1;
            }
        });
    };

解释一下：result是我从数据库中返回的json数据

我是手动用js向html添加标签。

另外写了一个计算数组对象长度的函数

function count(o){
        var t = typeof o;
        if(t == 'string'){
            return o.length;
        }else if(t == 'object'){
            var n = 0;
            for(var i in o){
                n++;
            }
            return n;
        }
        return false;
    }

命名没有按照规范！不要在意。。。

解决问题的办法有很多种，这只是其中一种思路，仅供参考，大神勿喷。