Validate read or unread message

Question

I created an email system. I now want to check the messages read (appear without Bold) and unread (appear Bold) by the user. I create the table with the emails this way:

<?php  
while($row = mysqli_fetch_array($result))  
 {  
?> 
<section id="s1">
<div class="div1" id="minhaDiv" style="float: left;">  
    <table class="table table-bordered">  
        <tr> 
            <th width="20%">De</th>
            <th width="60%">Assunto</th>
            <th width="10%">Prioridade</th>
            <th width="10%">Recebido</th>               
        </tr>
        <tr>
        <th width="10%" colspan=4>Recebido: <?php echo $row["Data"]; ?></th>

        </tr>       

        <tr>  
        <td><?php echo $row["De"]; ?></td>
        <td class="td-info view_data" id="<?php echo $row["Id"]; ?>" data-toggle="modal" href="#dataModal" width="20%" style="font-weight:bold" <?php echo $row["Status"] != '1'?' Normal ':' negrito '?>><?php echo $row["Assunto"]; ?></td>  
        <td><?php echo $row["Prioridade"]; ?></td> 
        <td><?php echo $row["Hora"]; ?></td>
        </tr>
        <tr>
        <?php  
        }  
        ?> 
    </table>  
</div>
</section>

To read the contents of the message click on this td and open a modal:

<td class="td-info view_data" id="<?php echo $row["Id"]; ?>" data-toggle="modal" href="#dataModal" width="20%" <?php echo $row["Status"] == '1'?' style="font-weight:bold" ':' style="font-weight:normal" '?>><?php echo $row["Assunto"]; ?></td>

When opening the modal with the click I update in the column Status of the database table from 1 to 0, to stay as read and in the td above I do this check as follows:

width="20%" <?php echo $row["Status"] == '1'?' style="font-weight:bold" ':' style="font-weight:normal" '?>

Javascript to open modal and update:

$('.td-info').click(function(){
    var item_id = $(this).attr("id");
    var status = $(this).attr("Status");
      $.ajax({ 
        url:"./fetchRAD",  
        method: "POST",  
        data:{item_id:item_id, status:status},   
        success:function(data){     
                }
      });               
    });  

But the problem is that by changing the Status value to 0, if you are a different user you will also show how the message reads. So I intended to do this client-side check and not the database-side check.

Table to record messages:

CREATE TABLE `Alertas` (
  `Id` int(11) NOT NULL AUTO_INCREMENT,
  `Tipo` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,
  `Prioridade` varchar(10) COLLATE utf8_unicode_ci DEFAULT NULL,
  `Email` varchar(10) COLLATE utf8_unicode_ci DEFAULT NULL,
  `Para` longtext COLLATE utf8_unicode_ci,
  `Assunto` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  `Conteudo` longtext COLLATE utf8_unicode_ci,
  `Recebido` datetime DEFAULT NULL,
  `De` varchar(150) COLLATE utf8_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Users that can receive in group or individually:

CREATE TABLE `testeCol` (
  `Id` int(11) NOT NULL AUTO_INCREMENT,
  `Colaborador` varchar(100) COLLATE utf8_unicode_ci DEFAULT NULL,
  `Grupo` varchar(100) COLLATE utf8_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB AUTO_INCREMENT=149 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Table to fill status as read:

CREATE TABLE `ValAlertas` (
  `IdVal` int(11) NOT NULL AUTO_INCREMENT,
  `IdSMS` int(11) DEFAULT NULL,
  `Para` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL,
  `Status` tinyint(1) DEFAULT NULL,
  PRIMARY KEY (`IdVal`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Answer 1

I suggest that you create in the table of the bank the column that says the status of the message (Read or Unread). And on the display screen of the messages uses a filter and check whether the bank says if the message was read, example:

<?php if($row['status'] == 'lida'): ?>
    <tr style="font-weight:bold">  
        <td><?php echo $row["De"]; ?></td>
        <td class="td-info view_data" id="<?php echo $row["Id"]; ?>" data-toggle="modal" href="#dataModal" width="20%" style="font-weight:bold" <?php echo $row["Status"] != '1'?' Normal ':' negrito '?>><?php echo $row["Assunto"]; ?></td>  
        <td><?php echo $row["Prioridade"]; ?></td> 
        <td><?php echo $row["Hora"]; ?></td>
    </tr>
<?php else: ?>
    <tr>  
        <td><?php echo $row["De"]; ?></td>
        <td class="td-info view_data" id="<?php echo $row["Id"]; ?>" data-toggle="modal" href="#dataModal" width="20%" style="font-weight:bold" <?php echo $row["Status"] != '1'?' Normal ':' negrito '?>><?php echo $row["Assunto"]; ?></td>  
        <td><?php echo $row["Prioridade"]; ?></td> 
        <td><?php echo $row["Hora"]; ?></td>
</tr>
<?php endif; ?>

Answer 2

That solves:

<th width="20%" style="font-weight:bold" onclick="this.style['font-weight'] ='normal'">De</th>