我有一个表，当用户输入数字时，将处理数据，然后显示一个新的#Calculates Mandelbrot iterations
#real = Real part of c
#imag = Imaginary part of c
#iters = Max iteration
def mandelbrot(self,real,imag,iters):
c = complex(real,imag)
z = 0.0j
for i in range(iters):
z = (z**2)+c
if (((z.real)**2) + ((z.imag)**2)) >= 4: return i
return iters
。当表的高度超过高度时，将显示滚动条，并使用{{1 }}方法，然后使用tr集中输入。
我赋予scrollIntoView()的高度从视口高度开始以较小的高度超过，因此表格溢出视口并出现在主体边界的底部。
HTML和JavaScript：
focus()CSS：
#tableContainer如何使表格始终适合视口（底部有一些空间），并且当其内容超出视口时，会出现滚动条？
我在 <body dir="rtl">
<form onSubmit="return execute();">
<label>Enter a number</label>
<input type="text" id="entered"/>
<input type="submit" value="submit" />
</form>
<div class="table-wrapper">
<div id="tableContainer">
<table id="myTable" border=1>
<thead id="myTableHead">
<tr>
<th>input</th>
<th>resualt</th>
<th>delete</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
function execute()
{
var field=document.getElementById("entered");
var num=parseInt(field.value);
field.value="";
if(isNaN(num))
{
alert("Enter a number");
return false;
}
var tableBody=document.getElementById("tableBody");
var resualt=num+1;
var buttons=document.getElementById("myTable").getElementsByTagName("button");
var buttonLen=buttons.length;
tableBody.innerHTML+="<tr id='tr"+(buttons.length)+"'><td>" + num + "</td>"+"<td>"+ resualt + "</td>" + "<td id='buttonContainer'><button id='b" + (buttons.length) + "' onClick='remove(" + (buttons.length) +")'></button></td></tr>" ;
var idOfButton="b"+(buttons.length-1);
console.log(idOfButton);
var currentButton=document.getElementById(idOfButton);
console.log(currentButton);
currentButton.scrollIntoView(true);
field.focus();
return false;
}
function remove(x){
var tableBody=document.getElementById("tableBody");
var theRow=document.getElementById("tr"+x);
tableBody.removeChild(theRow);
}
</script>
</body>
上使用了 *{
box-sizing: border-box;
margin:0;
padding:0;
}
html,body{
height:100%;
}
body{
font-family: tahoma;
border: 9px solid #006599;
padding:px;
margin:0;
background: #F2F2FF;
}
.table-wrapper{
position: relative;
}
#tableContainer{
height:360px;
overflow-y:auto;
}
#myTable{
border-collapse: collapse;
box-shadow: 0 0 1px 0px #ccc;
border:1px solid #bbb;
margin-top:25px;
}
thead{
background: linear-gradient(to bottom , #036393 ,#0598EF) ;
color:#fff;
position: absolute;
top:0;
right:0;
}
td,th{
width:150px;
font: 14px/1.3 tahoma;
padding: 3px 7px;
text-align:right;
border:1px solid #bbb;
}
th{
padding: 4px 7px;
height:100%;
}
td{
font-size:14px;
vertical-align: middle;
}
tr td:last-child , tr th:last-child{
width:45px;
}
tr:nth-child(2n){
background: #eee;
color:#222;
}
tbody tr:nth-child(2n+1){
background: #fff;
}
label{
font: 14px/1.5 tahoma;
padding-left:6px;
}
form{
margin: 25px 5px;
}
input[type="text"]{
border-radius :0 3px 3px 0;
height:30px;
background: #FFF;
padding: 0 5px;
border: 1px solid #bbc0c4;
width:150px;
}
input[type="text"]:hover , input[type="text"]:focus{
box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
}
input[type="submit"]{
border:0;
height:30px;
border-radius: 3px 0 0 3px;
margin-right:-6px;
padding :5px;
background: #0095ff;
border: 1px solid #07c;
box-shadow: inset 0 1px 0 #66bfff;
color:#fff;
transition: 0.3s;
}
input[type="submit"]:hover{
color: rgba(255,255,255,0.9);
background-color: #07c;
border-color: #005999;
box-shadow: inset 0 1px 0 #3af;
}
button{
background: url(image/uu.jpeg) 50% 50% no-repeat;
background-size:18px 18px;
border:0;
height:30px;
width:30px;
}
td:last-child{
background: #fff;
text-align:center;
}
，但是它不起作用。