table 选中多行tr 添加addClass并根据class 获取选中的数据
时间: 2024-03-17 15:41:49 浏览: 30
可以通过以下代码实现:
```javascript
// 选中多行tr添加class
$('table tr').click(function() {
$(this).toggleClass('selected');
});
// 获取选中的数据
var selectedData = [];
$('table tr.selected').each(function() {
var rowData = [];
$(this).find('td').each(function() {
rowData.push($(this).text());
});
selectedData.push(rowData);
});
```
首先,通过点击事件给选中的行添加 `selected` 类。然后,通过 `each` 方法遍历所有选中的行,获取每个单元格的文本内容,并将其存储在一个数组中。最后,将每个行的数据存储在一个二维数组中,这个数组就是我们想要的选中的数据。
相关问题
bootstrap 选中行变色
要实现选中行变色,可以使用 Bootstrap 的 table-hover 类。这个类会在鼠标悬停在表格行上时为该行添加背景色。
但是如果想要点击行时也能变色,需要使用 JavaScript 或 jQuery 来实现。可以添加一个点击事件监听器,当用户点击表格行时,为该行添加特定样式。
以下是一个使用 jQuery 实现选中行变色的示例代码:
```html
<table class="table table-hover">
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>jane@example.com</td>
</tr>
<tr>
<td>Bob</td>
<td>Smith</td>
<td>bob@example.com</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
// 添加点击事件监听器
$('table tbody tr').click(function() {
// 取消所有选中行的样式
$('table tbody tr').removeClass('selected');
// 为当前行添加选中样式
$(this).addClass('selected');
});
});
</script>
<style>
/* 选中行的样式 */
.selected {
background-color: #007bff;
color: #fff;
}
</style>
```
在这个示例中,当用户点击表格行时,会为该行添加 `selected` 样式,使其背景色变为蓝色,文本颜色变为白色。同时,会取消其他已选中行的样式。
bootstraptable 如何根据子表是否有数据,来设置父子表前面的加号的显示隐藏
可以利用 Bootstrap Table 提供的 onExpandRow 事件,当某一行展开或折叠时触发该事件,我们可以在该事件中进行判断子表是否有数据,从而设置父子表前面的加号的显示隐藏。
具体实现方法如下:
1. 首先,在表格初始化时,需要在父表的 columns 中设置一个 formatter 函数,用于自定义父表前面的加号图标。
```javascript
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: 'Name'
}, {
formatter: function (value, row, index) {
return '<i class="glyphicon glyphicon-plus"></i>';
}
}]
```
2. 然后,在 onExpandRow 事件中,我们可以通过 row 参数获取当前展开的行的数据,进而判断该行对应的子表是否有数据。如果有数据,则将父表前面的加号图标变为减号;如果没有数据,则隐藏父表前面的加号图标。
```javascript
onExpandRow: function (index, row, $detail) {
var $subTable = $detail.html('<table></table>').find('table');
$subTable.bootstrapTable({
data: row.subTableData,
columns: [{
field: 'id',
title: 'Sub ID'
}, {
field: 'name',
title: 'Sub Name'
}]
});
// 判断子表是否有数据,设置父子表前面的加号图标
var $icon = $(this).find('tr[data-index="' + index + '"] > td:first-child > i');
if (row.subTableData && row.subTableData.length > 0) {
$icon.removeClass('glyphicon-plus').addClass('glyphicon-minus');
} else {
$icon.hide();
}
}
```
通过以上方法,可以根据子表是否有数据来设置父子表前面的加号的显示隐藏。