jsp代码
//表头代码
<table class="table table-bordered table-condensed table-striped" data-toggle="table" >
<thead>
<tr>
<th data-field="state" ><input id="boxAll" type="checkbox" value="" onclick="selectAll()"></th>
<th data-field="alarmName" data-align="center" data-sortable="true">报警名称</th>
<th data-field="alarmMinValue" data-align="center" >最小值</th>
<th data-field="alarmLowerValue" data-align="center">下限值</th>
<th data-field="alarmUperValue" data-align="center">上限值</th>
<th data-field="alarmMaxValue" data-align="center">最大值</th>
<th data-field="alarmValue" data-align="center">当前值</th>
<th data-field="alarmStatus" data-align="center">报警状态</th>
<th data-field="sCreatetime" data-align="center">报警时间</th>
</tr>
</thead>
<tbody id="allAlarmInfo">
</tbody>
</table>
----------------------------------------------------------------------------
Script 代码
//原始数据生成代码
function getData() {
var data = {
"msgCount" :10,
"pageNumber":0
};
$('#allAlarmInfo').empty();//清空处理
$.getJSON("<%=request.getContextPath()%>/pages/alarm/alarm.ajax",data, function (data) {$.each(data.list,function(i, d){
if (d.alarmValue <= d.alarmMinValue){
var html = '<tr style="color:red">';
}else if (d.alarmValue > d.alarmMaxValue){
var html = '<tr style="color:red">';
}else if (d.alarmValue> d.alarmMinValue && d.alarmValue <= d.alarmLowerValue){
var html = '<tr style="color:orange">';
}else if (d.alarmValue> d.alarmUperValue && d.alarmValue <= d.alarmMaxValue){
var html = '<tr style="color:orange">';
}else{
var html = '<tr>';
}
html+= '<td valign="middle"><input type="checkbox" name="box" id="'+d.alarmId+'" value="'+d.alarmId+'"/></td>';
html+= '<td valign="middle">'+ d.alarmName +'</td>';
html+= '<td valign="middle">'+ d.alarmMinValue +'</td>';
html+= '<td valign="middle">'+ d.alarmLowerValue +'</td>';
html+= '<td valign="middle">'+ d.alarmUperValue +'</td>';
html+= '<td valign="middle">'+ d.alarmMaxValue +'</td>';
html+= '<td valign="middle">'+ d.alarmValue +'</td>';
html+= '<td valign="middle">'+ d.alarmStatus +'</td>';
html+= '<td valign="middle">'+ d.sCreatetime +'</td>';
html+= '</tr>';
$('#allAlarmInfo').append(html);
});
});
}
//全选与非全选逻辑
function selectAll(){
if ( $('#boxAll').prop("checked") ){
$('#allAlarmInfo td input').each(function(){
$(this).prop("checked", true);
});
}else{
$('#allAlarmInfo td input').each(function(){
$(this).prop("checked", false);
});
}
}