我正在使用 PHP 和 MySQL 编写时间表。
我目前有一个 jQuery 日期选择器，它根据您选择的日期返回一个选择。然后我从 AJAX 返回了一个 JSON。
我有一个表，其中包含 23 <td>每条线路的运行时间为 30-30 分钟(例如 8:00.8:30.9:00 至 19:00)。
我需要的是用我的数组的返回值填充每个位置，其中包含预定的时间和描述。如果某个时间没有安排查询，它会显示类似“可用时间”的内容。但我需要永远把那张 table 固定在那里。
这是我暂时的代码:
html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Agenda</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" media="screen">
</head>
<body>
<div id="datepicker"></div>
<br>
<div id="teste"> </div>
</body>
</html>
javascript
<script>
$(document).ready(function()
{
$('#datepicker').datepicker(
{
dateFormat: 'yy-mm-dd',
dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
nextText: 'Próximo',
prevText: 'Anterior',
inline: true,
onSelect: function ()
{
var date = $("#datepicker").val();
$.ajax(
{
type: "POST",
url: "retornar_data.php",
data: { date: date },
success: function(data)
{
$.each($.parseJSON(data), function(chave,valor)
{
console.log(data);
var lista = '<table border="1">'
lista += '<th> Hora </th>';
lista += '<th> Data </th>';
lista += '<th> Descrição </th>';
lista += '<tr>'
lista += '<td>8:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>8:30</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>9:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>9:30</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>10:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>8:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>10:30</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>11:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>11:30</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>12:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>12:30</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>13:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>13:30</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>14:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>14:30</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>15:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>15:30</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>16:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>16:30</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>17:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>17:30</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>18:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>18:30</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '<td>19:00</td>'
lista += '<td> </td>'
lista += '<tr>'
lista += '</table>';
$('#teste').html(lista);
});
},
error: function()
{
alert("Error.");
}
});
}
});
});
</script>
retornar_data.php
<?php
$date = $_POST['date'];
$conecta = mysqli_connect("localhost","root","","odonto");
$selecao = "SELECT * from agenda WHERE dataAgenda = '{$date}' ";
$categorias = mysqli_query($conecta,$selecao);
$retorno = array();
while($linha = mysqli_fetch_object($categorias))
{
$retorno[] = $linha;
}
echo json_encode($retorno);
// fechar conecta
mysqli_close($conecta);
?>
json return
[
{
"agendaId":"9",
"dentistaId":"2",
"dataAgenda":"2015-12-12",
"horaAgenda":"08:30",
"descricaoAgenda":"Protese2"
}
]
最佳答案
试试这个
...
lista += '<td>9:00</td>'
lista += '<td><span id='09:00'></span></td>'
然后你的 jQuery 就可以简单地做到这一点
data = [
{
"agendaId":"9",
"dentistaId":"2",
"dataAgenda":"2015-12-12",
"horaAgenda":"08:30",
"descricaoAgenda":"Protese2"
}
];
for (var i = 0; i < data.length; i++)
{
$("#" + data[i].horaAgenda).innerText(....);
}
关于javascript - 如何用 JSON 的返回值填充 FIXED 表的特定位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34231467/