强烈求助！！JS 动态循环创建DIV

JavaScript010

强烈求助！！JS 动态循环创建DIV,第1张

1、新建一个html文件，命名为test.html。

2、在test.html文件内，引入jquery.min.js库文件，成功加载该文件，才能使用jquery中的方法。

3、在test.html文件内，使用div标签创建一行文字，并设置其class为bg，主要用于下面通过该class来获得div对象。

4、在test.html文件内，在div标签内，通过style来设置div的背景颜色，定义其背景颜色为红色，文字颜色为白色。

5、在test.html文件内，使用button标签创建一个按钮，给button按钮绑定onclick点击事件，当按钮被点击时，执行editbg()函数。

6、在js标签内，创建一个editbg()函数，在函数内，使用$符通过div的class属性值（bg）来获得div对象，再使用css（）方法设置background属性为blue，即更改背景颜色为蓝色。

思路：实现这个方法主要用到了setAttribute方法

<title>通过选择项显示不同的结果</title>  

<head>  

<script type="text/JavaScript">  

function showdiv()  

{  

    var doc=document  

    var citytext=doc.getElementById("city").value  

    var div1=doc.getElementById("div1")  

    var div2=doc.getElementById("div2")  

    var div3=doc.getElementById("div3")  

    switch (citytext)  

    {  

        case "广州":            

            div1.setAttribute("style","display")             

            div2.setAttribute("style","display:none")  

            div3.setAttribute("style","display:none")  

            doc.getElementById("text1").value=citytext  

            break  

        case "南昌":  

            div1.setAttribute("style","display:none")  

            div2.setAttribute("style","display")  

            div3.setAttribute("style","display:none")  

            doc.getElementById("text2").value=citytext  

            break  

        case "沈阳":  

            div1.setAttribute("style","display:none")  

            div2.setAttribute("style","display:none")  

            div3.setAttribute("style","display")  

            doc.getElementById("text3").value=citytext  

            break  

    }  

}  

</script>  

</head>  

<body>  

<select title="城市" id="city" onchange="showdiv()">  

<option selected value="广州">广州</option>  

<option value="南昌">南昌</option>  

<option value="沈阳">沈阳</option>  

</select>  

<div  id="div1" style="display:none"  >您选择了广东的省会<input type="text" id="text1" value=""/></div>  

<div  id="div2" style="display:none"  >您选择了江西的省会<input type="text" id="text2" value=""/></div>  

<div  id="div3" style="display:none"  >您选择了辽宁的省会<input type="text" id="text3" value=""/></div>  

</body>  

</html></pre><pre class="html" name="code"> </pre><pre class="html" name="code"> </pre>  

<pre></pre>

效果图：

定义和用法

setAttribute() 方法添加指定的属性，并为其赋指定的值。

<div id="abc"></div>

<script>

//你也没说一下php返回的数据结构究竟是怎样的。我假定是下面这样的:

var res=[

    {a:1,b:2,c:23,d:34},

    {a:231,b:2,c:39,d:14},

    {a:1,b:2,c:453,d:784},

    {a:981,b:1221,c:33,d:124},

    {a:1,b:2,c:334,d:41243},

    {a:12341,b:2,c:563,d:47},

    {a:5121,b:1232,c:433,d:24}

]

document.getElementById("abc").innerHTML=res.map(function(o){

    var html=""

    html+='<div class="p-l-20 p-r-20 p-b-10 p-t-10 b-b b-grey">'

    html+='<div class="pull-left">'

    html+='<p class="text-important">'+o.a+'</p>'

    html+='<p class="text-black">'+o.b+'</p>'

    html+='</div>'

    html+='<div class="pull-right">'

    html+='<p class="text-black">'+o.c+'</p>'

    html+='<span class="label label-success" style="vertical-align: bottom" >'+o.d+'</span>'

    html+='</div>'

    html+='<div class="clearfix"></div>'

    html+='</div>'

    return html

}).join("")

</script>