JSON 无中生有创建节点方式书城案例

问题: 将json数据转成js对象
从对象中拿数据
如何避免通过搜索(如当前节点.parentNode)获取的节点，同一时刻，页面
上只能出现一个的情况
无中生有创建div时，如何设置样式位置
利用标签的行、块属性设置样式位置

代码示例：

<html><head><meta charset="utf-8"><title></title><style>*{margin:0px;padding:0px;}.bookInfo{width:25%;display: inline-block;padding: 20px 0px;text-align: center;}.shoppingCar{width:88%;margin:0px auto;border:solid 5px skyblue;border-radius: 25px;min-height:25px;min-height: 30px;background-color: orange;}</style></head><body><h1 align="center">书城</h1><hr /><div class="box"></div><hr /><div class="shoppingCar"></div><script>var data = '{' +'"img":["d1.jpg","d2.jpg","d3.jpg","d4.jpg","d5.jpg","d6.jpg","d7.jpg","d8.jpg"],' +'"name":[' +'"仍然",' +'"此刻花开（一本精美绝伦的手工纸雕书）",' +'"进击的局座：悄悄话（当当独家附赠精美小册子）",' +'"股票短线交易的24堂精品课（第二版）",' +'"锦绣旗袍 (全二册)",' +'"大暴雪",' +'"男孩的冒险书（少儿绘图版，全三册）",' +'"古龙作品集套装72册（大陆正版合法授权）"],' +'"author":[' +'"庆山",' +'"徐静",' +'"徐静",' +'"徐静",' +'"徐静",' +'"徐静",' +'"徐静",' +'"徐静"], ' +'"newprice":["63.60","33.30","12","15","20","3","8","0.6"],' +'"oldprice":["660","330","120","105","200","30","80","6000"]' +'}';//将字符串转换成js对象var jsonObj =JSON.parse(data);var box=document.querySelector(".box");var shoppingCar=document.querySelector(".shoppingCar");for(var i=0;i<jsonObj.img.length;i++){//动态生成来放图片的div,和图片var div=document.createElement("div");var img=document.createElement("img");img.src='img/'+jsonObj.img[i];div.setAttribute('class','bookInfo');div.appendChild(img);//添加书名var p_bookName=document.createElement("p");p_bookName.innerHTML=jsonObj.name[i];div.appendChild(p_bookName);//添加作者var p_author=document.createElement("p");p_author.innerHTML=jsonObj.author[i];div.appendChild(p_author);//添加价格var p_price=document.createElement("p");//添加新价格var n_price=document.createElement("span");n_price.setAttribute("style","margin-right:5px");n_price.innerHTML='$'+jsonObj.newprice[i];//添加旧价格var o_price=document.createElement("del");o_price.innerHTML='$'+jsonObj.oldprice[i];p_price.appendChild(n_price);p_price.appendChild(o_price);div.appendChild(p_price);//添加购物车按钮var btn_add=document.createElement("button");btn_add.innerHTML="添加到购物车";div.appendChild(btn_add);//添加点击事件btn_add.onclick=function(event){var event=event||window.event;//通过搜索获取的节点同一时刻，页面上只能显示一个var parentNode=this.parentNode;//使用克隆可避免通过子节点搜索出来的父节点，在同一时刻页面上只能显示一个var new_node=parentNode.cloneNode(true);new_node.removeChild(new_node.lastChild);shoppingCar.appendChild(new_node);}box.appendChild(div);}</script></body>
</html>

JSON 无中生有创建节点方式书城案例相关推荐

JavaScript 节点概述、父节点 parentNode、子节点children、兄弟节点、创建节点添加节点、删除节点、复制拷贝节点 ★案例★
一般节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性元素节点 nodeType 为 1 属性节点 nodeType 为 2 文本节 ...
【Java】JSON数据交换格式及其使用案例（聊天工具）
数据交换格式主要分为纯文本格式,XML格式和JSON格式.其中纯文本格式是一种简单的,无格式的数据交换方式:而XML格式和JSON格式可以带有描述信息,它们叫做"自描述的"结构化文 ...
MySQL为JSON字段创建索引（Multi-Valued Indexes 多值索引）
版权说明: 本文由博主keep丶原创,转载请注明出处. 原文地址: https://blog.csdn.net/qq_38688267/article/details/119383103 环境说明: ...
可覆写的函数与创建节点
以下所描述的这些可覆写的函数,能够应用于节点: GDScript func _enter_tree():# When the node enters the _Scene Tree_, it be ...
DOM——创建节点及节点属性与内部插入append()和appendTo()
创建节点及节点属性与内部插入append()和appendTo() 1 创建流程创建节点(常见的元素.属性和文本) 添加节点的一些属性加入到文档中 2 流程中涉及的方法创建元素docum ...
Neo4j从mysql读取数据_[bigdata-086] python3+neo4j 从mysql数据库读取记录然后创建节点和关系写入到neo4j...
1. 测试 1.1web界面 http://tz211:7474/browser/ 在这里执行 MATCH (n) RETURN n,能看到节点和相互关系一共是3个节点,6个相互关系 1.2 在2 ...
通过json动态创建控制器
通过字符串来创建控制器如果通过字符串来创建控制器不可以直接通过类型来获取对应的类因为Swift有命名空间,类前需要加上命名空间的名称获取命名空间的名称 let executable = NSB ...
jQuery之创建节点
jQuery之创建节点 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Visual S ...
JQueryDOM之创建节点
创建节点创建元素节点创建元素节点并且把节点作为<ul>元素的子节点添加到DOM节点树上.先创建元素点,创建元素节点使用Jquery的工厂函数$()来完成,格式如下:$(html),该方 ...
返回ajax有几种方式,java ajax返回 Json 的几种方式
方式 1. : 自写代码转 Json 需要 HttpHttpServletRequest request HttpServletResponse response 后台 : @RequestMap ...

JSON 无中生有创建节点方式书城案例

JSON 无中生有创建节点方式书城案例相关推荐

最新文章

热门文章