項目中需要在js文件中動態的往table里面添加數據,當數據的量到一定的程度的時候,就希望能夠出現滾動條,現記錄如下:
Html文件:
<div style="width:468px;height:260px;overflow:scroll;background:#9D9D9D;"> <table id="detail" style="width:450px;background:#9D9D9D;border-collapse:separate; border-spacing:0px 0px;"> </table> </div>
var detail=""; detail += '<thead>'; detail += '<tr>'; detail += '<th align="left">時間</th>'; detail += '<th align="left">用戶</th>'; detail += '<th align="left">出價</th>'; detail += '</tr>'; detail += '</thead>';
detail += '<body>';
for (var i=0;i<result.length;i++) {
detail += '<tr>';
detail += '<td style="width:200px;height:10px;" valign="top">'+result[i].priceTime+'</td>';
detail += '<td valign="top">'+result[i].account+'</td>';
detail += '<td valign="top">'+result[i].price+'</td>';
detail += '<tr>';
}
detail += '</body>';
document.getElementById('detail').innerHTML = detail;
Table顯示滾動條,要先把table放到一個div中,div的長度和寬度要固定,控制overflow屬性為scroll
現在只要table的長度或是寬度大於div的長度或是寬度,滾動條就顯示出來了。