我有这个PHP代码:
function makeTable($data){
$ordered = array_map(function($day) {
return array_keys($day);
}, $data);
$headers = array_map(function($a) {
return "<th>$a</th>";
}, array_keys($ordered));
$max_indice = max( array_map(function($day) {
return count($day) - 1;
}, $ordered) );
$rows = array_map(function($i) use ($ordered) {
return '<tr>' . join( array_map(function($day) use ($i) {
return '<td><input type="checkbox" name="datetime" id="datetime" value="' . $i . '" />' . $day[$i] . '</td>';
}, $ordered)) . '</tr>';
}, range(0, $max_indice));
echo "<table border='1'>".join($headers)."<tbody>".join($rows)."</tbody></table>";
}
makeTable($datesAvailableArray);
这个函数做了什么,需要我的$datesAvailableArray
数组:
Array
(
[Saturday] => Array
(
[11:00am] => 0
[12:00pm] => 0
[1:00pm] => 0
[2:00pm] => 0
[3:00pm] => 0
[4:00pm] => 0
[5:00pm] => 0
)
[Sunday] => Array
(
[11:00am] => 0
[12:00pm] => 0
[1:00pm] => 0
[2:00pm] => 0
[3:00pm] => 0
[4:00pm] => 0
[5:00pm] => 0
)
[Monday] => Array
(
[11:00am] => 0
[12:00pm] => 0
[1:00pm] => 0
[2:00pm] => 0
[3:00pm] => 0
[4:00pm] => 0
[5:00pm] => 0
)
[Tuesday] => Array
(
[11:00am] => 0
[12:00pm] => 0
[1:00pm] => 0
[2:00pm] => 0
[3:00pm] => 0
[4:00pm] => 0
[5:00pm] => 0
)
[Wednesday] => Array
(
[11:00am] => 0
[12:00pm] => 0
[1:00pm] => 0
[2:00pm] => 0
[3:00pm] => 0
[4:00pm] => 0
[5:00pm] => 0
)
[Thursday] => Array
(
[11:00am] => 0
[12:00pm] => 0
[1:00pm] => 0
[2:00pm] => 0
[3:00pm] => 0
[4:00pm] => 0
[5:00pm] => 0
)
[Friday] => Array
(
[11:00am] => 0
[12:00pm] => 0
[1:00pm] => 0
[2:00pm] => 0
[3:00pm] => 0
[4:00pm] => 0
[5:00pm] => 0
)
)
并制作这个html表:
<table border="1">
<tbody>
<tr>
<th>
Saturday November 15th
</th>
<th>
Sunday November 16th
</th>
<th>
Monday November 17th
</th>
<th>
Tuesday November 18th
</th>
<th>
Wednesday November 19th
</th>
<th>
Thursday November 20th
</th>
<th>
Friday November 21st
</th>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" name="datetime" id="datetime" value="0">
11:00am
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="0">
11:00am
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="0">
11:00am
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="0">
11:00am
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="0">
11:00am
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="0">
11:00am
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="0">
11:00am
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="datetime" id="datetime" value="1">
12:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="1">
12:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="1">
12:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="1">
12:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="1">
12:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="1">
12:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="1">
12:00pm
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="datetime" id="datetime" value="2">
1:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="2">
1:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="2">
1:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="2">
1:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="2">
1:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="2">
1:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="2">
1:00pm
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="datetime" id="datetime" value="3">
2:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="3">
2:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="3">
2:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="3">
2:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="3">
2:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="3">
2:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="3">
2:00pm
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="datetime" id="datetime" value="4">
3:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="4">
3:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="4">
3:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="4">
3:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="4">
3:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="4">
3:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="4">
3:00pm
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="datetime" id="datetime" value="5">
4:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="5">
4:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="5">
4:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="5">
4:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="5">
4:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="5">
4:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="5">
4:00pm
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="datetime" id="datetime" value="6">
5:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="6">
5:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="6">
5:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="6">
5:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="6">
5:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="6">
5:00pm
</td>
<td>
<input type="checkbox" name="datetime" id="datetime" value="6">
5:00pm
</td>
</tr>
</tbody>
</table>
我要做的是将标题日期作为复选框值。这个代码可以实现吗?
答案 0 :(得分:1)
首先,您要更改$datesAvailableArray
,以便它包含实际日期。
ISO 8601字符串是一种很好的格式。
$datesAvailableArray = array(
'Saturday' => array(
'2014-11-14T11:00:00Z',
'2014-11-14T12:00:00Z',
'2014-11-14T13:00:00Z',
'2014-11-14T14:00:00Z'
),
'Sunday' => array(
'2014-11-15T11:00:00Z',
'2014-11-15T12:00:00Z',
'2014-11-15T13:00:00Z',
'2014-11-15T14:00:00Z'
)
);
现在我们有了日期字符串,我们可以创建DateTime对象,用于格式化日期:
$saturday_1100 = DateTimeImmutable::createFromFormat(DateTime::ISO8601, '2014-11-14T11:00:00Z');
$saturday_1100->format('g:ia'); // 11:00am
在我们的案例中,我们使用DateTimeImmutable class,因为我们不想在创建日期后更改日期。
因此,我们更改我们的makeTable
功能,以使用我们的新朋友DateTimeImmutable
:
function makeTable($data) {
$headers = array_map(function($a) {
return "<th>$a</th>";
}, array_keys($data));
$max_indice = max( array_map(function($day) {
return count($day) - 1;
}, $data) );
// Create a new array where we group by hour
$rows = array_map(function($i) use ($data) {
// create each hour
return '<tr>' . join( array_map(function($day) use ($i){
$ts = isset($day[$i]) ? DateTimeImmutable::createFromFormat(DateTime::ISO8601, $day[$i]) : null;
if ($ts){
$label = '<label for="datetime">'.$ts->format('g:ia').'</label>';
$input = vsprintf (
'<input type="checkbox" name="datetime" id="%s" value="%s" />',
array(
'datetime_'. $ts->getTimestamp(), // ID
$ts->format('c') // Value
)
);
return '<td>' . $label . $input . '<td>';
} else {
return '<td></td>';
}
}, $data)) . '</tr>';
}, range(0, $max_indice));
// Don´t get rid of the thead element.
// It tells the browser that your table is a real table containing data and not just a crappy layout.
return "
<table>
<caption>My Table</caption>
<thead>".join($headers,'\n')."</thead>
<tbody>".join($rows, '\n')."</tbody>
</table>";
}
echo makeTable( $datesAvailableArray );
会给我们这样的事情:
<table>
<caption>
My Table
</caption>
<thead>
<tr>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="datetime">11:00am</label><input type="checkbox" name="datetime" id="datetime_1415962800" value="2014-11-14T11:00:00+00:00" /></td>
<td><label for="datetime">11:00am</label><input type="checkbox" name="datetime" id="datetime_1416049200" value="2014-11-15T11:00:00+00:00" /></td>
</tr>
<tr>
<td><label for="datetime">12:00pm</label><input type="checkbox" name="datetime" id="datetime_1415966400" value="2014-11-14T12:00:00+00:00" /></td>
<td><label for="datetime">12:00pm</label><input type="checkbox" name="datetime" id="datetime_1416052800" value="2014-11-15T12:00:00+00:00" /></td>
</tr>
<!-- MORE ... -->
</tbody>
</table>
要点:
我们有输入ID的唯一值。发布此表单时发送的值是ISO-8601日期字符串。
我们还在<label>
标记中包含了我们的小时文本,其中包含一个适用于辅助功能的属性。