`
leng_cn
  • 浏览: 301931 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Javascript通过XML数据岛给TABLE增加数据源的方法

阅读更多
<html><head>
<meta http-equiv=content-type content="text/html; charset=gb2312"><title>Test the xml data land </title>

<XML ID="xmldso"></XML>
</head>
<body>
<input type="button" value="addItem" id=btn onclick="addItem()">
<div id=RESULTS style= "color:red;font-weight:bold;"></div>
<div id=STATUS style= "color:red;font-weight:bold;"></div>
<TABLE BORDER=1 id=tbl DATASRC="#xmldso">
<THEAD>
<TR><TH>Title</TH>
<TH>ISBN</TH></TR>
</THEAD>
<TBODY>
<TR>
<TD>
<DIV DATAFLD="title"></DIV>
</TD>
<TD>
<DIV DATAFLD="isbn"></DIV>
</TD>
</TR>
</TBODY>
</TABLE>
<div id=tmp></div>

<script language="javascript">
var ti;//global time handle
function addItem() {
btn.disabled = true;
var xmlDsoArray = new Array();
var rootElement = "<booklist>";//such as booklist
var newNode;
xmlDsoArray.push(rootElement);
for(i=0;i<1000;i++) {
//newNode+="<p>test";
//newNode+="<book><title>SushiAnyone</title><isbn>72-80081-082</isbn></book>";
newNode="<book><title>SushiAnyone</title><isbn>" + i + "</isbn></book>";
//newNode="<book><title>SushiAnyone</title><isbn></isbn></book>";
xmlDsoArray.push(newNode);
// t=root.createElement("book");
//   title=root.createElement("title");
//   isbn=root.createElement("isbn");
//   title.text="SushiAnyone"  
//   isbn.text="72-80081-082"  
//   t.appendChild(title)  
//   t.appendChild(isbn)  
//   node=root.selectSingleNode("/booklist")  
// node.appendChild(t) 

}
//alert(newNode.length);
//alert(newNode.join(""));
//tmp.innerText = "";
var endRootElement = "</booklist>"
xmlDsoArray.push(endRootElement);
var xmlDsoElements = xmlDsoArray.join("");
/*var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
xmlDoc.async = false;
xmlDoc.loadXML(t)*/

xmldso.async = false;
xmldso.onreadystatechange = CheckState;
xmldso.loadXML(xmlDsoElements);
//alert(xmldso.childNodes.length);

//alert(xmlDoc.loadXML(t));
//alert(t)
  //tmp.innerText = t
  //tmp.innerHTML = test
  //alert(xmlDoc.xml);;
  //tbl.dataSrc = xmlDoc;
  xmlDsoArray = null;
  
  
}

function CheckState()
{
  var state = xmldso.readyState;
  //RESULTS.innerHTML += "readyState = " + state + "<BR>"
  if (state == "interactive")
  {
    var err = xmldso.parseError;
    if (err.errorCode != 0)
      RESULTS.innerHTML += err.reason + "<BR>"
    else {
    //alert(xmldso.childNodes[0].childNodes.length);//get the loaded xml node length
    ti = window.setInterval("CompareDSOLen()",10);
    //RESULTS.innerHTML +="success" + "<BR>"
    }
  }
}
function CompareDSOLen() {
if(tbl.rows.length-1 ==  xmldso.childNodes[0].childNodes.length) {//compare the xml nodes and the dso table length equality the table first length is 2
btn.disabled = false;
clearInterval(ti)
}

}
</script>


</body>
</html>
分享到:
评论

相关推荐

    XML数据源对象的使用

    此外,对于复杂的数据结构,如数组类型的XML数据,可以通过调整数据绑定方式,如使用`&lt;TABLE DATASRC="#"&gt;`来逐行显示数据,或者用`&lt;SPAN DATASRC="#"&gt;`显示单个字段。 总结,XML数据源对象的使用是HTML与XML融合的...

    XML数据岛技术及应用.pdf

    通过`document.all`属性或`document.documentElement`属性,可以获取到XML数据岛的根节点,然后进一步遍历和操作XML结构。 数据岛中的数据可以与HTML元素捆绑,以实现页面显示。例如,可以使用HTML表格(`&lt;table&gt;`...

    XML数据源对象DSO介绍.pptx

    Recordset对象提供了诸如MoveFirst、MovePrevious、MoveNext、MoveLast和Move等方法,方便地遍历和操作XML数据岛中的记录。 4. HTML标记与XML数据源的绑定 并非所有HTML标记都支持与XML数据源绑定。常见的可绑定...

    xml分页+ajax请求数据源+dom取结果实例代码

    2. **XML数据岛分页显示**:客户端接收到XML数据后,使用数据岛(Data Islands)技术实现分页显示。数据岛是一种将XML数据嵌入HTML文档中的方法,简化了客户端对XML数据的操作。这里利用JavaScript处理XML数据,根据...

    Web设计中如何使用XML数据

    要使用XML DSO从XML数据源中提取数据,首先要在HTML文档中创建一个XML数据岛,这是通过内嵌XML数据实现的,例如: ```html &lt;xml id="xmldb"&gt; &lt;name&gt;Premshree Pillai &lt;sex&gt;male &lt;name&gt;Vinod &lt;sex&gt;male ...

    JavaScript完全自学宝典 源代码

    13.8.html JavaScript操作XML数据岛。 13.9.jsp JavaScript+XML实现通讯录。 addressbook.war JavaScript+XML实现通讯录的工程文件(可以直接在Tomcat下发布运行)。 addressbook.xml 记录通讯录的XML...

    关于html嵌入xml数据岛如何穿过树形结构关系的问题

    1. `datasrc`属性应该包含`#`前缀来引用DOM中的XML数据岛,而不是直接引用XML文件。 2. 使用`&lt;div&gt;`标签可能无法正确显示数据,推荐使用`&lt;span&gt;`标签。 修正后的HTML代码如下: ```html &lt;xml id="XMLData" src=...

    jsp文件中数据处理

    在给定的部分内容中,通过`&lt;Table dataSrc="#xmlData" border=1&gt;`标记指定了表格的数据源,其中`dataSrc`属性指向了ID为`xmlData`的XML数据岛。接下来,通过`&lt;span dataFld="AUTHOR"&gt;`、`&lt;span dataFld="GENERATOR"&gt;...

    XML考试复习大纲及参考

    - **概念**:数据岛是指XML文档中的一段数据,可以通过数据源对象来操作这些数据。 - **数据绑定**:将XML数据绑定到HTML页面上显示。 - **7.3 将XML文档数据嵌入到HTML** - **三种嵌入方法**:使用`&lt;object&gt;`、...

    利用AJAX与数据岛实现无刷新绑定

    1. 创建XML数据岛作为数据源。 2. 在HTML中定义数据绑定元素,如表格单元格。 3. 配置服务器端的AJAX处理程序,提供返回数据集的方法。 4. 编写客户端的JavaScript代码,通过AJAX调用服务器方法并处理返回结果。 5. ...

    HTML5、CSS3、JS.docx

    8. **AJAX**:异步JavaScript和XML,用于不刷新页面的情况下与服务器交换数据。 9. **Promise**:解决异步编程的回调地狱问题,提供了更优雅的处理方式。 10. **ES6新特性**:包括类(class)、模板字符串、箭头函数、...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

Global site tag (gtag.js) - Google Analytics