HTML Table - Adding a Radio button for every row

I am trying to displaying a table generated from MySQL database. In the table I want the first column to have a radio button and the last column to have a clickable icon.

The following is my code so far:

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>

<html>
<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$database = "test";
$connect = mysqli_connect($hostname, $username, $password, $database );

$sql = "select image_id as id,substring(`imagename`,-9) as Image, `locationName` as Location, `brandname` as Brand FROM `annotations` where `status`='manual'";
$result = mysqli_query($connect,$sql)or die(mysqli_error());

echo "<table class=table table-responsive style='width:50px'>";
echo "<thead><tr><th>Select</th><th>Image</th><th>Location</th><th>Brand</th><th>Run</th></tr></thead>";

while($row = mysqli_fetch_array($result)) {
    $ID = $row['id'];
    $Image = $row['Image'];
    $Location = $row['Location'];
    $Brand = $row['Brand'];
    echo "<tbody><form><tr>
    <td><div class="radio"><label>
      <input type="radio" id=".$ID." value=".$ID." name="manualTab"/>
    </label></div></td>
    <td>".$Image."</td>
    <td>".$Location."</td>
    <td>".$Brand."</td>
    <td>".$Brand."</td>
    </tr></tbody></form>";

} 

echo "</table>";
mysqli_close($connect);


?>
</body>
</html>

I am able to generate the table without the radio button and I have not even tried to include the icon in the last column yet. However, when I include the lines for Radio button, the table doesn't get generated. I have tried various combinations of this code and none of them were rendering table with radio buttons.

Errors: When I run this on Firefox, i am getting any errors reported. When I run it on Chrome, I am getting a message, HTTP Error 500 This page is not loading. I am not getting any parse error or mysqli errors as construed by some of the admins.

1 answer

  • answered 2018-03-11 13:49 Chrysovalantis Koutsoumpos

    Your error is <div class="radio"> It should be <div class='radio'>

    Another error is name="manualTab" It should be name='manualTab'

    Please enable your errors and try to replicate the following working example.

    <table>
      <thead>
        <tr>
          <th>Select</th>
          <th>Data</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input value="1" id="type_radio_1" name="type_radio" type="radio" />
          </td> 
          <td>
            Data 1
          </td>
        </tr>
        <tr>
          <td>
            <input value="2" id="type_radio_2" name="type_radio" type="radio" />
          </td> 
          <td>
            Data 2
          </td>
        </tr> 
      </tbody>