好学IT学院:IT信息技术分享交流平台
来源:blueidea  作者:Sheneyan-译  发布时间:2006-12-25  ★★★加入收藏〗〖手机版
摘要:作者: Jonathan Fenocchi时间:2005.10.26译者:Sheneyan英文原文:http://www.webreference.com/programming/javascript/jf/column13/在上一篇文章中……

新数据行添加完后,我们插入一个“</table>”结束标签到变量“insertData”。这完成了这个表格,然后我只剩这最后一步来达成我们的目标:我们需要将这个表格放到页面上。幸运的是,我们得感谢innerHTML属性,这很简单。我们通过函数document.getElementById()取得DIV“dataArea”并将变量“insertData”中的HTML插进去。嗯,这个表格冒出来了!

我们继续之前……

我得指出两点:

首先,你会注意到我们并没有使用节点<pets>。这事因为我们只有一个数据组(<pets>)以及后来所有的元素(每一个<pet>元素);这些子节点包含了不同的数据但它们有相同的名字。在这个例子中,这个节点能够被忽略。然而,将所有的元素<pet>放进<pets>元素还是比较好,而不是让这些<pet>元素自己散放(但仍然在data元素里面)。

另外一种方式是给每一个宠物放一个指定的标签,比如:

 <?xml version="1.0" encoding="UTF-8"?>
<data>
  <pets>

<猫 />

<狗 />

<鱼 />
  </pets>
</data> 

然后我们能够遍历元素<pets>里的节点。这个processXML函数看起来就像这样:

  function processXML(obj){
    var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
    var dataArrayLen = dataArray.length;
    var insertData = '<table><tr><th>'
   + 'Pets</th></tr>';

for (var i=0; i<dataArrayLen; i++){
     if(dataArray[i].tagName){
        insertData += '<tr><td>' + dataArray[i].tagName + '</td></tr>';
     }

}

insertData += '</table>';

document.getElementById ('dataArea').innerHTML = insertData;
  }

这里所作的修改就是我们指向了<pets>组元素(这个“[0]”意味这是第一个,即使它就是唯一的那一个)以及它的子节点(元素<猫 />,<狗 />,<鱼 />)。因为文本元素分割了这几个元素(空格被认为是一个节点),我们需要确定只有那些有标签名的节点(嗯,也就是只有标签)通过。然后我们输出每一个标签的名字。因为每一个标签名是一个宠物,我们不需要取得每一个节点的数据-节点名本身已经足够。去看一下它是怎么工作的吧。

还有另外一种方式来完成我们上面的工作,就是给每一个<pet>节点设置一个属性值。你的XML文档看起来就像这样:

<?xml version="1.0" encoding="UTF-8"?>
<data>
  <pets>

<pet type="猫" />

<pet type="狗" />

<pet type="鱼" />
  </pets>
</data> 

你只需要稍微修改一下你的processXML函数,它变成这样子了:

  function processXML(obj){
    var dataArray = obj.getElementsByTagName('pet');
    var dataArrayLen = dataArray.length;
    var insertData = '<table><tr><th>'
    + 'Pets</th></tr>';

for (var i=0; i<dataArrayLen; i++){
        insertData += '<tr><td>' + dataArray[i].getAttribute('type') + '</td></tr>';
    }
    insertData += '</table>';
    document.getElementById ('dataArea').innerHTML = insertData;
   }

