dynamically build html table on page load

Question

Edit for vhinn

enter image description here

I want it to look like this:

enter image description here

I am trying to build an html table dynamically on pageload with variables from a database.

this is an example strictly html http://jsfiddle.net/jdv590/daCum/1/

code:

    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 side:

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

Try using ListView. It's basically the same thing like Gridview, but on ListView you are freely to style the content unlike in Gridview, it will always be in Table Style. Based on your requirement, you need to design it using DIVs and not Table. — Alvin
– Alvin, Commented Nov 10, 2011 at 13:12

Alvin · Accepted Answer · 2011-11-10 01:24:07Z

3

in your markup:

<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>

code-behind:

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

answered Nov 10, 2011 at 1:24

Alvin

9955 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

JDV590 Over a year ago

this is ALMOST exactly what I am looking for. The only thing is in addition to the template field I am still getting the data in separate fields. check the edit for a photo

Phill Over a year ago

@mumis2012 - There's a attribute on the grid, something like "AutoGenerateColumns" set that to false.

JDV590 Over a year ago

@Phill that did it. thanks. one more thing. I now have one long column with about 20 rows. I would like to have the grid be 3 columns across, then after 3 cells in a row start a new line. any idea how to do this?

Phill Over a year ago

@mumis2012 - you will need to use the ListView control which allows you to define columns. It's basically exactly the same as what you've done, except for a different purpose, which happens to cater for your scenario.

JDV590 Over a year ago

@Phill any idea how to display an image in the list view layout stored in the access database? aka something like:

<ItemTemplate> <td> <img src="<%# Eval("picture")%>" alt="headshot" /><br /><br /> <br /> Hometown: <%# Eval("Hometown")%><br /> Class: <%# Eval("class")%> </td> </ItemTemplate>

|

mccow002 · Accepted Answer · 2011-11-09 23:10:38Z

1

You familiar with DataGrids?

Client Side:

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

Server Side:

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

There is a lot more you can do with datagrids, but this should be enough to get you started if you decide to go this route.

answered Nov 9, 2011 at 23:10

mccow002

6,9343 gold badges28 silver badges37 bronze badges

Comments

jcmitch · Accepted Answer · 2011-11-09 23:10:53Z

0

Are you asking how to do this in javascript if you already have the data? If so an example would be kinda like this:

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

answered Nov 9, 2011 at 23:10

jcmitch

2,2169 gold badges28 silver badges34 bronze badges

Collectives™ on Stack Overflow

dynamically build html table on page load

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related