志愿服务网站建设中标公告,爱客crm软件,深圳最好的区排名,wordpress对接火车头1.1 创建css文件#xff0c;用于编辑style 注意#xff1a; 1.背景颜色用ppt的取色器来获取#xff1a; 先点击ppt的形状轮廓#xff0c;然后点击取色器#xff0c;吸颜色#xff0c;然后再点击形状轮廓的其他轮廓颜色#xff0c;即可获取到对应颜色。 2.表格间的灰色线… 1.1 创建css文件用于编辑style 注意 1.背景颜色用ppt的取色器来获取 先点击ppt的形状轮廓然后点击取色器吸颜色然后再点击形状轮廓的其他轮廓颜色即可获取到对应颜色。 2.表格间的灰色线是在th和td中用border属性设置的 3.在js中拼接字符串时不允许在一对双引号中继续出现双引号内部应使用单引号
str tr bgcolor#EAF3F2;4. 使用css的外部样式表时外部样式会最后把html里设置的样式覆盖掉 5.查询地区按钮实现逻辑先获取选择框的text文本再创建一个方法输入是原始表格数据输出是新数据通过获取原始表格每一行第一列的数据与text文本进行判断如果相等则新数据使用push方法添加整行数据如果不相等直接break开始下一行判断。注意要考虑text为“全部”的情况。在得到新的表格数据后先清空原来的表格数据再将新数据作为输入再次调用原来创建动态表格的方法即可。 css文件如下
select{margin-right: 10px;
}body{height: 800PX;background: linear-gradient(to bottom,#DCF3F2,#A3E5E7);
}button{color: white;background-color: #007A89;border-color: #007A89;
}hr{border: 0.1px dashed black;
}p{text-align: right;font-size: 13px;margin-top: 0;margin-bottom: 0;
}table{width: 100%;border-collapse: collapse;
}th{background-color: #00A8A6;color: white;
}th,td{text-align: center;border: solid silver;font-size: 14px;padding: 0.1px;
} js文件如下
function getTbodyDatas(tableDatas){var str ;for(var i 0;itableDatas.length;i){if(i%20||i0){str tr bgcolor#EAF3F2;}else{str tr bgcolor#FAFFFF;}for(var j 0;jtableDatas[i].length;j){str strtdtableDatas[i][j]/td;}str /tr;}return str;
};function getNewDatas(tableDatas){var newDatas [];var selectLabel document.getElementById(location);var selectText selectLabel.options[selectLabel.selectedIndex].text;if(selectText 全部){return tableDatas;}for(var i 0;itableDatas.length;i){if(tableDatas[i][0]selectText){newDatas.push(tableDatas[i]);}}console.log(newDatas);return newDatas;
}function getLocation(){document.getElementById(tbodyDatas).innerHTML ;var newDatas getNewDatas(tableDatas);document.getElementById(tbodyDatas).innerHTML getTbodyDatas(newDatas);}; html文件如下
!DOCTYPE html
htmlheadmeta charsetutf-8link relstylesheet typetext/css href../css/date0723.css/title/title/headbodylabel forlocation地区/labelselect idlocationoption全部/optionoption福州/optionoption南平/optionoption宁德/option/selectlabel forstate状态/labelselect idstateoption全部/option/selectlabel forv-class电压等级/labelselect idv-classoption全部/option/selectlabel forproperty资产属性/labelselect idpropertyoption全部/option/selectbutton typebutton onclickgetLocation(tableDatas) classbottom-button查询/buttonbutton typebutton classbottom-button重置/buttonbutton typebutton classbottom-button导出/buttonbutton typebutton classbottom-button历史统计/buttonhrp当前页 10 条记录/5587条记录/ptabletheadtrth地区/thth线路1/thth线路2/thth线路3/thth线路5/thth线路5/thth线路6/thth线路7/thth线路8/th/tr/theadtbody idtbodyDatas/tbody/tablescript src../js/date0723.js/scriptscriptvar tableDatas [[福州,1,2,5,3,5,5,6,8],[宁德,1,22,5,3,5,5,6,8],[福州,1,42,5,3,5,5,6,8],[南平,1,52,5,3,5,5,6,8],];document.getElementById(tbodyDatas).innerHTMLgetTbodyDatas(tableDatas);/scriptdiv align centerbutton typebutton classlast-button前一页/buttonbutton typebutton classlast-button1/buttonbutton typebutton classlast-button2/buttonbutton typebutton classlast-button3/buttonbutton typebutton classlast-button4/buttonbutton typebutton classlast-button5/buttonbutton typebutton classlast-button后一页/button/div/body
/html 运行结果
