带有复选框值的PHP问题

时间:2014-11-11 14:44:16

标签: php html

我有这个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>

我要做的是将标题日期作为复选框值。这个代码可以实现吗?

1 个答案:

答案 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>标记中包含了我们的小时文本,其中包含一个适用于辅助功能的属性。