选中复选框给tr添加类根据类找到选中的行数据
时间: 2024-03-17 18:41:58 浏览: 58
可以通过以下代码实现:
```javascript
// 选中复选框给tr添加类
$('table input[type="checkbox"]').click(function() {
var tr = $(this).closest('tr');
if ($(this).is(':checked')) {
tr.addClass('selected');
} else {
tr.removeClass('selected');
}
});
// 根据类找到选中的行数据
var selectedData = [];
$('table tr.selected').each(function() {
var rowData = [];
$(this).find('td').each(function() {
rowData.push($(this).text());
});
selectedData.push(rowData);
});
```
首先,通过点击事件给选中的复选框对应的行添加 `selected` 类。然后,通过 `each` 方法遍历所有选中的行,获取每个单元格的文本内容,并将其存储在一个数组中。最后,将每个行的数据存储在一个二维数组中,这个数组就是我们想要的选中的数据。
相关问题
layui table行点击tr_layui的点击table行选中复选框
要实现行点击选中复选框的效果,可以通过以下步骤来实现:
1. 在表头中添加一个全选的复选框,并为其设置一个ID。
2. 在每一行的第一列中添加一个复选框,并为其设置一个class,例如“check-box”。
3. 给表格绑定一个点击事件,在点击事件中判断点击的元素是否为复选框或者全选的复选框,如果是,则执行对应的操作。
4. 当点击某一行时,获取该行的复选框元素,并设置其选中状态为true。
下面是一个示例代码:
```html
<table class="layui-table" id="myTable">
<thead>
<tr>
<th><input type="checkbox" name="" lay-skin="primary" id="checkAll"></th>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr class="tr_layui">
<td><input type="checkbox" name="" lay-skin="primary" class="check-box"></td>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
</tr>
<tr class="tr_layui">
<td><input type="checkbox" name="" lay-skin="primary" class="check-box"></td>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
</tr>
</tbody>
</table>
<script>
// 全选复选框的点击事件
$('#checkAll').on('click', function() {
if ($(this).is(':checked')) {
$('.check-box').prop('checked', true);
} else {
$('.check-box').prop('checked', false);
}
});
// 行点击事件
$('.tr_layui').on('click', function() {
// 判断是否为复选框或者全选复选框
if ($(event.target).is(':checkbox')) {
return;
}
// 获取该行的复选框元素
var checkBox = $(this).find('.check-box');
// 判断该复选框是否已选中
if (checkBox.is(':checked')) {
checkBox.prop('checked', false);
} else {
checkBox.prop('checked', true);
}
});
</script>
```
在这段代码中,我们首先给表头添加一个ID为“checkAll”的全选复选框,然后在每一行的第一列中添加class为“check-box”的复选框。接着,我们给全选复选框和每行绑定点击事件,在事件中判断点击的元素是否为复选框或者全选复选框,然后执行对应的操作。当点击某一行时,我们获取该行的复选框元素,并设置其选中状态。这样,就可以实现行点击选中复选框的效果了。
jquery选中复选框获取这一行的全部数据
可以使用jQuery的`closest()`和`find()`方法来实现选中复选框获取相应行的数据。假设你的HTML代码如下:
```html
<table>
<tr>
<td><input type="checkbox"></td>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Jane</td>
<td>Smith</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Bob</td>
<td>Johnson</td>
</tr>
</table>
```
那么你可以使用以下jQuery代码:
```javascript
$('input[type="checkbox"]').change(function() {
if(this.checked) {
var row = $(this).closest('tr');
var firstName = row.find('td:nth-child(2)').text();
var lastName = row.find('td:nth-child(3)').text();
console.log(firstName + ' ' + lastName);
}
});
```
这样当你选中一个复选框时,就会输出相应行的第二列和第三列的文本内容。你可以根据实际情况修改代码中的`nth-child`参数来获取相应列的数据。
阅读全文