javascript - help！关于table布局中下拉框的问题，求各路大神帮忙看看怎么解决

问题描述

问 题

因为规定要用bootstrap的一个框架，所以我选了其中写好的table布局。
问题是这样的，我点击a标签 <a class="gritter-regular" type="button" >
动态添加一个tr标签并将tr内容显示出来，这个tr标签里有一个td标签占整行，
但是不知道为什么显示出来的这个tr标签只能占一个td的大小，达不到占整行的效果。

我的jQuery代码是这样的` $(".gritter-regular").click(function (target) {

    $(this).parent().parent().parent().after(
    "<tr class='info' style='display: block;background-color: #E6EAF0;'>"+
            "<td colspan='9' class='col-lg-12' style='width: 100%;height: 100%;background-color: #E6EAF0;padding-top: 30px;padding-bottom: 20px'>"+
            "<div class=' col-lg-2' style='margin-left: 62px'><img src='../images/aa.jpg' alt='' width='305' height='170'/></div>"+
            "<div class='col-lg-9' style='padding-left:50px '>"+"<div >" +
            "<ul class='col-lg-9'> <li class='col-lg-2 text-left' style='padding-left: 0'>标题：</li>"+
    "<li class='col-lg-3'>分辨率</li> <li class='col-lg-4'>上传日期：</li></ul>" +
    "<span class=' col-lg-8' style='padding-top: 20px;'>"+
            "简介：搜狗输入法Linux版全新发布！新词特色主题图之旅，一起穿越吧！萌萌的颜文字一键下载直接使用！网站地图 - 企业推广 - 拼音on法 - 搜狗浏览器 - 诚聘英才"+
    "</span>"+
    "<div class='col-lg-8' style='padding-top: 32px'>"+
            "<ul class='col-lg-5' style='padding-left: 0;margin: 0;'>"+
            "<li class=' col-lg-2 text-left' style='padding-left: 0'>标签：</li>"+
    "<li class='col-lg-3'>播放数：</li> </ul> <br/>"+
    "<ul class='col-lg-5' style='padding-left: 0;padding-top: 10px;margin: 0;'>"+
            "<li class=' col-lg-2 text-left' style='padding-left: 0'>标签：</li>"+
   " <li class='col-lg-3' >播放数：</li> </ul> </div> </div> </div> </td> </tr>"
    )
})`

效果图是

大神们帮忙看看这个要怎么解决啊，跪谢！

解决方案

这个问题是tr本身的问题

记得是因为 display: block; 导致的

display 置为 空就行了应该，不能置为block

具体请自己查询下看看

这篇关于javascript - help！关于table布局中下拉框的问题，求各路大神帮忙看看怎么解决的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！