`
baoqf
  • 浏览: 108807 次
  • 来自: 杭州
社区版块
存档分类
最新评论

DHTML结合XML 数据岛实现动态页面

    博客分类:
  • web
阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>清风</title>
<script>
var obj;
function change(prime,slave,price)
{
 var obj=document.all.xmldata.XMLDocument.childNodes[0].selectSingleNode("DSTree1[@id=\""+prime.value+"\"]");
  with(slave){
   var length=0; 
   for(i=0;i<obj.childNodes.length;i++)//获得子节点数据
   {
    options[length++].text=obj.childNodes[i].getAttribute("text");
    options[length-1].value=obj.childNodes[i].getAttribute("id");
    price.value=obj.childNodes[i].getAttribute("price_buy");
   }
   onchange=function()//添加控件事件方法
   {
    price.value=obj.selectSingleNode("DSTree2[@id=\""+slave.value+"\"]").getAttribute("price_buy");
  };
  options[length-1].selected;//设置默认值
  onchange();//触发事件
  }
}
</script>
</head>
<body class="style5">
 <table>
 <tr><td>
  品名规格:
  <select id="prime" onchange="javascript:change(this,document.all('slave'),document.all('price'))">
   <option value="0">请选择</option>
   <option value="11">豆芽</option>
   <option value="10">对虾</option>
   <option value="9">鲤鱼</option>
  </select>
  单位:
  <select id="slave">
  <option value="0">请选择</option>
  </select>
  价格:
  <input type="text" value="" name="price">
 </td></tr>
 </table>
</body>
</html>
<!--选择数据开始-->
<xml id=xmldata><DSTreeRoot name="root" treeId="123" id="-1">
<DSTree1 text="请选择" id="0">
 <DSTree2 text="请选择" price_buy="0.0" id="0"/>
</DSTree1>
<DSTree1 text="豆芽" id="11">
 <DSTree2 text="袋" id="1" rate="0.0" barcode="ttt" price_buy="1.5" price_sale="3.5" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="1"/>
 <DSTree2 text="件" id="2" rate="0.1" barcode="ttt" price_buy="2.0" price_sale="4.0" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="0"/>
 <DSTree2 text="个" id="3" rate="0.0" barcode="ttt" price_buy="3.0" price_sale="5.0" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="0"/>
</DSTree1>
<DSTree1 text="对虾" id="10">
 <DSTree2 text="辆" id="4" rate="0.0" barcode="ttt" price_buy="4.0" price_sale="6.0" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="1"/>
</DSTree1>
<DSTree1 text="鲤鱼" id="9">
 <DSTree2 text="瓶" id="5" rate="0.0" barcode="ttt" price_buy="5.0" price_sale="7.0" price_menber="0.0" price1="0.0" price2="0.0" price3="0.0" price4="0.0" price5="0.0" ifdefault="1"/>
</DSTree1>
</DSTreeRoot>
</xml>

分享到:
评论

相关推荐

    DHTML XML 实用手册(标识 语法 函数 方法 介绍)

    这两本手册结合在一起,将为读者提供一个全面了解DHTML和XML如何协同工作的视角,帮助开发者更好地掌握动态网页的构建和数据管理。通过深入学习和实践,你可以创建更先进、更灵活的网页应用,提升用户的在线体验。在...

    DHTML 手册 DHTML 手册

    在DHTML中,CSS可以实现动态效果,如动画、过渡和变形,让元素在页面上以各种方式移动、改变大小或改变颜色,为用户提供视觉上的吸引力。 **JavaScript** JavaScript 是一种脚本语言,它是实现DHTML动态功能的核心...

    html xml xhtml dhtml

    DHTML(Dynamic HTML)是动态HTML的缩写,它是指通过结合HTML、CSS(Cascading Style Sheets)、JavaScript或其他脚本语言以及DOM(Document Object Model)实现的交互式和动画效果的网页技术。DHTML使得网页可以...

    CSS手册、DHTML、XML、SQL压缩大包 

    DHTML(Dynamic HTML)是一种技术集合,它结合了HTML、CSS、JavaScript以及DOM(Document Object Model),使得网页可以动态地改变内容、结构和样式。DHTML手册通常会涵盖事件处理、动态效果、Ajax异步通信等关键点...

    dhtml教程详解(html/css/js)

    此外,它还可以通过Ajax(异步JavaScript和XML)技术与服务器进行数据交换,实现页面无刷新更新。 **DOM:页面操作接口** DOM是HTML和XML文档的编程接口,它将整个文档结构化为一个节点树。JavaScript通过DOM API...

    CSS、DHTML、XMLDOM、T-SQL、XPath、正则表达式等.chm文件

    通过DHTML,用户可以在不刷新整个页面的情况下更新部分内容,实现如下拉菜单、滑动图像、弹出窗口等动态效果,提升了用户的浏览体验。 3. XMLDOM(XML文档对象模型):XMLDOM是XML文档的一种编程接口,它允许程序员...

    Dhtml手册(Dhtml手册.chm)

    它结合了HTML、CSS(层叠样式表)、JavaScript以及DOM(文档对象模型)等技术,使得网页可以实现动态交互效果,无需刷新页面就能更新内容。本Dhtml手册.chm文件是一个关于DHTML的综合参考资料,对于想要深入了解和...

    DHTML源代码和效果

    它可以修改HTML元素的属性,改变CSS样式,或者通过AJAX(异步JavaScript和XML)获取和更新服务器数据,从而实现动态效果。 4. DOM(文档对象模型):DOM是HTML和XML文档的编程接口,它将文档结构化为一棵树形结构,...

    DHtml的详细帮助文档

    虽然DHTML主要关注用户界面的动态性,但AJAX技术是实现页面局部更新的关键。AJAX允许在后台与服务器通信,获取数据后更新DOM,实现无刷新页面交互。 7. **DHTML的挑战与兼容性** DHTML的效果依赖于浏览器的支持...

    DHTML手册 DHTML手册

    DHTML,全称为Dynamic HTML,是一种利用HTML、CSS(层叠样式表)和JavaScript等技术在浏览器端实现页面动态效果的技术集合。它使得网页能够具备交互性、响应性和动画效果,而无需刷新整个页面。DHTML是90年代末期...

    Dhtml帮助文档 (Dhtml帮助文档)

    DHTML(Dynamic HTML)是一种在网页上实现动态交互效果的技术集合,它结合了HTML、CSS、JavaScript以及DOM(Document Object Model)等技术,使得网页内容能够实时更新、动态交互,而无需重新加载整个页面。DHTML的...

    DHTML动态网页设计与制作

    DHTML结合CSS可以实现动态样式变化,比如元素的渐变动画、定位调整等,使网页视觉效果更加丰富。 三、JavaScript脚本 JavaScript是DHTML的核心驱动力,用于处理用户交互、改变HTML内容和CSS样式。通过事件监听、...

    DHTML动态网页设计PPT教程

    DHTML(Dynamic HTML)是一种结合了HTML、CSS、JavaScript以及DOM(Document Object Model)的技术,使得网页能够实现动态交互和更新,而无需刷新页面。 首先,我们来看看CSS(Cascading Style Sheets)部分。CSS是...

    动态DHTML参考手册

    8. **Ajax**:异步JavaScript和XML,虽然不直接包含在DHTML概念中,但与DHTML密切相关,通过Ajax可以实现页面无刷新的数据交换,进一步提升网页的动态性能。 9. **框架和库**:现代Web开发中,如jQuery、React、Vue...

    DHTML动态网页设计与制作(PDG).rar

    DHTML的核心在于结合HTML的结构、CSS的样式和JavaScript的交互性,实现页面元素的动态交互和动画效果。 **CSS(层叠样式表)**是用于控制网页元素外观的关键工具。通过定义颜色、字体、布局和响应式设计,CSS使网页...

    DHTML手册 DHTML

    **DHTML(Dynamic HTML)**是一种用于创建交互式和动态网页的技术,它结合了HTML、CSS、JavaScript以及DOM(文档对象模型)等技术,使得网页不仅具有静态展示内容的能力,还能实现动态效果和用户交互。 **HTML...

    DHTML+CSS2+JAVASCRIPT+XML

    在IT领域,DHTML、CSS2、JavaScript和XML是构建现代网页和应用程序的重要技术。这些技术的结合使得开发者能够创建出交互性强、表现丰富的网络体验。 **DHTML(Dynamic HTML)** 是一种在HTML文档中引入动态效果的...

Global site tag (gtag.js) - Google Analytics