熊猫923
2019-01-02 17:31
采纳率: 46.2%
浏览 601
已采纳

前端样式变换,脑壳痛!

原本是这个样子
图片说明

我想改成这个样子

图片说明

原来的表格导航是在html里面循环出来的
图片说明
图片说明

原来的表格内容是在 js 里面循环出来的
图片说明图片说明

现在我要的效果是每一条数据单独一个框框,而且还有那个导航,如图:
图片说明

我应该怎么办????
在 js 里面拼接字符串也会报错,不可能在html里面完成,因为下面的数据库内容好像传不了。
脑壳痛!!!!!

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

  • 天际的海浪 2019-01-02 11:05
    最佳回答
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title> 页面名称 </title>
    <style type="text/css">
    .tab {
        background-color: #ccc;
    }
    .tab tr {
        display: block;
        margin: 10px 0px;
    }
    .tab th, .tab td {
        display: block;
        width: 200px;
        color: #fff;
        background-color: #300;
        border: 1px solid #fff;
    }
    .tab td:before {
        display: inline-block;
        width: 100px;
        content: attr(data-name)":";
    }
    .tab tr:first-child {
        display: none;
    }
    </style>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var th = $(".tab th");
        $(".tab td").attr("data-name",function(){
            return th.eq($(this).index()).text();
        });
    });
    </script>
    </head>
    <body>
        <table class="tab">
            <tr>
                <th>项目A</th>
                <th>项目B</th>
                <th>项目C</th>
            </tr>
            <tr>
                <td>12</td>
                <td>555</td>
                <td>434</td>
            </tr>
            <tr>
                <td>454</td>
                <td>5455</td>
                <td>553</td>
            </tr>
        </table>
    
    </body>
    </html>
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题