Python web开发之页面表格选择CheckBox复选框所在行的数据并返回
程序员文章站
2022-05-31 13:29:44
...
背景：开发了个接口测试平台，想通过CheckBox多选用例，然后批量运行，这里我们需要的是用例id的列表
网页：
HTML代码：
<div>
<form role="form" id="form_table">
<div>
<table class="table table-bordered table-hover" id="table_id">
<thead>
<tr>
<th>#</th>
<th>序号</th>
<th>ID</th>
<th>名称</th>
<th>所属项目</th>
<th>所属模块</th>
<th>创建者</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody_id">
{% for foo in case %}
<tr>
<td><input type="checkbox" name="case_chk" value="{{ foo.id }}"></td>
<td>{{ loop.index }}</td>
<td>{{ foo.id }}</td>
<td>{{ foo.name }}</td>
<td>{{ foo.belong_project }}</td>
<td>{{ foo.belong_module }}</td>
<td>{{ foo.author }}</td>
<td>{{ foo.create_time }}</td>
<td>
<div class="btn-toolbar">
<div class="btn-group btn-group-xs">
<button type="button"
class="btn btn-default btn-xs text-primary"
target="_blank"
data-toggle="tooltip" title="运行"
onclick="post_run('/api/{{ username }}/run_test/', {'id':'{{ foo.id }}', 'mode':'run_by_test'})">
<span class="glyphicon glyphicon-play"></span>
</button>
<button type="button"
class="btn btn-default btn-xs text-primary" data-toggle="tooltip" title="编辑">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button type="button"
class="btn btn-default btn-xs text-primary" data-toggle="tooltip" title="恢复">
<span class="glyphicon glyphicon-copy"></span>
</button>
<button type="button"
class="btn btn-default btn-xs text-primary" data-toggle="tooltip" title="删除"
onclick="post_del('/api/{{ username }}/delcase/',{'id':'{{ foo.id }}','type':'{{ foo.type_value }}'})">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<nav aria-label="Page navigation" class="pull-right">
<ul class="pagination">
{{ html|safe }}
</ul>
</nav>
</div>
</form>
</div>
方法：
1、表格的每一行都有一个CheckBox按钮，所以为每一行的复选按钮在HTML代码中设置为同一个name=“case_chk”，并设置复选框的值为想要获取的用例id，然后在加载完的页面通过name获取复选框，再遍历判断是否被选中，选中的就提取复选框的value，返回即可
<script type="text/javascript">
function test() {
var a = document.getElementsByName("case_chk");
var case_id = [];
for (var i=0;i<a.length;i++){
if(a[i].checked){
alert(a[i].value);
case_id.push(a[i].value)
}
}
console.log(case_id)
}
</script>2、这种方法就稍微麻烦一点，需要在表格中新加一列“ID”,然后通过表格的id=table_id获取表格的所有行rows，然后判断哪一个复选框被选中，再获取该复选框的父元素的父元素的行标，然后通过行的cells来获取id所在列取得id值
<script type="text/javascript">
function test() {
var rows = document.getElementById("table_id").rows;
var a = document.getElementsByName("case_chk");
var case_id = [];
for (var i=0;i<a.length;i++){
if(a[i].checked){
alert(a[i].value);
var row = a[i].parentElement.parentElement.rowIndex;
case_id.push(rows[row].cells[2].innerHTML)
}
}
console.log(case_id)
}
</script>