使用getJSON中的数据创建表

Question

我通过url发送变量的值以供员工筛选，如下所示：

<form  method="POST" action="">
<ul class="flex-outer">
<li>
<label for="colb">Colaborador</label>
<select class="form-control" id="colb" name="colb" required="" style="width: 25% !important; min-width: 25%; max-width: 25%;">
<option></option>
<?php        
$sql = "SELECT id, nome FROM raddb.usuarios WHERE id NOT IN ('107', '93', '94', '95', '96', '97', '98', '99') AND situacoe_id = '1' ORDER BY nome ASC";
$qr = mysqli_query($conn, $sql);
while($ln = mysqli_fetch_assoc($qr)){
echo '<option value="'.$ln['id'].'">'.$ln['nome'].'</option>';
}
?>      
</select>
</li>
<button style="float:right" type="button" class="btn btn-success" id="btn_entrar" data-toggle="modal">Consultar</button>
</ul>
</form>

JavaScript:

$(function () { 
$('#btn_entrar').on("click", function() {
var col = $('#colb').val();
$.getJSON('./editarfa?col' + '&col=' + col, function (data) {
});
}); 
}); 

由于数组来自json_encode，我在javascript中循环它，如下所示：

var arrayLength = data.length;
for (var i = 0; i < arrayLength; i++) { 
DataAtrib = data[i][0];
Farda = data[i][1];
Tamanho = data[i][2];
Qtdfar = data[i][3];
nome = data[i][4];
Funcao = data[i][5];
}

然后在javascript中，我必须用html填充表格，如下所示：

$('#daat').html(DataAtrib);
document.getElementById("daat").value = DataAtrib;

$('#datf').html(Farda);
document.getElementById("datf").value = Farda;

$('#datt').html(Tamanho);
document.getElementById("datt").value = Tamanho;

$('#datq').html(Qtdfar);
document.getElementById("datq").value = Qtdfar;

$('#datn').html(nome);
document.getElementById("datn").value = nome;

$('#datfu').html(Funcao);
document.getElementById("datfu").value = Funcao;

在显示表格之前，我放置了完整的javascript:

$(function () { 
$('#btn_entrar').on("click", function() {
var col = $('#colb').val();
$.getJSON('./editarfa?col' + '&col=' + col, function (data) {
var arrayLength = data.length;
for (var i = 0; i < arrayLength; i++) { 

DataAtrib = data[i][0];
Farda = data[i][1];
Tamanho = data[i][2];
Qtdfar = data[i][3];
nome = data[i][4];
Funcao = data[i][5];

}

$('#daat').html(DataAtrib);
document.getElementById("daat").value = DataAtrib;

$('#datf').html(Farda);
document.getElementById("datf").value = Farda;

$('#datt').html(Tamanho);
document.getElementById("datt").value = Tamanho;

$('#datq').html(Qtdfar);
document.getElementById("datq").value = Qtdfar;

$('#datn').html(nome);
document.getElementById("datn").value = nome;

$('#datfu').html(Funcao);
document.getElementById("datfu").value = Funcao;

});
}); 
}); 

表：

<table class="table table-responsive" id="emp_fa"> 
<thead> 
<tr> 
<th>Atribuíção</th>
<th>Farda</th>
<th>Tamanho</th>
<th>Quantidade</th>
<th>Colaborador</th>
<th>Função</th>
</tr>
</thead>
<tbody>
<tr>        
<td id="daat"></td>
<td id="datf"></td> 
<td id="datt"></td> 
<td id="datq"></td>
<td id="datn"></td>
<td id="datfu"></td>            
</tr>
</tbody>
</table> 

当您只从数据库中返回一行时，一切都很正常。例如，当返回数据库中的两行或三行时，表中只显示返回的最后一行，但我打算在表中的不同行中显示从数据库返回的三行。

editarfa:

$colb = $_GET["col"];
$stmt = $conn->prepare("SELECT DataAtrib, raddb.Fardas.Farda, Tamanho, Qtdfar, nome, Funcao
FROM raddb.SaidaFarda LEFT OUTER JOIN raddb.Fardas ON raddb.Fardas.Id = raddb.SaidaFarda.Farda 
LEFT OUTER JOIN raddb.TamanhoLuvas ON raddb.TamanhoLuvas.Id = raddb.SaidaFarda.Tama 
LEFT OUTER JOIN raddb.usuarios ON raddb.usuarios.id = raddb.SaidaFarda.Colabo 
LEFT OUTER JOIN raddb.FuncaoCol ON raddb.FuncaoCol.Id = raddb.SaidaFarda.Func
WHERE SaidaFarda.Colabo = '$colb' ORDER BY DataAtrib DESC");
$stmt->execute();
$json = [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
extract($row);
$json[]= [(string)$DataAtrib, (string)$Farda, (string)$Tamanho, (int)$Qtdfar, (string)$nome, (string)$Funcao];
}
echo json_encode($json);

Answer 1

在你对我的问题发表评论后，我意识到解决方案是放置动态tbody。

所以我开始工作，找到了解决方案。

我把我的桌子改成：

<table class="table table-responsive" id="emp_fa"> 
<thead> 
<tr> 
<th>Atribuíção</th>
<th>Farda</th>
<th>Tamanho</th>
<th>Quantidade</th>
<th>Colaborador</th>
<th>Função</th>
</tr>
</thead>
<tbody>
<tr>        
<td></td>
<td></td>   
<td></td> 
<td></td>
<td></td>
<td></td>           
</tr>
</tbody>
</table> 

在javascript中，我做了以下操作：

var linha = ``; 
var arrayLength = data.length;
for (var i = 0; i < arrayLength; i++) { 
DataAtrib = data[i][0];
Farda = data[i][1];
Tamanho = data[i][2];
Qtdfar = data[i][3];
nome = data[i][4];
Funcao = data[i][5]; 
linha += `<tr>            
<td>${ DataAtrib }</td> 
<td>${ Farda }</td> 
<td>${ Tamanho }</td> 
<td>${ Qtdfar }</td>
<td>${ nome }</td> 
<td>${ Funcao }</td>              
</tr>`; 
}
$("#emp_fa tbody").html(linha);

完整的javascript如下所示：

$(function () { 
$('#btn_entrar').on("click", function() {
var col = $('#colb').val();
$.getJSON('./editarfa?col' + '&col=' + col, function (data) {
var linha = ``; 
var arrayLength = data.length;
for (var i = 0; i < arrayLength; i++) { 
DataAtrib = data[i][0];
Farda = data[i][1];
Tamanho = data[i][2];
Qtdfar = data[i][3];
nome = data[i][4];
Funcao = data[i][5]; 
linha += `<tr>            
<td>${ DataAtrib }</td> 
<td>${ Farda }</td> 
<td>${ Tamanho }</td> 
<td>${ Qtdfar }</td>
<td>${ nome }</td> 
<td>${ Funcao }</td>              
</tr>`; 
}
$("#emp_fa tbody").html(linha);

});
}); 
});