如何用JSON的返回填充FIXED表的特定位置
how to fill a specific place of a FIXED table with the return of a JSON?
我正在用MySQL用PHP编程时间表。
我目前有一个jQuery日期选择器,它会根据您选择的日期返回一个选择。然后我有一个来自AJAX的JSON返回。
我有一个包含23个<td>
的表,其中每行在30-30分钟内(比如8:00。8:30.9:00至19:00)。
我需要的是用我的数组的返回来填充每个地方,该数组包含一个时间和一个计划的描述。如果在某个时间内没有安排查询,则会显示类似"可用时间"的内容。但我需要那张桌子永远固定在那里。
这是我暂时拥有的代码:
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返回
[
{
"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(....);
}
相关文章:
- 在地图加载/页面加载时,我想将地图设置为当前地理位置,但不想在地图上显示定位图标
- JQuery定位:我可以滚动到正确的位置一次,但不能滚动两次
- 如何在jquerymobile中同时放置两个定位的经纬度位置
- Javascript / 根据一个元素的位置定位另一个元素
- 如何定位“隐藏”的 iframe?(应用程序:链接到嵌入“隐藏的海报图像”嵌入的 Youtube 视频的起始位置)
- 与位置的相对定位:绝对
- 在没有“位置”属性的情况下实现绝对定位,使用边距/填充
- 用于相对于用户在约束内单击的位置定位框的数学公式
- 运行地理位置定位的 js 文件
- 如果定位服务关闭,英特尔 XDK 地理位置将找不到纬度/经度
- 在 iPad 上绝对定位不会将元素设置在所需位置
- 如何使用 jQuery 计算相对定位元素的绝对位置*没有*
- 如果php返回位置头,我如何在jquery ajax中定位页面
- 试着根据父母的位置来定位孩子
- 地理定位api没有给出准确的用户位置
- 定位父元素,使子元素处于完全相同的位置
- 如何在Javascript/Mootools中根据页面上不同对象的位置定位箭头
- 使用javascript查找元素相对于最近相对定位的父元素的位置
- 多个谷歌位置请求功能(药房定位器)
- 点击html5地理定位当前位置,然后减去两点