笔记大全

bootstrap怎么设置表格单选按钮

更新时间：2023-10-16

简介

Bootstrap是一个知名的前端框架，可以帮助程序员开发出美观易用的前端界面。但是，如果我们想要使用表格来呈现数据，就需要更加灵活的组件。Bootstrap的表格单选按钮，为我们的数据呈现提供了更加灵活的展示方式，通过单选按钮可以加强对于表格数据的筛选、排序等操作。

示例代码1

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><input type="radio" name="radio1" aria-label="single selection"></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><input type="radio" name="radio1" aria-label="single selection"></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><input type="radio" name="radio1" aria-label="single selection"></td>
    </tr>
  </tbody>
</table>

通过input标签的radio属性，我们可以展示一个单选的按钮，这里我们需要通过name属性保证每个单选按钮的唯一性。

示例代码2

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><div class="form-check"><input class="form-check-input" type="radio" name="radio1" id="radio1"><label class="form-check-label" for="radio1"></label></div></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><div class="form-check"><input class="form-check-input" type="radio" name="radio1" id="radio2"><label class="form-check-label" for="radio2"></label></div></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><div class="form-check"><input class="form-check-input" type="radio" name="radio1" id="radio3"><label class="form-check-label" for="radio3"></label></div></td>
    </tr>
  </tbody>
</table>

如果单选按钮还需要更加细致的控制，我们可以使用Bootstrap提供的form-check组件，通过使用label元素，我们可以实现单选按钮和文字的组合，给用户提供更加直观的操作界面。

示例代码3

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><div class="form-check"><input class="form-check-input" type="radio" name="radio2" id="radio4"><label class="form-check-label" for="radio4"></label></div></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><div class="form-check"><input class="form-check-input" type="radio" name="radio2" id="radio5"><label class="form-check-label" for="radio5"></label></div></td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td><div class="form-check"><input class="form-check-input" type="radio" name="radio2" id="radio6"><label class="form-check-label" for="radio6"></label></div></td>
    </tr>
  </tbody>
</table>

<script>
  $('input[name=radio2]').on('change', function(){
    console.log($(this).parent().parent().parent().find('td:eq(1)').text());
  });
</script>

如果需要获取用户选择的数据，我们可以通过JavaScript代码获取用户选择的数据，这里的代码，如果设置了name为radio2的input元素，通过设置change事件，我们可以通过console.log输出用户的选择数据，这里我们使用了jQuery库，方便我们快速查询DOM节点。

c语言编程笔录