динамически создавать HTML-таблицы при загрузке страницы

Question

Редактировать для vhinn

Я хочу, чтобы это выглядело так:

Я пытаюсь построитьHTML таблица динамически при загрузке страницы с переменными из базы данных.

это пример строго HTML http://jsfiddle.net/jdv590/daCum/1/

код:

    Private Sub brothersgird()
        Dim html As New StringBuilder
        Dim sql As String = "select Name, Hometown, Picture, Class from brothers",
            connstring As String = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=~/App_Data/Members.accdb;Persist Security Info=False;",
            conn As New OleDbConnection(connstring),
         myCommand As New OleDbCommand(sql, conn),
         namevar As String,
        classvar As String,
        hometownvar As String
        Dim x As Integer = 1
        conn.Open()
        Dim dr As OleDbDataReader = myCommand.ExecuteReader
        html.Append("<table>")
        Do While dr.Read
            ' imagevar = dr("Picture")
            namevar = dr("Name")
            classvar = dr("Class")
            hometownvar = dr("Hometown")
            html.Append("<tr>")
            Do While x < 4
                html.Append("<td><p>" & namevar & "<br /> Hometown: " & hometownvar & "<br /> Class: " & classvar & "</p></td>")
                x = x + 1
            Loop
            html.Append("</tr>")
            x = 0
        Loop
        html.Append("</table>")
        dr.Close()
        conn.Close()
    End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        brothersgird()
'write to panel maybe with this idea:
seniorpanel.html=html ???

    End Sub

сторона aspx:

<asp:Panel ID="seniorpanel" runat="server">
    </asp:Panel>

Answer 1

в вашей разметке:

<asp:Panel ID="seniorpanel" runat="server">
    <asp:GridView ID="brothersgird" runat="server" ShowHeader="false">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <p>
                        <%# Eval("Name")%><br />
                        Hometown: 
                        <%# Eval("Hometown")%><br />
                        Class: 
                        <%# Eval("Hometown")%>
                    </p>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</asp:Panel>

код-позади:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        brothersgird.DataSource = SelectBrothers()
        brothersgird.DataBind()
    End If
End Sub

Private Function SelectBrothers() As DataTable
    Dim sql As String = "select Name, Hometown, Picture, Class from brothers"
    Dim connstring As String = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=~/App_Data/Members.accdb;Persist Security Info=False;"
    Dim conn As New OleDbConnection(connstring)

    Dim ds As New DataSet
    Dim adapter As New OleDbDataAdapter()
    adapter.SelectCommand = New OleDbCommand(sql, conn)
    adapter.Fill(ds)

    Return ds.Tables(0)
End Function

Answer 2

Вы знакомы с DataGrids?

Клиентская сторона:

<asp:DataGrid runat="server" id="dataTable">
</asp:DataGrid>

Сторона сервера:

//Get your data table from the database - let's say the variable is called dt
dataTable.DataSource = dt
dataTable.DataBind()

Вы можете сделать гораздо больше с сетями данных, но этого должно быть достаточно, чтобы начать работу, если вы решите пойти по этому маршруту.

Answer 3

Вы спрашиваете, как сделать это в javascript, если у вас уже есть данные? Если это так, пример будет выглядеть примерно так:

var row = document.createElement("TR");
var th1 = document.createElement("TH");
row.appendChild(th1);