如何在HTML中制作动态列表 [英] How to make dynamic list in HTML

问题描述

你好

在HTML文件中，我有一个列表正在重复创建列表，如下所示：

Hello
in HTML file, I have a list that is being repeated to create the list as shown below:

<div class="item">
  <div class="gallery-carousel-item">                              
    
      
        <div class="hover-mask-container">
           <div class="hover-zoom">
            <a href="project-single.html">Product A
              <span class="icon-container">
                
              </span>
            </a>
           </div>
        </div> 
    
  </div>
</div>
<!-- The code will be repeated here -->
<div class="item">
  <div class="gallery-carousel-item">                              
    
      
        <div class="hover-mask-container">
           <div class="hover-zoom">
            <a href="project-single.html">Product B
              <span class="icon-container">
                
              </span>
            </a>
           </div>
        </div>
    
  </div>
</div>

如何根据我使用JavaScript在sql数据库中的记录动态创建此列表？

在此先感谢



我的尝试：



我尝试了jqxWidjets，但它不会创建我想要的UI。我可以使用asp：ListView控件，但我想使用HTML标签。

例如：

How can I create this list dynamically based on my records in sql data base using JavaScript ?
Thanks in Advance

What I have tried:

I have tried jqxWidjets but it will not make the UI that i want. I have just can make it using asp:ListView control but I want to make it using HTML tags.
for example:

Try it


function myFunction() {
    var x = document.createElement("UL");
    x.setAttribute("id", "myUL");
    document.body.appendChild(x);

    var a = ["Alpha","Beta","Gama"];
    for(i=0 ; i<=2 ; i++)

    {

       var y = document.createElement("LI");

       var t = document.createTextNode(a[i]);

       y.appendChild(t);

       document.getElementById("myUL").appendChild(y);

    }

}

产生：

Alpha

Beta

Gama



基于a变量数据（JSON数据），如何根据SQL服务器数据库记录创建提到的列表

Produces:
Alpha
Beta
Gama

based on "a" variables data(JSON data), How can I make the mentioned List based on SQL server data base records

推荐答案

这是一个例子：c＃asp.net

Jquery示例



怎么样作品：

获取清单



添加：

Json.NET



如何添加...

添加Newton json





.js

Here's an example: c# asp.net
Jquery Examples

How it works:
Get List

Add this:
Json.NET

How to add...
Add Newton json


.js

function GetList() {

。 ajax（{
async： false ，
type： POST，
contentType： application / json; charset = utf-8，
url： ExampleList.aspx / GetList，
dataType： json，
成功： function （data，textStatus）{
if （textStatus == success）{
var datos = jQuery.parseJSON（data .d）;

.ajax({ async: false, type: "POST", contentType: "application/json; charset=utf-8", url: "ExampleList.aspx/GetList", dataType: "json", success: function (data, textStatus) { if (textStatus == "success") { var datos = jQuery.parseJSON(data.d);

（ ＃List）。 html（' '）;
var list = ' < ul>'

("#List").html(''); var list = '<ul>'

这篇关于如何在HTML中制作动态列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！