?1.1 創(chuàng)建css文件，用于編輯style
? ? ? ? 注意：
? ? ? ? 1.背景顏色用ppt的取色器來獲?。?/p>
? ? ? ? ? ? ? ? 先點(diǎn)擊ppt的形狀輪廓，然后點(diǎn)擊取色器，吸顏色，然后再點(diǎn)擊形狀輪廓的其他輪廓顏色，即可獲取到對應(yīng)顏色。
?
? ? ? ? 2.表格間的灰色線是在th和td中用border屬性設(shè)置的；
????????3.在js中拼接字符串時，不允許在一對雙引號中繼續(xù)出現(xiàn)雙引號，內(nèi)部應(yīng)使用單引號：
str += "<tr bgcolor='#EAF3F2'>";
? ? ? ? 4.?使用css的外部樣式表時，外部樣式會最后把html里設(shè)置的樣式覆蓋掉！
? ? ? ? 5.查詢地區(qū)按鈕實現(xiàn)邏輯：先獲取選擇框的text文本，再創(chuàng)建一個方法，輸入是原始表格數(shù)據(jù)，輸出是新數(shù)據(jù)，通過獲取原始表格每一行第一列的數(shù)據(jù)與text文本進(jìn)行判斷，如果相等，則新數(shù)據(jù)使用push方法添加整行數(shù)據(jù)，如果不相等直接break，開始下一行判斷。注意，要考慮text為“全部”的情況。在得到新的表格數(shù)據(jù)后，先清空原來的表格數(shù)據(jù)，再將新數(shù)據(jù)作為輸入再次調(diào)用原來創(chuàng)建動態(tài)表格的方法即可。
????????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;i<tableDatas.length;i++){
if(i%2==0||i==0){
str += "<tr bgcolor='#EAF3F2'>";
}else{
str += "<tr bgcolor='#FAFFFF'>";
}
for(var j = 0;j<tableDatas[i].length;j++){
str = str+"<td>"+tableDatas[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;i<tableDatas.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>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/date0723.css"/>
<title></title>
</head>
<body>
<label for="location">地區(qū)</label>
<select id="location">
<option>全部</option>
<option>福州</option>
<option>南平</option>
<option>寧德</option>
</select>
<label for="state">狀態(tài)</label>
<select id="state">
<option>全部</option>
</select>
<label for="v-class">電壓等級</label>
<select id="v-class">
<option>全部</option>
</select>
<label for="property">資產(chǎn)屬性</label>
<select id="property">
<option>全部</option>
</select>
<button type="button" onclick="getLocation(tableDatas)" class="bottom-button">查詢</button>
<button type="button" class="bottom-button">重置</button>
<button type="button" class="bottom-button">導(dǎo)出</button>
<button type="button" class="bottom-button">歷史統(tǒng)計</button>
<hr>
<p>當(dāng)前頁 10 條記錄/5587條記錄</p>
<table>
<thead>
<tr>
<th>地區(qū)</th>
<th>線路1</th>
<th>線路2</th>
<th>線路3</th>
<th>線路5</th>
<th>線路5</th>
<th>線路6</th>
<th>線路7</th>
<th>線路8</th>
</tr>
</thead>
<tbody id="tbodyDatas">
</tbody>
</table>
<script src="../js/date0723.js"></script>
<script>
var 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").innerHTML=getTbodyDatas(tableDatas);
</script>
<div align = "center">
<button type="button" class="last-button">前一頁</button>
<button type="button" class="last-button">1</button>
<button type="button" class="last-button">2</button>
<button type="button" class="last-button">3</button>
<button type="button" class="last-button">4</button>
<button type="button" class="last-button">5</button>
<button type="button" class="last-button">后一頁</button>
</div>
</body>
</html>? ? ? ? 運(yùn)行結(jié)果：
文章來源：http://www.zghlxwxcb.cn/news/detail-601692.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-601692.html
到了這里，關(guān)于1 請使用js、css、html技術(shù)實現(xiàn)以下頁面，表格內(nèi)容根據(jù)查詢條件動態(tài)變化。的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)16（HTML5、CSS3、JavaScript ）表格課后練習(xí)網(wǎng)頁標(biāo)題：域標(biāo)簽的使用網(wǎng)頁標(biāo)題：美家裝飾聯(lián)系我們網(wǎng)頁標(biāo)題：登錄界面網(wǎng)頁標(biāo)題問卷調(diào)查——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/01/820808-1.png)
