How to add radio button to multiple rows to select HTML

November 30, 2022

I was able to create a radio button however i want it in each row and not the description row.`

<div class="container">
      <h2> Details</h2>
      <button onclick="myFunction(1)"type="submit" class="btn btn-primary">Edit Selected Row</button>  
      <table class="table">
      <thead>
        <tr >
          <th scope="col"><div class="form-check">
              <input class="form-check-input" type="radio" name="flexRadioDefault"id="flexRadioDefault1">
          <label class="form-check-label" for="flexRadioDefault1"></th>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
          <th scope="col">Date</th>
              <th scope="col">Location</th>
          <th scope="col">Description</th>
          <th scope="col">Checked by</th>
          <th scope="col">Reward By</th>


        </tr>
      </thead>
      <tbody>
        <tr >
          <th scope="row">1</th>
          <td><a href="john@example.com">John Doe</a></td>
          <td><a href="www.john@example.com">www.john@example.com</a></td>
          <td>11/29/2022</td>
          <td>USA</td>
          <td>description here</td>
          <td><a href="Boss@example.com">Boss Man</a></td>
          <td><a href="Boss@example.com">Boss Boss Man</a></td>
        </tr>

i was able to put it in the description row, I do not want it there however I want it displayed for every row to where I can select.

>Solution :

You need to move the radio button from the header to the body, including it in each row.

In it’s own column:

    <tr>
      <th scope="col"></th> <!-- empty for radio column -->
      <th scope="col"></th> <!-- empty for number column -->
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Date</th>
          <th scope="col">Location</th>
      <th scope="col">Description</th>
      <th scope="col">Checked by</th>
      <th scope="col">Reward By</th>


    </tr>
  </thead>
  <tbody>
    <tr >
      <td><div class="form-check">
          <input class="form-check-input" type="radio" name="flexRadioDefault"id="flexRadioDefault1"><label class="form-check-label" for="flexRadioDefault1"></div></td>
      <th scope="row">1</th>
      <td><a href="john@example.com">John Doe</a></td>
      <td><a href="www.john@example.com">www.john@example.com</a></td>
      <td>11/29/2022</td>
      <td>USA</td>
      <td>description here</td>
      <td><a href="Boss@example.com">Boss Man</a></td>
      <td><a href="Boss@example.com">Boss Boss Man</a></td>
    </tr>

In the same column as the number:

    <tr>
      <th scope="col"></th> <!-- empty for number column -->
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Date</th>
          <th scope="col">Location</th>
      <th scope="col">Description</th>
      <th scope="col">Checked by</th>
      <th scope="col">Reward By</th>


    </tr>
  </thead>
  <tbody>
    <tr >
      <td scope="row"><div class="form-check">
          <input class="form-check-input" type="radio" name="flexRadioDefault"id="flexRadioDefault1"><label class="form-check-label" for="flexRadioDefault1"></div> 1</td>
      <td><a href="john@example.com">John Doe</a></td>
      <td><a href="www.john@example.com">www.john@example.com</a></td>
      <td>11/29/2022</td>
      <td>USA</td>
      <td>description here</td>
      <td><a href="Boss@example.com">Boss Man</a></td>
      <td><a href="Boss@example.com">Boss Boss Man</a></td>
    </tr>