create grid container in JavaScript

Question

I'm new in javascript, is it possible to create class container like "Grid" in WPF? it's desirable without jQuery etc. I need create container like Grid in XAML code below.

     <Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid x:Name="grid1">
    <Grid.RowDefinitions>
        <RowDefinition Height="30*"></RowDefinition>
        <RowDefinition Height="30*"></RowDefinition>
        <RowDefinition Height="30*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100*">
        </ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid x:Name="Grid2" Grid.Row="0" Grid.Column="0"></Grid>
</Grid>

Did you have a look here: stackoverflow.com/questions/14462931/… There are also vendor specific grid tags that can be used such as ms-grid msdn.microsoft.com/en-us/library/ie/hh673533(v=vs.85).aspx but its currently only supported in IE caniuse.com/#search=grid . If it is for windows store apps here is a html and xaml comparison: irisclasson.com/2013/01/25/… . — Iris Classon
– Iris Classon, Commented Aug 28, 2013 at 9:09

Martin · Accepted Answer · 2013-08-28 09:31:23Z

0

You can use:

HTML markup:

<table id="grid1">
        <tr class="row30">
           <td class="column100">
               <table id="Grid2"></table>
           </td>
           <td></td>
        </tr>
        <tr class="row30">
           <td class="column100"></td>
           <td></td>
        </tr>
        <tr class="row30">
           <td class="column100"></td>
           <td></td>
        </tr>
    </table>

CSS:

.row30{ height: 30px; }
.column100 { width: 100px; }

answered Aug 28, 2013 at 9:31

Martin

3,3461 gold badge29 silver badges50 bronze badges

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

Comments

Mx. · Accepted Answer · 2013-08-28 09:41:42Z

In HTML only the Table element provides similar behaviour. It needs to be extended with css but then you can create a gridlike experience. If you want more functionality such as sorting, searching and paging I can recommend jQuery DataTables. It is free, easy to use and fast.

Here's some plain JavaScript to crate a table

var container = document.getElementById("container");
var newInner = "<table>";
newInner += "<thead>";
newInner += "<tr>";
newInner += "<th>Column1</th>";
newInner += "<th>Column2</th>";
newInner += "</tr>";
newInner += "</thead>";
newInner += "<tbody>";
for (var i=0;i< 100;i++)
{
    newInner += "<tr>";
    newInner += "<td>Content" + i + "_1</td>";
    newInner += "<td>Content" + i + "_2</td>";    
    newInner += "</tr>";
}
newInner += "</tbody>";
newInner += "</table>";
container.innerHTML = newInner;

I've also created a Fiddle where you can check out jQuery Datatables

Collectives™ on Stack Overflow

create grid container in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related