【问题标题】:Append object to a table template using jQuery Template使用 jQuery 模板将对象附加到表格模板
【发布时间】:2012-03-20 00:48:55
【问题描述】:

我得到了这个对象

var data = [
{
    "cedula": "v-12334445",
    "nombres": "ALECIO NORBES EDUARDO RAMON",
    "id_school": "5"
},
{
    "cedula": "v-17322147",
    "nombres": "RAMIREZ CARRERO JOSE GERONIMO",
    "id_school": "1"
}

];

我正在使用 jQuery 模板将这些数据呈现到表格中,我将表格模板变成了这样的 var:

var reset_config_form = "<div>\
                      <table id='reset_user_template' class='table table-bordered'>\
                        <thead>\
                          <tr>\
                            <th><a>cédula</a></th>\
                            <th><a>nombres</a></th>\
                            <th><a>escuela</a></th>\
                            <th><a>acciones</a></th>\
                          </tr>\
                        </thead>\
                        <tbody>\
                        </tbody>\
                      </table>\
                      </div>";

而行模板如下:

var reset_config_form_rows = "<tr>\
                                 {{each d}}\
                                  <td>${cedula}</td>\
                                  <td>${nombres}</td>\
                                  <td>${id_school}</td>\
                                  <td id='acciones'></td>\
                                {{/each}}\
                              </tr>";

为了渲染数据,我正在渲染模板:

$(reset_config_form_rows).tmpl(d).appendTo('#reset_user_template');

我在一行中获取数据,每个都不起作用。

生成的html

【问题讨论】:

  • 生成的html怎么样?你看过吗?

标签: jquery templates jquery-templates


【解决方案1】:

这是因为你的循环是围绕你的TD 而不是你的TR。这就是您看到列重复的原因。

试试这个

var reset_config_form_rows = "{{each d}}\
                                 <tr>\
                                  <td>${cedula}</td>\
                                  <td>${nombres}</td>\
                                  <td>${id_school}</td>\
                                  <td id='acciones'></td>\
                                </tr>\
                              {{/each}}";

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-08-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-09-02
    相关资源
    最近更新 更多