與AJAX表格中的「TBODY」更改HTML內容調用

我在PHP函數返回一個像這樣的JSON：與AJAX表格中的「TBODY」更改HTML內容調用

{"tableRow":[ {"tipo":"Noche"},{"patente":"XZ7410"},{"nombre":"Marcela Bien"}, 
       {"revisado":0},{"id_registro":"10"}, 
       {"tipo":"Vespertino"},{"patente":"EW3651"},{"nombre":"Alexis Diaz"}, 
       {"revisado":1},{"id_registro":"9"} ] 
}

也有這個表默認創建一些HTML內容：

<table class="table table-condensed table-striped table-hover table-bordered pull-left" id="data-table">  
    <thead> 
    <tr> 
     <th>Turno</th> 
     <th>ID Máquina</th> 
     <th>Operador</th> 
     <th>Semáforo</th> 
     <th>&nbsp;</th> 
    </tr> 
    </thead> 
    <tbody id="data-update"> 
    <tr> 
     <td>Noche</td> 
     <td>XZ7410</td> 
     <td>Marcela Bien</td> 
     <td><img src="/monitor/web/images/bullet_red.png" /></td> 
     <td><a class="btn btn-success btn-mini" href="/monitor/web/frontend_dev.php/ver-detalles/10">Ver detalles</a></td> 
    </tr> 
    <tr> 
     <td>Vespertino</td> 
     <td>EW3651</td> 
     <td>Alexis Diaz</td> 
     <td><img src="/monitor/web/images/bullet_orange.png" /></td> 
     <td><a class="btn btn-success btn-mini" href="/monitor/web/frontend_dev.php/ver-detalles/9">Ver detalles</a></td> 
    </tr> 
    </tbody> 
</table>

我想更新＃數據更新HTML內容與PHP中生成的一個分給jQuery的作爲JSON，所以我寫了這個代碼：

$(document).ready(function() { 
    setInterval(function() { 
    $.ajax({ 
     type: 'get', 
     url: '<?php echo url_for('dashboard/BuildAjax') ?>', 
     dataType: 'json', 
     success: function(data) { 
      var newRows; 
      for (var i in data.tableRow) { 
       newRows += "<tr><td>" + data.tableRow[i].tipo + "</td>" 
       newRows += "<td>" + data.tableRow[i].patente + "</td>" 
       newRows += "<td>" + data.tableRow[i].nombre + "</td>" 
       newRows += "<td>" + data.tableRow[i].revisado + "</td>" 
       newRows += "<td>" + data.tableRow[i].id_registro + "</td></tr>" 
      } 
      $("#data-update").html(newRows); 
     }, 
     error: function() { 
      alert('<?php echo __('Error al cargar los datos') ?>'); 
     } 
    }); 
    }, 10000); 
});

HTML內容已更改，但方式不正確。這是什麼意思？我得到這樣一個表的結果：

Turno  ID Maquina Operador  Semaforo  
Noche  undefined undefined  undefined 
undefined XZ7410  undefined  undefined 
undefined undefined Marcela Bien undefined 
undefined undefined undefined  1 
undefined undefined undefined  undefined  10 

Vespertino undefined undefined  undefined 
undefined EW3651  undefined  undefined 
undefined undefined Alexis Diaz  undefined 
undefined undefined undefined  0 
undefined undefined undefined  undefined  12

時候應該得到的東西，如：

Turno  ID Maquina Operador  Semaforo 
Noche  XZ7410  Marcela Bien 1   10 
Vespertino EW3651  Alexis Diaz  0   12

有什麼不對？我找不到我犯的錯誤，有什麼幫助或建議？

來源

2013-07-09 Reynier

由於@Bobbe建議，你可以有你的PHP函數輸出json更容易使用。但是，如果僅停留在與現在的輸出，你可以分析它是這樣的：

... 
success: function(data) { 
    var n, newRows = '', tds = data.tableRow; 
    $.each(tds, function(i, td) { 
    n = i % 4; 
    switch(n) { 
     case 0: 
     newRows += '<tr><td>' + td.tipo + '</td>'; 
     break; 
     case 1: 
     newRows += '<td>' + td.patente + '</td>'; 
     break; 
     case 2: 
     newRows += '<td>' + td.nombre + '</td>'; 
     break; 
     case 3: 
     newRows += '<td>' + td.id_registro + '</td></tr>'; 
     break; 
     } 
    }); 
    $("#data-update").html(newRows); 
    ...

來源

2013-07-09 22:07:14

是我有點與JSON tryng擺脫PHP正確的版本，我測試你的代碼，並將其與工作stucked少數黑客;） – Reynier

您的tableRow數據不正確，它只包含一行10個元素。

它不應該是：

{"tableRow":[ 
    { 
     "tipo":"Noche", 
     "patente":"XZ7410", 
     "nombre":"Marcela Bien", 
     "revisado":0, 
     "id_registro":"10" 
    }, 
    { 
     "tipo":"Vespertino", 
     ... 
    } 
]}

來源

2013-07-09 21:47:34

那是因爲你有不良JSON。都需要這樣的

{"tableRow":[ {"tipo":"Noche", 
       "patente":"XZ7410", 
       "nombre":"Marcela Bien", 
       "revisado":0, 
       "id_registro":"10"}, 
       {"tipo":"Vespertino" 
       ,"patente":"EW3651", 
       "nombre":"Alexis Diaz", 
       "revisado":1, 
       "id_registro":"9"} 
      ] 
}

來源

2013-07-09 21:48:17 Bobbe

您的循環使每個項目迭代在JSON像它應該做的事（爲什麼只有一個項目實際上是爲每一行定義的原因，一些結構，該項目是「認爲「是整行數據）....格式化您的JSON，以便每行數據具有不同的項目。

來源

2013-07-09 21:53:19

我看到有兩個問題。

問題1：

您的JSON結構不匹配，你是怎麼想使用它。爲了您的代碼在你期望的方式工作，你的JSON的結構應IKE在此：

{ 
    "tableRow": [{ 
     "tipo": "Noche", 
     "patente": "XZ7410", 
     "nombre": "Marcela Bien", 
     "revisado": 0, 
     "id_registro": "10" 
    }, { 
     "tipo": "Vespertino", 
     "patente": "EW3651", 
     "nombre": "Alexis Diaz", 
     "revisado": 1, 
     "id_registro": "9", 
    }] 
}

最好的解決方案貴方覺得糾正JSON的結構，使每一行是一個對象，但如果你」重新上糾正這種給您現有的JSON結構的意圖，你需要做這樣的事情：

var newRows = '', 
    row = 0, 
    i = 0; 
for (row = 0; row < data.tableRow; row += 1) { 
    if (row % 5 === 0) { 
     newRows += "<tr>"; 
     for (i in data.tableRow[row]) { 
      newRows += "<td>" + data.tableRow[row][i] + "</td>" 
     } 
     newRows += "</tr>"; 
    } 
} 
$("#data-update").html(newRows);

問題2

不是幾乎一樣壞問題1，但你沒有提供初始值爲newRows所以追加字符串它會淨你的結果：

undefined<tr><td>... //rest of string

的解決方案是定義newRows爲空字符串：

var newRows = '';

來源

2013-07-09 22:04:04 pete

與AJAX表格中的「TBODY」更改HTML內容調用

回答

相關問題