h5写table行的复选框

你可以使用以下代码在HTML的表格中添加复选框行：

<table>
  <thead>
    <tr>
      <th>Select</th>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="row1"></td>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="row2"></td>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="row3"></td>
      <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
    </tr>
  </tbody>
</table>

在每个表格行中添加一个包含一个复选框的单元格即可。你可以根据需要更改 `name` 属性的值来标识每个行的复选框。

相关问题

h5如何将单选框变成复选框

将单选框变成复选框需要修改HTML代码和CSS样式。

1. 修改HTML代码：
将单选框的input标签的type属性值从"radio"修改为"checkbox"。

例如，原来的单选框代码：

<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female

改为复选框代码：

<input type="checkbox" name="gender" value="male">Male
<input type="checkbox" name="gender" value="female">Female

2. 修改CSS样式：
复选框需要显示为方框，而不是原来的圆点。我们需要使用CSS样式修改复选框的外观。可以使用伪类选择器:checked来设置选中状态下的样式。

例如：

input[type="checkbox"] {
  /* 隐藏原始选择框 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 制作方框 */
  border: 2px solid #999;
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
  border-radius: 3px;
  margin-right: 5px;
}

/* 选中状态的样式 */
input[type="checkbox"]:checked::before {
  content: "\2714";
  display: inline-block;
  position: absolute;
  top: -1px;
  left: 1px;
  line-height: 18px;
  font-size: 14px;
  color: #fff;
  padding: 0 3px;
  background-color: #4CAF50;
  border-radius: 3px;
}

上面的样式代码将复选框修改为了方框样式，并使用checked伪类选择器来设置选中状态下的样式。

完整的修改后的代码如下：

<input type="checkbox" name="gender" value="male" id="maleCheck"><label for="maleCheck">Male</label>
<input type="checkbox" name="gender" value="female" id="femaleCheck"><label for="femaleCheck">Female</label>

<style>
input[type="checkbox"] {
  /* 隐藏原始选择框 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 制作方框 */
  border: 2px solid #999;
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
  border-radius: 3px;
  margin-right: 5px;
}

/* 选中状态的样式 */
input[type="checkbox"]:checked::before {
  content: "\2714";
  display: inline-block;
  position: absolute;
  top: -1px;
  left: 1px;
  line-height: 18px;
  font-size: 14px;
  color: #fff;
  padding: 0 3px;
  background-color: #4CAF50;
  border-radius: 3px;
}
</style>

注意，为了使复选框和文字可以一起使用，我们使用了label标签，并将for属性设置为相应的复选框的id值。这样点击文字就可以选中相应的复选框。

H5 点击table行保存获取后的数据

您可以通过以下步骤来实现在 H5 页面中点击表格行并保存获取后的数据：

1. 首先，为每个表格行添加一个点击事件监听器。您可以使用 JavaScript 或 jQuery 来实现这一点。例如，使用 jQuery 可以这样写：

   $('table tr').click(function() {
     // 在这里处理点击事件
   });

2. 在点击事件处理程序中，获取所需的数据。您可以根据表格结构和数据存储方式来选择获取数据的方法。例如，如果每行的数据都是以 `<td>` 元素的文本内容表示，您可以使用以下代码来获取每列的数据：

   var rowData = $(this).find('td').map(function() {
     return $(this).text();
   }).get();

3. 将获取到的数据保存在适当的位置，例如变量、数组或者发送到服务器进行保存。您可以根据需求选择适当的保存方式。

   // 将 rowData 存储到变量中
   var savedData = rowData;

   // 或者将 rowData 存储到数组中
   var dataArray = [];
   dataArray.push(rowData);

   // 或者将 rowData 发送到服务器进行保存
   $.ajax({
     url: 'saveData.php',
     method: 'POST',
     data: { rowData: rowData },
     success: function(response) {
       // 处理保存成功后的逻辑
     },
     error: function(xhr, status, error) {
       // 处理保存失败后的逻辑
     }
   });

通过以上步骤，您可以在 H5 页面中点击表格行并保存获取后的数据。请根据您的具体需求进行适配和修改。