简体   繁体   中英

Display different background color for DIV's, based on a result individual digits value 0/1

In a form, I'm forming a string with java script and collecting it's result into a SQLite table the state of 12 checkboxes, under a string of binary values like "000011111100".

<script>
const checkboxes = [...document.querySelectorAll('input[type=checkbox]')];
function RegMD() {
  document.getElementById("mounths").textContent = checkboxes.reduce((a, b) => a + (b.checked ? 1 : 0), "");
  document.getElementById("results").innerHTML = document.getElementById("mounths").innerHTML;
}
</script>

After the string is formed is sent through POST method into a SQLite table. Calling back this value is also simple because I can echo it with a PHP script (more or less like this)

<?php
  try {
    $conn = new PDO('sqlite:db/MyDatabase.db');
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $stmt = $conn->prepare("SELECT months FROM MyTable where MyID='this_value'");
    $stmt->execute();
    $data = $stmt->fetchcolumn(PDO::FETCH_ASSOC);
    if ( !empty($data) ) {
      echo $data['mounths'];
      }
    } else {
      echo "Record missing!";
    }
} catch(PDOException $e) {
  echo "Error: " . $e->getMessage();
}
$conn = null;
?>

This value is not needed to be visible, I can hide it or not echo it at all. But I want to use it in a different way. When I recall this value, I want it to break it into it's individual values of "0" and "1" and according to these values, I want to color 12 DIVs (or table cells) into some predefined colors:

$color1 = red;
$color2 = white;

I know that for reaching my goal, I should do something like from here, and somehow adapting it: Change Row background color based on cell value

     $data( function(value){
            if(value == "0"){
                html += '<div style="background-color: red;">'+some_content+'</div>';
            }
            else{
                html += '<div style="background-color: white;">'+some_content+'</div>';
            }
        });

I found some similar questions (coloring and splitting) in these articles, but nothing I could apply just by myself: PHP - Display different image based on mysql row result Split into different rows based on condition SQL - Split Row into multiple based on month different color of row based on result in PHP Split SQL rows array into multiple arrays based on date Split a div background color based on $index in ng-repeat

Can you help me to achieve something like this: 年度最佳 starting from the step where I recall the string value from the database (database column name "mounths")?

<p hidden><?php echo $data['mounths']; ?></p> 

If hiding the result is not necessary is even better.

$html  = ''; // predefine $html in case array is empty 
foreach($data as $column=>$value){
   $color = !$value ? 'red' : 'white'; // set color based on value
   $html.="<div style='color:$color;'>--Some-Content--</div>"; // append to html
}
echo $html;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM