这段代码取不到值

Zi_Yuan 2010-10-26 04:01:24

请教大家，我这段代码哪里有问题？为什么只能执行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>

...全文

62 6 点赞打赏收藏举报

写回复

6 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

Zi_Yuan 2010-10-26

[Quote=引用 5 楼 cj205 的回复:]
我晕啊既然上面这个没有判断。下面的同样要判断啊~

function setBg(obj){
var preNode=obj.parentNode.previousSibling; //tr
var nextNode=obj.parentNode.nextSibling;
//alert(nextNode.nodeName);
obj.style.background……
[/Quote]
这个对啦，thankU 啦

打赏
举报

回复赞

Mr-Jee 2010-10-26

我晕啊既然上面这个没有判断。下面的同样要判断啊~

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);

}

打赏
举报

回复赞

Zi_Yuan 2010-10-26

[Quote=引用 2 楼 hch126163 的回复:]
在firefox中，空白也是一个dom节点，要获取上一个节点，下一个节点的兼容写法：
//获取上一个节点
function getPreviousChild(obj) {
var result = obj.previousSibling;
while(result!=null &&!result.tagName) {
result = result.pr……
[/Quote]
现在是在IE中测试也不能完全通过

打赏
举报

回复赞

Zi_Yuan 2010-10-26

[Quote=引用 1 楼 cj205 的回复:]
var preNode=obj.parentNode.previousSibling; //tr
因为这个可能没有啊~~~
if(preNode && preNode.nodeName=="TR")
[/Quote]
还是不对，你们自己测试一下就会发现一个问题，只能执行setpreBg函数，却不能执行setnextBg函数

打赏
举报

回复赞

hch126163 2010-10-26

在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;
};

当然你还可以修改此函数，添加节点的标签名称，判断是什么节点