表格中包括sex一列,包括“男”或“女”或“未知”三种值,点击表格中的一行,获取单元格值返回到select,页面中已经写好了select和option,要求选择框显示点击行在sex的内容
时间: 2024-05-04 16:22:15 浏览: 71
您可以通过以下步骤实现:
1. 给每一行的 sex 单元格添加一个类名,比如 `class="sex-cell"`。
2. 给每一个 select 选择框添加一个 id,比如 `id="sex-select"`。
3. 使用 jQuery 监听表格行的点击事件,获取点击行的 sex 单元格的值,并将其赋值给 select 选择框的选中项。
4. 最后,您可以使用 jQuery 的 `val()` 方法将选中项的值设置为 select 选择框的选中项。
以下是一个示例代码:
```html
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td class="sex-cell">Male</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>25</td>
<td class="sex-cell">Female</td>
</tr>
<tr>
<td>Unknown</td>
<td>Unknown</td>
<td class="sex-cell">Unknown</td>
</tr>
</tbody>
</table>
<select id="sex-select">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Unknown">Unknown</option>
</select>
<script>
$(document).ready(function() {
$('.sex-cell').click(function() {
var sex = $(this).text().trim();
$('#sex-select').val(sex);
});
});
</script>
```
在上面的示例代码中,我们使用了 jQuery 来监听表格行的点击事件,获取 sex 单元格的值,并将其设置为 select 选择框的选中项。请注意,我们使用了 `trim()` 方法来清除文本中的任何空格或换行符。
阅读全文