Add radio input to a table horizontally

0

Good afternoon, I have a table with some static and other dynamic data that it retrieves from the BDD as shown below:

Now what I need is to add some radio-type input but in a horizontal way because if I add them vertically I would only allow one of the seven options available throughout the table and what I need is to add an option of the 7 but per user. At the moment the code that I have is the following:

        <?php

    include 'conexio.php';

    /*
    $sql = "SELECT * FROM usuarios";
    $rs = $conn->query($sql);
    */

    $sql = $conn->prepare("SELECT * FROM usuarios");
    $sql->execute();
    $rs = $sql->fetchAll();

    include 'views/asistencia.view.php';

    ?>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <table border=1>
        <tr>
            <th># Empleado</th>
            <th>Nombre de Empleado</th>
            <th>Asistencia</th>
            <th>Retardo</th>
            <th>Retardo Justificado</th>
            <th>Falta</th>
            <th>Falta Justificada</th>
            <th>Incapacidad</th>
            <th>Cambio de Campaña</th>
        <?php foreach ($rs as $resultado): ?>
        <tr>
            <td><?php echo $resultado['IdTrabajador']; ?></td>
            <td><?php echo $resultado['Nombre']; ?></td>
            <!--<td><input type="radio" name="r1" id=""></td>
            <td><input type="radio" name="r2" id=""></td>
            <td><input type="radio" name="r3" id=""></td>
            <td><input type="radio" name="r4" id=""></td>
            <td><input type="radio" name="r5" id=""></td>
            <td><input type="radio" name="r6" id=""></td>
            <td><input type="radio" name="r7" id=""></td> -->
        </tr>
        <?php endforeach; ?>
    </table>
</body>
</html>

The objective of my table has to be as follows:

But I have to do only one selection per column and not per row. The problem of adding radio input in this way is that I can only select one per row and not per column as I wish. I hope my explanation was clear.

I hope you can help me with an answer. Thank you very much.

    
asked by Guillermo Ricardo Spindola Bri 25.05.2017 в 23:26
source

1 answer

1

I would do something like this:

I will use a dummy array for testing. The question to be able to identify each radio:

  • by name: using rn + the value of idTrabajador + a number from 1 to 7
  • by the id: using ri + the value of idTrabajador + a number from 1 to 7

In this way you can get the value of each radio and know at the same time to whom it belongs.

PHP Code: see DEMO

<?php 

    $arr = array(
                array("idTrabajador" => "1", "Nombre" => "Pedro"),
                array("idTrabajador" => "2", "Nombre" => "Santiago"),
                array("idTrabajador" => "3", "Nombre" => "Juan"),
            );

    $html='<table border=1>
        <tr>
            <th># Empleado</th>
            <th>Nombre de Empleado</th>
            <th>Asistencia</th>
            <th>Retardo</th>
            <th>Retardo Justificado</th>
            <th>Falta</th>
            <th>Falta Justificada</th>
            <th>Incapacidad</th>
            <th>Cambio de Campaña</th></tr>';

         foreach( $arr as $k=>$v ) {
             $nameRadio="rn".$v["idTrabajador"];
             $idRadio="ri".$v["idTrabajador"];

             $html.='<tr><td>'.$v["idTrabajador"].'</td><td>'.$v["Nombre"].'</td>';
             $html.='<td><input type="radio" name="'.$nameRadio.'_1" id="'.$idRadio.'_1"></td>'; 
             $html.='<td><input type="radio" name="'.$nameRadio.'_2" id="'.$idRadio.'_2"></td>'; 
             $html.='<td><input type="radio" name="'.$nameRadio.'_3" id="'.$idRadio.'_3"></td>'; 
             $html.='<td><input type="radio" name="'.$nameRadio.'_4" id="'.$idRadio.'_4"></td>'; 
             $html.='<td><input type="radio" name="'.$nameRadio.'_5" id="'.$idRadio.'_5"></td>'; 
             $html.='<td><input type="radio" name="'.$nameRadio.'_6" id="'.$idRadio.'_6"></td>'; 
             $html.='<td><input type="radio" name="'.$nameRadio.'_7" id="'.$idRadio.'_7"></td>'; 


         }

    $html.='</table>';


    echo $html;
    ?>

You would have something like this:

<table border=1>
  <tr>
    <th># Empleado</th>
    <th>Nombre de Empleado</th>
    <th>Asistencia</th>
    <th>Retardo</th>
    <th>Retardo Justificado</th>
    <th>Falta</th>
    <th>Falta Justificada</th>
    <th>Incapacidad</th>
    <th>Cambio de Campaña</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Pedro</td>
    <td><input type="radio" name="rn1_1" id="ri1_1"></td>
    <td><input type="radio" name="rn1_2" id="ri1_2"></td>
    <td><input type="radio" name="rn1_3" id="ri1_3"></td>
    <td><input type="radio" name="rn1_4" id="ri1_4"></td>
    <td><input type="radio" name="rn1_5" id="ri1_5"></td>
    <td><input type="radio" name="rn1_6" id="ri1_6"></td>
    <td><input type="radio" name="rn1_7" id="ri1_7"></td>
    <tr>
      <td>2</td>
      <td>Santiago</td>
      <td><input type="radio" name="rn2_1" id="ri2_1"></td>
      <td><input type="radio" name="rn2_2" id="ri2_2"></td>
      <td><input type="radio" name="rn2_3" id="ri2_3"></td>
      <td><input type="radio" name="rn2_4" id="ri2_4"></td>
      <td><input type="radio" name="rn2_5" id="ri2_5"></td>
      <td><input type="radio" name="rn2_6" id="ri2_6"></td>
      <td><input type="radio" name="rn2_7" id="ri2_7"></td>
      <tr>
        <td>3</td>
        <td>Juan</td>
        <td><input type="radio" name="rn3_1" id="ri3_1"></td>
        <td><input type="radio" name="rn3_2" id="ri3_2"></td>
        <td><input type="radio" name="rn3_3" id="ri3_3"></td>
        <td><input type="radio" name="rn3_4" id="ri3_4"></td>
        <td><input type="radio" name="rn3_5" id="ri3_5"></td>
        <td><input type="radio" name="rn3_6" id="ri3_6"></td>
        <td><input type="radio" name="rn3_7" id="ri3_7"></td>
</table>
    
answered by 26.05.2017 / 01:26
source