针对屏幕上显示的行，显示/隐藏相应的列。Decipher调查平台（XML）

1. 首先，要在HTML中添加一个div元素，用于包含表格和控制列的复选框。

HTML代码：

<div id="table-wrapper">
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>30</td>
<td>Male</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>25</td>
<td>Female</td>
</tr>
<tr>
<td>3</td>
<td>Bob Johnson</td>
<td>40</td>
<td>Male</td>
</tr>
</tbody>
</table>
<div id="controls">
<label><input type="checkbox" value="1" checked> Name</label>
<label><input type="checkbox" value="2" checked> Age</label>
<label><input type="checkbox" value="3" checked> Gender</label>
</div>
</div>

2. 接下来，需要用JavaScript编写代码来监听复选框的更改事件，并根据选择显示或隐藏相应的列。我们可以使用jQuery来实现这一点。

JavaScript代码：

$(document).ready(function() {
// Hide the columns that are not checked
$('#controls :checkbox').change(function() {
var col = $(this).val();
if ($(this).prop('checked')) {
$('table td:nth-child(' + col + '), table th:nth-child(' + col + ')').show();
} else {
$('table td:nth-child(' + col + '), table th:nth-child(' + col + ')').hide();
}
});

// Show all the columns by default
$('#controls :checkbox').prop('checked', true);
});

此代码将从复选框中获取列号，然后使用jQuery选择器显示或隐藏相应的列。如果复选框被选中，它将调用show()方法，否则它将调用hide()方法。在页面加载时，我们将所有复选框设置为已选中，并显示所有列。