2016-06-18 23 views
0

我有一张桌子,里面有一些内容。我想添加一个滚动条到body。我无法得到它的工作;我打电话给课堂,试图添加一个滚动条,但它不会出现。所以我正在寻找一个解决方案。这里是我的代码:HTML - 将滚动条添加到表格主体?

var modal = document.getElementById('myModal'); 
 
var btn = document.getElementById("myBtn"); 
 
var span = document.getElementsByClassName("close")[0]; 
 
btn.onclick = function() { 
 
    modal.style.display = "block"; 
 
} 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 
var total = 0; 
 

 
function sitaSeen(img, name, condition, price) { 
 
    $('tbody').append("<tr><td><img src=" + img + "></td><td>" + name + "</td><td>" + condition + "</td><td>$" + price + "</td><td><span>X</span></td></tr>"); 
 
    total += price; 
 
    $('#total').empty(); 
 
    $('#total').append("Total: $" + total); 
 
} 
 
$('.papa').on('click', 'tr span', function(){ 
 
\t \t $(this).closest('tr').remove(); 
 
});
<h2>System</h2> 
 
<button onclick="sitaSeen('https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf3qr3czxb49KzgL-KmsjwPKvBmm5D19V5i_rEprP5gVO8v11lZj-gIYbDclRqMA7Zq1S7lOm-0Za6753KmHoxvnQh5y7ZyhWxiRwecKUx0iL1oy6z/60fx60f','M9 Bayonet | Doppler','Battle Scarred',70)">Click</button> 
 
<button id="myBtn">Open Modal</button> 
 
<div id="myModal" class="modal"> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <span class="close">×</span> 
 
     <h2>Logo</h2> 
 
     <h2 id="total">Total: $0</h2> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <table class="centered"> 
 
     <thead> 
 
      <tr> 
 
      <th data-field="pic"></th> 
 
      <th data-field="id">Item</th> 
 
      <th data-field="name">Conditon</th> 
 
      <th data-field="price">Price</th> 
 
      <th data-field="delete"></th> 
 
      </tr> 
 
     </thead> 
 
      <tbody class="papa"> 
 
      </tbody> 
 
     </table> 
 
     <button>seen</button> 
 
    </div> 
 
    </div> 
 
</div>

+0

你没有足够的内容在体内具有滚动!尝试添加许多文字或其他内容,并且您会看到默认情况下会显示滚动条! –

+0

我能以某种方式改变那个“限制”吗? –

+0

起初,我在那里的模式来滚动,我删除它 –

回答

0

由于您使用位置:固定 CSS属性,你的html元素会出这是通过一个原稿正常流动。这就是滚动条不出现在文档上的原因。

一个解决方案将不会使用位置:固定属性,我想你想拥有它的中心div#模式。您有很多其他选项可用于集中html元素。

Refer to this article

+0

好吧,它有点作品,但现在我怎么能做得更大,如果我添加项目,然后出现滚动时,有足够的东西?基本上他们不会去模态 –

+0

@AleksKpur可以请你解释一下吗? –