如何根据从datepicker中选择的日期获取不同的数据?

时间:2017-02-07 12:27:39

标签: php jquery

我有一张excel表,下面给出了链接。 在这张表中,我给出了cse的3个部分。 https://i.stack.imgur.com/aHidC.png 我想在php中显示它们,当我从日期选择器中选择日期时,从下拉列表中显示该部分,并显示缺席者。我不知道该怎么做。

$students = [
    ['CSE-A' => 'PRESENT'],
    ['CSE-A' => 'PRESENT'],
    ['CSE-B' => 'ABSENT'],
    ['CSE-B' => 'ABSENT'],
    ['CSE-A' => 'ABSENT'],
    ['CSE-B' => 'PRESENT'],
    ['CSE-B' => 'ABSENT'],
    ['CSE-A' => 'ABSENT'],
    ['CSE-C' => 'ABSENT'],
    ['CSE-C' => 'PRESENT']
];

$outputs = [];

foreach($students as $array) {
    foreach($array as $key => $value) {
        if (!isset($outputs[$key])) {
            $outputs[$key] = [
                'present' => 0,
                'absent' => 0,
            ];

        }

        //check value
        if ($array[$key] === 'PRESENT') {
            $outputs[$key]['present']++;
        } else if ($array[$key] === 'ABSENT') {
            $outputs[$key]['absent']++;
        }
    }
}

foreach($outputs as $key => $value) {
    echo $key.
    "\n";
    echo "Present Totals: ".$value['present'].
    "\n";
    echo "absent Totals: ".$value['absent'].
    "\n";
    echo "--------------\n";
}

我试过这个。但是,当来自datepicker的日期和来自下拉列表的部分选择了如何在所选选项上显示该日期学生的存在和缺席时,我感到困惑。

1 个答案:

答案 0 :(得分:0)

确定。您需要的代码如下。我测试了它并且它有效。

说明:它为表中存在的日期和cse的每个匹配创建一个div,其中包括presentiew的nuber和absenties的数量。然后,使用javascript,当选择选择时,它检查是否选择了日期和cse选择。如果是,则使得div具有所选日期并且cse可见。如果没有相应的div(因为该阵列当天没有该cse的学生),则会显示相应的消息。否则,将显示所选日期和cse的数据。

它的作用也包含在评论中。如果您有任何疑问或想要不同的东西,请告诉我。

<html>

<?php

$students = array
  (
  array('CSE-A','PRESENT',"2-10-2017"),
  array('CSE-A','PRESENT',"2-10-2017"),
  array('CSE-B','ABSENT',"3-10-2017"),
  array('CSE-B','ABSENT',"3-10-2017"),
  array('CSE-A','ABSENT',"3-10-2017"),
  array('CSE-B','PRESENT',"4-10-2017"),
  array('CSE-B','ABSENT',"4-10-2017"),
  array('CSE-A','ABSENT',"5-10-2017"),
  array('CSE-C','ABSENT',"5-10-2017"),
  array('CSE-C','PRESENT',"5-10-2017")
  );

$outputs = [];

foreach($students as $array) {
    $cse = $array[0];
    $present = $array[1];
    $date = $array[2];
    $entry = $cse.", ".$date;
    if (!isset($outputs[$entry])) {
        $outputs[$entry] = [
            'present' => 0,
            'absent' => 0,
        ];

    }

    //check value
    if ($present === 'PRESENT') {
        $outputs[$entry]['present']++;
    } else if ($present === 'ABSENT') {
        $outputs[$entry]['absent']++;
    }
}



// Save all availbale cse, for the dropdown choices
$all_cse = array();
foreach($students as $array) {
    $cse = $array[0];
    array_push($all_cse,$cse);
}
$all_cse = array_combine($all_cse, $all_cse);

// Save all availbale dates, for the dropdown choices
$all_dates = array();
foreach($students as $array) {
    $date = $array[2];
    array_push($all_dates,$date);
}
$all_dates = array_combine($all_dates, $all_dates);

?>

<body>

<select id="cse" onchange="myFunction()">
<option disabled selected value> -- select an option -- </option>
<?php 

foreach($all_cse as $cse) {
    echo "<option value='".$cse."'>".$cse."</option>";
}

?>
</select>

<select id="dates" onchange="myFunction()">
<option disabled selected value> -- select an option -- </option>
<?php 

foreach($all_dates as $date) {
    echo "<option value='".$date."'>".$date."</option>";
}

?>
</select>
<br><br>
<div id="data">

</div>

<?php

foreach($outputs as $key => $value) {

    // Create a div for every match of cse and date that exists.

    echo "<div id='".$key."' style='display:none;'>";

    "<br>";
    echo "Present Totals: ".$value['present'].
    "<br>";
    echo "absent Totals: ".$value['absent'].
    "<br>";

    echo "</div>";
}

?>

</body>
</html>

<script type="text/javascript">
var lastDiv;

function myFunction() {
    var date = document.getElementById("dates").value;
    var cse = document.getElementById("cse").value;

    if (cse!="" && date!=""){

        // Make invisible the div for the previous choice
        if (lastDiv!=null){
            lastDiv.style.display = "none";
        }

        lastDiv = document.getElementById(cse + ", " + date);

        // Make visible the div for the current choice
        if (lastDiv!=null){
            document.getElementById("data").innerHTML = cse +"<br>Date: " + date;
            lastDiv.style.display = "block";
        } else {
            document.getElementById("data").innerHTML = "No matches found for this cse in this date.";
        }
    }
}
</script>