dom childNodes问题

时间:2010-10-24 18:19:50

标签: javascript dom dom-node

我似乎在Mozilla和IE之间获得了不同的fromDate结果。 是否有更可靠的跨浏览器方式? [编辑]我实际上得到不同的列值! [/ edit]

<tr id='id3332201010241'  />
 <td>20101024</td>
 <td>20101025</td>
 <td>1415</td>
 <td>1445</td>
 <td>INVDROP</td>  
 <td>H4T1A3</td> 
 <td><a href='#' onclick='selectEditActivity("id3332201010241");' >Click Here</a></td>
</tr>

function selectEditActivity(pass_id){ 
 row = document.getElementById(pass_id);    
 var seq = document.getElementById(pass_id).getAttribute("seq");
 var from_date   = row.childNodes[1].innerHTML; 
 alert(from_date);
 var to_date   = row.childNodes[3].innerHTML;  
}

2 个答案:

答案 0 :(得分:3)

您错误地将<tr>设为自动关闭标记

<tr id='id3332201010241' />

应该是

<tr id='id3332201010241'>

另一件事是childNodes可能无法正常工作,因为它将包含文本节点。如果你想连续获得<td>个元素,你应该使用:

var row       = document.getElementById(pass_id);  
var columns   = row.getElementsByTagName("td"); 
var from_date = columns[1].innerHTML; 
var to_date   = columns[3].innerHTML; 
  

childNodes nodeList由   元素的所有子节点,   包括(空)文本节点和   评论节点。   的 @quirksmode

答案 1 :(得分:2)

您看到不同浏览器处理空白区域的差异结果。相反(对于更一般的情况),您可以使用getElementsByTagName()来确保确保获取某种类型的子元素(在这种情况下为<td>),如下所示:

function selectEditActivity(pass_id){ 
  var row = document.getElementById(pass_id),
      cells = row.getElementsByTagName("td"),
      seq = row.getAttribute("seq"),
      from_date = cells[0].innerHTML,
      to_date = cells[1].innerHTML;  
  alert("From: " + from_date + "\nTo: " + to_date);
}

You can test it out here。正如@ patrick指出的那样,这里不需要,只需使用<tr>的{​​{3}},就像这样:

function selectEditActivity(pass_id){ 
  var row = document.getElementById(pass_id),
      seq = row.getAttribute("seq"),
      from_date = row.cells[0].innerHTML,
      to_date = row.cells[1].innerHTML;  
  alert("From: " + from_date + "\nTo: " + to_date);
}

.cells