(Sheneyan注:修改后的示例见:example_2_2.html  ,XML文件见:data_2_2.xml

关键的不同在于我们通过dataArray[i].getAttribute('type')取得值,它返回了当前<pet>节点的“type”属性的值。

继续...

现在我们已经知道了一些从一个单独的XML数据组中取回数据的有效方法,让我们看看如何从多个组中取回数据。和只是列出一个pets所拥有的内容不同,我们假设我们有一个针对我们宠物的日课表。因为它们都有不同的需要,每一只宠物都得仔细的照顾。面对这种情况,动物的看管员需要一个每日依据。现在来让我们将这些放入一个良好格式的XML:

<?xml version="1.0" encoding="UTF-8"?>
<data>
  <pets>

<pet>Cat
    <task>Feed</task>
    <task>Water</task>
    <task>Comb out fleas</task>

</pet>

<pet>Dog
    <task>Feed</task>
    <task>Water</task>
    <task>Put outside</task>

</pet>

<pet>Fish
    <task>Feed</task>
    <task>Check oxygen, water purity, etc.</task>

</pet>
  </pets>
</data>

也许这个看起来很奇怪,但这就是我们正在创建的子组(sub-group)。每一个<pet>元素都是一个组<pets>的子组,而每一个<task>则是每一个<pet>组的子元素。

在我继续之前,你也许希望将你的表格用一些css美化一下,比如:

  <style type="text/css"><!--
  table, tr, th, td {

border: solid 1px #000;

border-collapse: collapse;

padding: 5px;
 }
--></style>

这让这个表格更容易读取。现在让我们去研究函数processXML:

  function processXML(obj){

var dataArray = obj.getElementsByTagName('pet');

var dataArrayLen = dataArray.length;

var subAry, subAryLen;

var insertData = '<table><tr><th>'
    + 'Pets</th><th>Tasks</th></tr>';

for (var i=0; i<dataArrayLen; i++){
        insertData += '<tr><td>' + dataArray[i].firstChild.data + '</td>';
        subAry = dataArray[i].getElementsByTagName('task');
        subAryLen = subAry.length;
        insertData += '<td>';
          for(var j=0; j<subAryLen; j++){
            insertData += subAry[j].firstChild.data;
            if( subAryLen != j+1 ) { insertData += ', '; }
          }
      insertData += '</td></tr>';
  }
  insertData += '</table>';
  document.getElementById ('dataArea').innerHTML = insertData;
}

新增加的内容,首先是两个新变量的声明:“subAry”和“subAryLen”。它们和之前的变量“dataArray”和“dataArrayLen”类似,除了它们指向不同的数组(特别是它们将指向那些“task”元素-当“dataArray”和“dataArrayLen”指向“pet”元素的时候)。

我们也改变了变量“insertData”的初始值-我们增加了一个表格头(<th>)给我们的“tasks”字段。

下一步改变在于循环:我们把值赋给subAry和subAryLen变量。变量subAry成为当前<pet>的<task>元素的数组。变量subAryLen成为这个数组的长度,直到这个数组发生变化(当外部循环走到下一个<pet>时)。

我们创建了一个内嵌的循环来处理所有的<task>元素,一次一个。大概来说,我们创建一个新的数据格,放进一个用逗号分隔的任务列表,然后关闭数据表格以及当前行。尤其,这些<task>元素节点数据(任务本身,比如,“喂食”)放置入变量“insertData”里的数据格。

接下来,我们检验当前<pet>是否有其它更多的task。如果还有,我们增加一个逗号(,)到变量insertData来让每一个任务使用一个逗号分隔(“a, b, c”,而不是“a, b, c,”-注意,最后一个逗号在第二个任务那里,所以我们不需要)。这个工作在我们取得subAry数组长度的时候(给循环的“j”变量加1)就完成了。因为这个循环会在下一个循环的时候把变量“j”递增1,“j”会比它这次检验时还多1。因此,如果“j+1”(或者,“当循环再次开始的时候j的值”)等于subAryLen(当前<pet>节点的<task>节点数目),这个循环将停止。如果循环不再运行,我们就不再添加新的逗号来分隔任务。所以如果“j+1”不等于subAryLen,我们直到我们可以安全的加入逗号到“insertData”,为下一个<task>作准备。

一旦内循环结束,我们关闭task数据格以及pet行。外部循环会重新开始创建一个新行以及移动到下一个<pet>。这个处理一直进行到所有的<pet>元素(以及每一个pet的所有<task>元素)都被处理完。

w3c技术架构介绍
  W3C技术架构图描绘了一个两层的模型:万维网体系结构(被标注为“One Web”)建立在互联网(Interner)体系结构之上。图…
  • 好学考试H5触屏版开放内测
  • 好学触屏公众号虎力全开、杨帆起航!