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>
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; }
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.