表格定位

一个表格能显示十条记录，我现在有50条记录，通过滚动条可以查看所有数据，追加一条记录，这条记录被置为兰色，显示在表格作后一条，我得通过滚动条能看见追加记录。想实现，追加一条记录后，将这条记录显示在当前页面第10条记录上。<div id="addd" >
<table id="asd" width="775px" height="23" border="0" cellpadding="0" cellspacing="1">
<tr bgcolor="#FFFFFF">
<td width="40" height="19" style="font-size:14px;text-align: center;color: #000000">
......
</td>
</tr>
<div >

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

两种方式任君选择
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
function doAdd(){
var oTr = asd.insertRow();
oTr.style.backgroundColor = "#6600FF";
var oTd = oTr.insertCell();
oTd.innerText = ".....";
oTr.scrollIntoView();
}
function doAdd2(){
var oTr = asd.insertRow(9);
oTr.style.backgroundColor = "#6600FF";
var oTd = oTr.insertCell();
oTd.innerText = ".....";
oTr.scrollIntoView(false);
}
  </script>
</HEAD> <BODY>
  <div id="addd" style="width:400px;height:219px;overflow:auto">
<table id="asd" width="775px" height="23" border="0" cellpadding="0" cellspacing="1">
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #000000">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #000000">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #000000">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #000000">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
<tr bgcolor="#E3E3E3"><td width="40" height="19" style="font-size:14px;text-align: center;color: #336699">.....</td></tr>
</table>
</div >
<button onclick=doAdd()>添加</button>
<button onclick=doAdd2()>添加2</button>
</BODY>
</HTML>
xuStanly(依依myLove) 的代码需要改一下因为在firefox下不可用.建议以后不要使用innerText,insertCell() document.all 等因为别的浏览器不支持
<script>
  var n=1;
function doAdd(){
var oTr = document.getElementById('asd').insertRow( document.getElementById('asd').rows.length);
oTr.style.backgroundColor = "#6600FF";
var oTd = document.createElement('td');
oTd.innerHTML = ".....";
oTr.appendChild(oTd);
oTr.scrollIntoView();
}
function doAdd2(){
var oTr = document.getElementById('asd').insertRow(9);
oTr.style.backgroundColor = "#6600FF";
var oTd = document.createElement('td');
oTd.innerHTML = n++;
oTr.appendChild(oTd);
oTr.scrollIntoView(false);
}
  </script>