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}}