javascript - 编辑每周的开放和关闭时间(每天)

Question

我正在研究每周的开放和关闭时间(逐日)。我发现 jquery.businessHours 插件工作正常，我可以成功插入 json 格式的数据。我已经像这样以 json 格式插入了数据。但每周的营业时间和营业时间是商业性的，因此企业主可以使用一项功能来编辑其营业时间。

请访问此 js fiddle 链接: https://jsfiddle.net/wdpu6jbf/

我尝试使用这段代码，

$adminid = '135';
$res = $conn->query("select json_data_timing_hours from timing_hours where admin_id='$adminid'");
$row = mysqli_fetch_assoc($res);
echo $row['json_data_timing_hours'];

所以我得到了以下存储在数据库中的 Json 数据:

数组1

[
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  }
]

现在，我的问题是如何用颜色和数字编辑矩形中的字段。当我带着编辑请求进入此页面时，它是否可能根据存储在数据库中的颜色和数据进行填充，因为所有内容都来自很难理解的脚本。

例如:在 Array1 中，每周工作五天，时间为 09:00 到 18:00。如果数据以Array2的方式存储。

数组2

[
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": true,
    "timeFrom": "09:00",
    "timeTill": "18:00"
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  },
  {
    "isActive": false,
    "timeFrom": null,
    "timeTill": null
  }
]

然后，在周一和周二编辑请求时，颜色为浅绿色，其他颜色为红色，具体时间。如果您无法完成整个代码，请给我一个工作提示。如果需要任何其他信息，请告诉我。

营业时间js链接(我们需要根据结果更改):https://cdnjs.cloudflare.com/ajax/libs/jquery.businessHours/1.0.1/jquery.businessHours.js

打开此链接我必须动态更改 operationTime、defaultOperationTimeFrom 和 defaultOperationTimeTill 变量，但我无法弄清楚它是如何实现的。

编辑:我必须更改上面js的这个特定部分，

  operationTime: [
                {},
                {},
                {},
                {},
                {},
                {isActive: false},
                {isActive: false}
            ],
            defaultOperationTimeFrom: '9:00',
            defaultOperationTimeTill: '18:00',

Answer 1

您可以为时间文本框添加onblur事件，这意味着如果任何人编辑时间并移动光标，使用onblur事件您可以编辑数据库中的字段，并且您应该在文本框中使用一些唯一的ID或类。

如果您有疑问，请告诉我。