动态增加的tr的背景色无法改变，请教大家

//添加一行
function AddRow(i) {
i++;
var newTr = tab1.insertRow(-1);
var newTd0 = newTr.insertCell(-1).innerHTML = i;
var newTd1 = newTr.insertCell(-1).innerHTML = "aaaaaaaaaaa";
var newTd2 = newTr.insertCell(-1).innerHTML = "<input type='text' class='textbox'/>";
var newTd3 = newTr.insertCell(-1).innerHTML = "<input type='text' class='textbox'/>";
var newTd4 = newTr.insertCell(-1).innerHTML = "<input type='text' class='textbox'/>";
var newTd5 = newTr.insertCell(-1).innerHTML = "<input type='text' class='textbox'/>";
var newTd6 = newTr.insertCell(-1).innerHTML = "<a href='#' title='移除这一行' onclick='javascript:DelRow(this)'>移除</a>";
newTr.onclick=function()
{
newTr.style.backgroundColor='red';//为什么这行代码没有达到改变该行背景色的效果
}
}
请教大家

解决方案 »

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

newTr.onclick=function()
    {
        this.style.backgroundColor='red';//为什么这行代码没有达到改变该行背景色的效果
    }newTr 改成 this 试试。
测试IE7，IE8，GG，ff5都没有问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head><body><table id="tab1"></table>
<script type="text/javascript">
//添加一行
function AddRow(i) {
    i++;
    var newTr = tab1.insertRow(-1);
    var newTd0 = newTr.insertCell(-1).innerHTML = i;
    var newTd1 = newTr.insertCell(-1).innerHTML = "aaaaaaaaaaa";
    var newTd2 = newTr.insertCell(-1).innerHTML = "<input type='text' class='textbox'/>";
    var newTd3 = newTr.insertCell(-1).innerHTML = "<input type='text' class='textbox'/>";
    var newTd4 = newTr.insertCell(-1).innerHTML = "<input type='text' class='textbox'/>";
    var newTd5 = newTr.insertCell(-1).innerHTML = "<input type='text' class='textbox'/>";
    var newTd6 = newTr.insertCell(-1).innerHTML = "<a href='#' title='移除这一行' onclick='javascript:DelRow(this)'>移除</a>";
    newTr.onclick=function()
    {
        newTr.style.backgroundColor='red';//为什么这行代码没有达到改变该行背景色的效果
    }
}
var tab1
window.onload=function(){
tab1=document.getElementById('tab1');
AddRow(0);
AddRow(1);
AddRow(2);}
</script></body></html>
我把整个文件的代码贴出来，大家运行看看<html>
<head>
<style>
body{padding:0px;margin:5px;overflow-x:hidden;font:12px/21px "宋体"; background:#fff;}
html
{
scrollbar-highlight-color: #f9f9f7;
scrollbar-shadow-color: #f9f9f7;
scrollbar-3dlight-color: #DDD;
scrollbar-arrow-color: white;
scrollbar-track-color: #f9f9f7;
scrollbar-darkshadow-color: #DDD;
scrollbar-base-color: #DDD;
}

#tb_main{width:100%;height:100%;
border:0px;
border-collapse:collapse;
border-spacing:0px;}
.grid_view
{
width: 100%;
border:0px;
    border-collapse:collapse;
    border-spacing:0px;
font-size:12px;
}.grid_view TD
{
background-color:#fff;
height: 25px;
cursor: default;
font-family: Arial;
color: #333;
text-align:left;
border:1px #C6D8E0 solid;
padding-left:2px;
}.grid_view TH
{
    background-color:#f3f3f3;
background:url(images/th_bg.jpg) repeat-x;background-position:left 1px;
    border-collapse: collapse;
line-height:26px;
color: #666;
cursor: default;
border:1px #C6D8E0 solid;
text-align:center;
padding-left:5px;
}
.grid_view tr
{
    background-color:#fff;
    border-collapse: collapse;
}.tr_click{background-color:#000;
    border-collapse: collapse;}.textbox{width:90%;border:0px;padding-left:2px;background-color:#f3f3f3;}</style>
</head>
<body>
<table id='tab1' class='grid_view'>
<tr>
<th style='width:60px'>行号</th>
<th>列名一</th>
<th>列名二</th>
<th>列名三</th>
<th>列名四</th>
<th>列名五</th>
<th style='width:60px;'>操作</th>
</tr>
</div>
</body>
<script language="javascript" type="text/javascript">
var tab1 = document.getElementById("tab1");
var cellLength = 0;
window.onload = function() {
document.onkeydown = showKeyDown;
for(var i=0;i<15;i++)
{
AddRow(i);
}
} //键盘事件
function showKeyDown(evt) {
evt = (evt) ? evt : window.event
if (evt.keyCode == 119) {
    window.parent.manageKeydown();
}
else {
    if(tab1!=null)
    moveFocus(evt);
}
}
//焦点的转移
function moveFocus(evt) {
    var curFocus = document.activeElement; //获取的焦点的文本框
    var rowIndex = 0;
    var cellIndex = 0;
    if (curFocus != null && curFocus.tagName == "INPUT") {
        rowIndex = curFocus.parentNode.parentNode.rowIndex; //当前焦点所在的行索引
        cellIndex = curFocus.parentNode.cellIndex; //当前焦点所在的列索引
    }
    else
        return;
    switch (evt.keyCode) {
        case 38: //向上
            var cell = tab1.rows[rowIndex - 1].cells[cellIndex];
            if (cell != null && cell.firstChild != null && cell.firstChild.tagName == "INPUT")
                cell.firstChild.focus();
            break;
        case 40: //向下
            if (rowIndex < tab1.rows.length - 1)
                tab1.rows[rowIndex + 1].cells[cellIndex].firstChild.focus();
            break;
        case 37: //向左
            moveFocus_left(rowIndex, cellIndex);
            break;
        case 39: //向右
            moveFocus_right(rowIndex, cellIndex);
            break;
        default:
            break;
    }
}//设置焦点向右
function moveFocus_right(rowIndex, cellIndex) {

cellLength = tab1.rows[rowIndex].cells.length; //表的总列数
if (cellIndex == cellLength) {//已经是最后一列时焦点转到下一行的第一列
if (rowIndex < tab1.rows.length - 1) {//该行不是最后一行
moveFocus_right(rowIndex + 1,0);//焦点移到下一行的第一列
}
else
return;
}
    var nextCell = tab1.rows[rowIndex].cells[cellIndex + 1];//右侧的单元格
    if (nextCell != null && nextCell.firstChild != null && nextCell.firstChild.tagName == "INPUT") {
        nextCell.firstChild.focus();
        return;
    }
    else {
        moveFocus_right(rowIndex, cellIndex + 1);
    }
}//设置焦点向左
function moveFocus_left(rowIndex, cellIndex) {
    if (cellIndex <= 1) {//已经是第一列时，焦点转到上一行的最后一列
        cellLength = tab1.rows[rowIndex].cells.length;
        var cell = tab1.rows[rowIndex - 1].cells[cellLength - 2];
        if (cell != null && cell.firstChild != null && cell.firstChild.tagName == "INPUT") {
            cell.firstChild.focus();
            return;
        }
        return;
    }
    var nextCell = tab1.rows[rowIndex].cells[cellIndex - 1]
    if (nextCell != null && nextCell.firstChild != null && nextCell.firstChild.tagName == "INPUT") {
        nextCell.firstChild.focus();
        return;
    }
    else {
        moveFocus_left(rowIndex, cellIndex - 1);
    }
}//添加一行
function AddRow(i) {
if(i==-1)
i=tab1.rows.length;
else
i++;
var newTr = tab1.insertRow(-1); var newTd0 = newTr.insertCell(-1).innerHTML = i;
var newTd1 = newTr.insertCell(-1).innerHTML = "aaaaaaaaaaa";
var newTd2 = newTr.insertCell(-1).innerHTML = "<input type='text' class='textbox'/>";
var newTd3 = newTr.insertCell(-1).innerHTML = "<input type='text' class='textbox'/>";
var newTd4 = newTr.insertCell(-1).innerHTML = "<input type='text' class='textbox'/>";
var newTd5 = newTr.insertCell(-1).innerHTML = "<input type='text' class='textbox'/>";
var newTd6 = newTr.insertCell(-1).innerHTML = "<a href='#' title='移除这一行' onclick='javascript:DelRow(this)'>移除</a>";
newTr.className="tr_click";
newTr.onclick=function()
{
newTr.className="tr_click";// = "#F4F6FC";
alert(newTr.className);
}
newTr.onmouseover=function()
{
newTr.style.backgroundColor='#F2F2F2'
}
newTr.onmouseout=function()
{
newTr.style.backgroundColor='#fff'
}
}

//删除一行
function DelRow(obj) {
if(confirm("确认移除此行吗?"))
{
var rowIndex = obj.parentNode.parentNode.rowIndex;
if(tab1.rows.length==rowIndex+1)
{tab1.deleteRow(rowIndex);}
else
{
tab1.deleteRow(rowIndex);
for(var i=1;i<tab1.rows.length;i++)//如果删除的不是该表格的最后一行,则重置行号
{
tab1.rows[i].cells[0].innerHTML=i;
}
}
}
}
</script>
</html>
样式作用等级楼主没搞清楚，
DOM.style定义 > 页面内style定义的class > .css定义的class
    newTr.onclick=function()
    {
       // newTr.className="tr_click";// = "#F4F6FC";
        //alert(newTr.className);
       newTr.style.backgroundColor='#f00';
    }
    newTr.onmouseover=function()
    {
       newTr.style.backgroundColor='#F2F2F2'
    }
    newTr.onmouseout=function()
    {
        newTr.style.backgroundColor='#fff'
    }
还有一点，这个样式干扰了tr设置的样式，注释掉td的白色背景
.grid_view TD
{
    /*background-color:#fff;*/
    height: 25px;
    cursor: default;
    font-family: Arial;
    color: #333;
    text-align:left;
    border:1px #C6D8E0 solid;
    padding-left:2px;
}