vendredi 29 mars 2019

How to create checkboxes in a html/css table where header and the first column is pulled from the mysql database?

I'm working on creating a html and css checklist table, I have populated the header and the first column from a mysql database using for loops. How do I create checkboxes for the rest of the columns?

Here's the code:

schema-functions.php

class Schema{

public function getCourse(): ?array {
    $objectArray = array();
    $conn = DatabaseConnection::getConnection();
    $stmt = $conn->prepare('SELECT * FROM Course');
    if ($stmt->execute()) {
        while ($result = $stmt->fetch(PDO::FETCH_ASSOC)) {
            array_push($objectArray, Factory::createCourse($result['commonName'], $result['courseId'], $result['courseNumber'], $result['subjectCode'], $result['yearGiven']));
        }
        return $objectArray;
    } else {
        return null;
    }


public function getObjective(): ?array {
    $objectArray = [];
    $conn = DatabaseConnection::getConnection();
    $stmt = $conn->prepare('SELECT * FROM Objective ORDER BY objectiveId ASC');
    if ($stmt->execute()) {
        while ($result = $stmt->fetch(PDO::FETCH_ASSOC)) {
            array_push($objectArray, Factory::createObjective($result['objective'], $result['objectiveId']));
        }
        return $objectArray;
    } else {
        return null;
    }
}

}

table.php

<?php
require_once 'pages/header.php';
require_once './functions/schema-functions.php';

$course = Schema::getCourse();
$objective = Schema::getObjective();
?>




        <table id="table1">

  <thead>
     <tr> 
         <th>Objectives</th>
    <?php     
       for ($i = 0; $i < count($course); $i++) {               
         echo"           

  <th id='rotate1'> {$course[$i]->commonName} </th>

  ";    
 } 

?>
</tr>

  </thead>
  <tbody>
      <tr>
  <td>
    <?php     
 for ($i = 0; $i < count($objective); $i++) {               
             echo"           
    <tr>
          <th class=row-header> {$objective[$i]->objective} </th>
           <td><input name=column3[] type=checkbox value=row1-column3></td> 
    </tr>  ";
     } 

 ?>


main.css

#rotate1 {
  transform: 

    rotate(315deg);
  width: 2%;

    }


#th.row-header {
padding: 0 10px;
border-bottom: 2px solid #ccc;
height: 50px;
 border-top: 1px solid #ddd;
  } 


#table1{    
 border:2px solid #ddd!important;
 border-collapse: collapse;
 font-size: 14px;
 font-family: "Times New Roman", Times, serif;

  }

#table1 tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 1000px;
  }

I'm stuck at creating two things - the checkboxes and I want to fix the header with the web page as it scrolls down. Currently the header is fixed to the table.




Aucun commentaire:

Enregistrer un commentaire