Question

我试图查看其他帖子，但没有人按我想要的方式帮助我。我正在构建一个表，我需要用一些数据来填充它。这是我的数据（或其中的一部分）：

 var vistorias = [
        { data: '15/05/2015', cliente: 'Viceri', prestador: 'Joaquim', tipo: 'Empresarial simples', empresaPrestadora: 'VistGroup', parecer: 'Bom' },
        { data: '10/05/2015', cliente: 'Krupp', prestador: 'Rafael', tipo: 'Maquinas', empresaPrestadora: 'Vistoriers', parecer: 'Execelente' },
        { data: '24/03/2015', cliente: 'Itautec', prestador: 'Thiago', tipo: 'Empresarial simples', empresaPrestadora: 'VistGroup', parecer: 'Bom' }];

这是我的表：

<table class="table table-striped table-bordered table-hover" id="sample_1">
    <thead>
        <tr>
            <th>
                Data
            </th>
            <th>
                Cliente
            </th>
            <th>
                Prestador
            </th>
            <th>
                Tipo
            </th>
            <th>
                Empresa Prestadora
            </th>
            <th>
                Parecer da Vistoria
            </th>
        </tr>
    </thead>
    <tbody id="TabelaVistorias"></tbody>
</table>

以下是我现在尝试使用的代码：

$.each(vistorias, function (vistorias) {
            var nTr = "<tr>"
            nTr += "<td><p>" + vistorias[0] + "</p></td>";
            nTr += "<td><p>" + vistorias[1] + "</p></td>";
            nTr += "<td><p>" + vistorias[2] + "</p></td>";
            nTr += "<td><p>" + vistorias[3] + "</p></td>";
            nTr += "<td><p>" + vistorias[4] + "</p></td>";
            nTr += "<td><p>" + vistorias[5] + "</p></td>";
            nTr += "</tr>";

            $(nTr).appendTo('#TabelaVistorias');
        });

他们是$Doc.ready内的全部（数据和JS代码）。我知道这很简单，但我无法做到。

Answer 1

在respond_to do |format| format.js format.html end回调函数中，第一个参数必须为$each，第二个参数为index

object

Working Demo

Answer 2

每个参数都是索引和当前索引的值。您使用索引作为一个没有意义的数组。您需要使用第二个参数，并且需要引用对象上的键。

 $.each(vistorias, function (index, v) {
        var nTr = "<tr>"
        nTr += "<td><p>" + v.data + "</p></td>";
        nTr += "<td><p>" + v.cliente + "</p></td>";
        nTr += "<td><p>" + v.prestador + "</p></td>";
        nTr += "<td><p>" + v.tipo + "</p></td>";
        nTr += "<td><p>" + v.empresaPrestadora + "</p></td>";
        nTr += "<td><p>" + v.parecer + "</p></td>";
        nTr += "</tr>";

        $(nTr).appendTo('#TabelaVistorias');
    });

Answer 3

我认为问题是你试图访问数组中的对象，就好像它们是数组一样。您还有回调参数不正确。试试这个：

$.each(vistorias, function (index, vistoria) {
        var nTr = "<tr>"
        nTr += "<td><p>" + vistoria.data + "</p></td>";
        nTr += "<td><p>" + vistoria.cliente + "</p></td>";
        nTr += "<td><p>" + vistoria.prestador + "</p></td>";
        nTr += "<td><p>" + vistoria.tipo + "</p></td>";
        nTr += "<td><p>" + vistoria.empresaPrestadora + "</p></td>";
        nTr += "<td><p>" + vistoria.parecer + "</p></td>";
        nTr += "</tr>";

        $(nTr).appendTo('#TabelaVistorias');
    });

Answer 4

$.each(vistorias, function (vistorias)

尝试将参数名称调整为唯一，或与原始数组或对象的变量名称不同。 vistorias处的function (vistorias)将是索引或数组或对象的键;不反对自己。 $.each()的第二个参数是value或object属性。

jQuery.each( array, callback )

数组

类型：数组

要迭代的数组。

<强>回调

类型：函数（整数indexInArray，对象值）

将在每个对象上执行的函数。

尝试在初始$.each()

内迭代的对象上使用嵌套$.each()

var tbody = $("#TabelaVistorias");

$.each(vistorias, function(key, value) {
  var tr = $("<tr />");
  $.each(value, function(k, v) {
    $("<td />", {
      html: "<p>" + v + "</p>"
    }).appendTo(tr)
  });
  tbody.append(tr)
})

＆＃13;

var vistorias = [{
  data: '15/05/2015',
  cliente: 'Viceri',
  prestador: 'Joaquim',
  tipo: 'Empresarial simples',
  empresaPrestadora: 'VistGroup',
  parecer: 'Bom'
}, {
  data: '10/05/2015',
  cliente: 'Krupp',
  prestador: 'Rafael',
  tipo: 'Maquinas',
  empresaPrestadora: 'Vistoriers',
  parecer: 'Execelente'
}, {
  data: '24/03/2015',
  cliente: 'Itautec',
  prestador: 'Thiago',
  tipo: 'Empresarial simples',
  empresaPrestadora: 'VistGroup',
  parecer: 'Bom'
}];

var tbody = $("#TabelaVistorias");

$.each(vistorias, function(key, value) {
  var tr = $("<tr />");
  $.each(value, function(k, v) {
    $("<td />", {
      html: "<p>" + v + "</p>"
    }).appendTo(tr)
  });
  tbody.append(tr)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table class="table table-striped table-bordered table-hover" id="sample_1">
  <thead>
    <tr>
      <th>
        Data
      </th>
      <th>
        Cliente
      </th>
      <th>
        Prestador
      </th>
      <th>
        Tipo
      </th>
      <th>
        Empresa Prestadora
      </th>
      <th>
        Parecer da Vistoria
      </th>
    </tr>
  </thead>
  <tbody id="TabelaVistorias"></tbody>
</table>

＆＃13;

使用Javascript对象填充表

4 个答案: