Javascript 文本框中的Html 5 x 5矩阵状控件

我想在网格中创建一个简单的html表，其值为1到25，并以矩阵/网格的方式排序。 我希望网格以一种类似jQueryUIDateTime控件的方式显示

@for(int i =0;i<5;i++){ for(int j=0;j<5;j++){
<input type="button" id="foo">
if(j==4){
<br/>

}

}

@for（inti=0；i类似这样的东西：？（手写-未经测试）

型号：

public class MyModel
{
    [UIHint("MyCustomEditorTemplateType")]
    public int MyField { get; set; }
}

视图：

编辑器模板：

@model string

@Html.TextBoxFor(m => m, new { @class = "forpopupcontrol" })
<div id="@(string.Format("{0}_container", Html.IdFor(m => m)))" style="display:none">
    @* code build table here *@
</div>

@模型字符串
@TextBoxFor（m=>m，new{@class=“forpopupcontrol”}）
@*这里是代码生成表*@

JS:


$（函数（）
{
$（'.forpopupcontrol'）.focus（函数（）
{
$（'#'+$（this.attr（'id'）+'_Container'）.show（）；
}).blur（函数（）
{                
$（'#'+$（this.attr（'id'）+'_Container'）.hide（）；
});
}        
问题是如何显示n隐藏，就像我们在定制的madal类型对话框中获得日历控件一样。
@model string

@Html.TextBoxFor(m => m, new { @class = "forpopupcontrol" })
<div id="@(string.Format("{0}_container", Html.IdFor(m => m)))" style="display:none">
    @* code build table here *@
</div>

<script>
    $(function()
    {
        $('.forpopupcontrol').focus(function()
        {
            $('#' + $(this).attr('id') + '_Container').show();
        }).blur(function()
        {                
            $('#' + $(this).attr('id') + '_Container').hide();
        });
    }        
</script>