这段代码取不到值

Question

请教大家，我这段代码哪里有问题？为什么只能执行setpreBg函数，缺不能执行setnextBg函数？为什么第一个alert能取到值，第二个却取不到？function setBg(obj){
var preNode=obj.parentNode.previousSibling;  //tr
var nextNode=obj.parentNode.nextSibling;
         //alert(nextNode.nodeName);
obj.style.backgroundImage="url(images/btnbg.gif)";
if(preNode.nodeName=="TR")
setpreBg(preNode);
         //alert(nextNode.nodeName);
if(nextNode.nodeName=="TR")
setnextBg(nextNode);        }
function setpreBg(pre){
pre.childNodes[0].style.backgroundImage="";
var preNode=pre.previousSibling; //td
if(preNode.nodeName=="TR")
setpreBg(preNode);
}
function setnextBg(next){
next.childNodes[0].style.backgroundImage="";
var nextNode=next.nextSibling;
if(nextNode.nodeName=="TR")
setnextBg(nextNode);
}
<table width="103" border="0"cellspacing="1" cellpadding="0" style="margin-left:22px; margin-top:24px; font-weight: bold; font-family: '黑体'; font-size: 12px;">
  <tr>
    <td width="101" height="24" background="" class="btnbj" style="text-align: right" onclick="javascript:setBg(this);">小马</td>
  </tr>
  <tr>
    <td width="101" height="24" background="" class="btnbj" style="text-align: right" onclick="javascript:setBg(this);">小明</td>
  </tr>
  <tr>
    <td width="101" height="24" background="" class="btnbj" style="text-align: right" onclick="javascript:setBg(this);">小李</td>
  </tr>
  <tr>
    <td width="101" height="24" background="" class="btnbj" style="text-align: right" onclick="javascript:setBg(this);">小张</td>
  </tr>
  <tr>
    <td width="101" height="24" background="" class="btnbj" style="text-align: right" onclick="javascript:setBg(this);">小兰</td>
  </tr>
  <tr>
    <td width="101" height="24" background="" class="btnbj" style="text-align: right" onclick="javascript:setBg(this);">小新</td>
  </tr>
  <tr>
    <td width="101" height="24" background="" class="btnbj" style="text-align: right" onclick="javascript:setBg(this);">小吴</td>
  </tr>
  <tr>
    <td width="101" height="24" background="" class="btnbj" style="text-align: right" onclick="javascript:setBg(this);">小环</td>
  </tr>
  <tr>
    <td width="101" height="24" background="" class="btnbj" style="text-align: right" onclick="javascript:setBg(this);">小小</td>
  </tr>
  <tr>
    <td width="101" height="24" background="" class="btnbj" style="text-align: right" onclick="javascript:setBg(this);">小青</td>
  </tr>
  <tr>
    <td width="101" height="24" background="" class="btnbj" style="text-align: right" onclick="javascript:setBg(this);">小白</td>
  </tr>
  <tr>
    <td width="101" height="24" background="" class="btnbj" style="text-align: right" onclick="javascript:setBg(this);">小黑</td>
  </tr>
</table>

Answer 1

var preNode=obj.parentNode.previousSibling;  //tr
因为这个可能没有啊~~~
if(preNode && preNode.nodeName=="TR")

Answer 2

在firefox中，空白也是一个dom节点，要获取上一个节点，下一个节点的兼容写法：
//获取上一个节点
function getPreviousChild(obj) { 
    var result = obj.previousSibling; 
    while(result!=null &&!result.tagName) { 
         result = result.previousSibling; 
    } 
    return result; 
};
//获取下一个节点
function getNextChild(obj) { 
    var result = obj.nextSibling; 
    while (result!=null &&!result.tagName) { 
         result = result.nextSibling; 
    } 
    return result; 
};当然你还可以修改此函数，添加节点的标签名称，判断是什么节点

Answer 3

还是不对，你们自己测试一下就会发现一个问题，只能执行setpreBg函数，却不能执行setnextBg函数

Answer 4

 我晕啊 既然上面这个没有判断。下面的同样要判断啊~function setBg(obj){
    var preNode=obj.parentNode.previousSibling;  //tr
    var nextNode=obj.parentNode.nextSibling;
         //alert(nextNode.nodeName);
    obj.style.backgroundImage="url(images/btnbg.gif)";
    if(preNode || preNode.nodeName=="TR")
    setpreBg(preNode);
         //alert(nextNode.nodeName);
    if(nextNode || nextNode.nodeName=="TR")
    setnextBg(nextNode);        }