转载自:https://bbs.csdn.net/topics/230018031
js代码
/*
* 点击tr即可勾选当前行复选框
* zhouxy
* */
function checkTr(tr) {
var tds = tr.childNodes;
for(var j = 0; j < tds.length; j++) {
var inputs = tds[j].childNodes;
for(var i = 0; i < inputs.length; i++) // 遍历页面上所有的 input
{
if(inputs[i].type == "checkbox") {
inputs[i].checked = !inputs[i].checked;
tr.style.backgroundColor = inputs[i].checked ? "#f3fbff" : "";
}
}
}
}
function checkInput(input){
input.checked=!input.checked;
}
HTML代码,tr与checkbox同时加上onclick事件即可。只加tr的onclick事件checkTr(this),可实现点击tr即可勾选复选框。但是单独点击复选框失效,所以需增在checkbox上增加onclick事件checkInput(this)。
{{if msg != ""}}
<tr>
<td colspan="8">
<p>{{msg}}</p>
</td>
</tr>
{{/if}} {{each entity}}
<tr onclick="checkTr(this);">
<td>
<input onclick="checkInput(this);" type="checkbox" name="single_select" value="{{$value.id}}" hostip="{{$value.ip}}" class="chb" />
</td>
<td>
<a class="edit" onclick="viewFileSystem('{{$value.ip}}')">{{$value.name}}</a>
</td>
<td>
<span>{{$value.ip}}</span>
</td>
<td>
<div class="Bar">
<div style="width: {{$value.cpuUsage}}%;">
{{$value.cpuUsage}}%
</div>
</div>
</td>
<td>
<div class="Bar">
<div style="width: {{$value.memoryUsage}}%;">
{{$value.memoryUsage}}%
</div>
</div>
</td>
<td>
<div class="Bar">
<div style="width: {{$value.diskUsage}}%;">
{{$value.diskUsage}}%
</div>
</div>
</td>
<td>
<span>{{$value.cluster_name}}</span>
</td>
<td>
{{if $value.status=="UP"}}
<span class="status_nomal">正常运行</span> {{else if $value.status=="DOWN"}}
<span class="status_unnomal">停止</span> {{else}}
<span class="status_unknow"></span> {{/if}}
</td>
<td>
<span>{{$value.last_check_time}}</span>
</td>
</tr>
{{/each}}