正文

掌握JavaScript表格单选框设置：轻松实现动态添加与交互式操作

/0 浏览量
0605

在Web开发中，表格是展示数据的一种常见方式，而单选框则是实现多选一选择的一种控件。本文将详细讲解如何使用JavaScript来设置表格单选框，包括动态添加和交互式操作，让你轻松掌握这一技巧。

一、创建基础表格与单选框

首先，我们需要创建一个基本的HTML表格，并在表格中添加单选框。以下是一个简单的例子：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>选择</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td><input type="radio" name="choice" value="1" /></td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td><input type="radio" name="choice" value="2" /></td>
    </tr>
  </tbody>
</table>

在这个例子中，我们创建了一个包含两行数据的表格，其中每行都有一个单选框。name="choice"属性确保了同一组的单选框只能选择一个。

二、动态添加表格行与单选框

在实际应用中，我们往往需要在用户输入数据后动态地添加表格行和单选框。以下是一个使用JavaScript实现的例子：

<input type="text" id="name" placeholder="请输入姓名" />
<input type="number" id="age" placeholder="请输入年龄" />
<button onclick="addRow()">添加行</button>
<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>选择</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<script>
function addRow() {
  var name = document.getElementById('name').value;
  var age = document.getElementById('age').value;
  var table = document.getElementById('myTable').getElementsByTagName('tbody')[0];

  var newRow = table.insertRow(table.rows.length);
  var nameCell = newRow.insertCell(0);
  var ageCell = newRow.insertCell(1);
  var choiceCell = newRow.insertCell(2);

  nameCell.innerHTML = name;
  ageCell.innerHTML = age;
  choiceCell.innerHTML = '<input type="radio" name="choice" value="' + (table.rows.length - 1) + '" />';
}
</script>

在这个例子中，我们使用两个输入框来获取用户输入的姓名和年龄，然后通过点击按钮来动态添加表格行和单选框。每次添加的行都会自动生成一个唯一的单选框值，以便与表单元素关联。

三、交互式操作与选中状态

在添加表格行和单选框之后，我们可能需要进行一些交互式操作，例如获取选中行的信息或者禁用某个单选框。以下是一个获取选中行信息的例子：

document.querySelector('table').addEventListener('click', function(e) {
  var target = e.target;
  if (target.tagName === 'INPUT' && target.type === 'radio') {
    var selectedRow = target.parentNode.parentNode;
    console.log('选中行的姓名：' + selectedRow.cells[0].innerText);
    console.log('选中行的年龄：' + selectedRow.cells[1].innerText);
  }
});

在这个例子中，我们为整个表格添加了一个点击事件监听器，当点击单选框时，会获取选中行的信息并输出到控制台。

总结

通过本文的讲解，相信你已经掌握了如何使用JavaScript设置表格单选框，包括动态添加和交互式操作。在实际应用中，你可以根据需求调整和扩展这些技巧，以实现更加丰富的功能。祝你开发愉快！

-- 展开阅读全文 --