使用js改變表格行的背景色
阿新 • • 發佈：2019-01-18
<!doctype html>
<html>
<head>
<!--表格內外邊框屬性測試-->
<style>
td{
text-align:center;
width:100px;
height:30px;
}
</style>
<script>
function test(){
var rows=document.getElementById("table1").rows;//獲取表格的所有行
for(var i=0;i<rows.length;i++){//遍歷表格的所有行
if(i%2==0){//如果是偶數行
rows[i].style.backgroundColor="red";//更改偶數行的背景顏色
}
}
}
function test2(){
var rows=document.getElementById("table1").rows;
for(var i=0;i<rows.length;i++){
if(i%2!=0){
rows[i].style.backgroundColor="green";
}
}
}
</script>
<meta charset="UTF-8">
</head>
<body>
<table id="table1" cellspacing="1" cellpadding="1">
<tr>
<th>姓名</th><th>年齡</th><th>性別</th>
</tr>
<tr>
<td>奧巴馬</td><td>50</td><td>男</td>
</tr>
<tr>
<td>川普</td><td>60</td><td>男</td>
</tr>
<tr>
<td>三胖</td><td>30</td><td>男</td>
</tr>
<tr>
<td>習近平</td><td>50</td><td>男</td>
</tr>
</table>
<input type="button" onclick="test()" value="測試外邊框"><input type="button" value="測試內邊框" onclick="test2()">
</body>
</html>
<html>
<head>
<!--表格內外邊框屬性測試-->
<style>
td{
text-align:center;
width:100px;
height:30px;
}
</style>
<script>
function test(){
var rows=document.getElementById("table1").rows;//獲取表格的所有行
for(var i=0;i<rows.length;i++){//遍歷表格的所有行
if(i%2==0){//如果是偶數行
rows[i].style.backgroundColor="red";//更改偶數行的背景顏色
}
}
}
function test2(){
var rows=document.getElementById("table1").rows;
for(var i=0;i<rows.length;i++){
if(i%2!=0){
rows[i].style.backgroundColor="green";
}
}
}
</script>
<meta charset="UTF-8">
</head>
<body>
<table id="table1" cellspacing="1" cellpadding="1">
<tr>
<th>姓名</th><th>年齡</th><th>性別</th>
</tr>
<tr>
<td>奧巴馬</td><td>50</td><td>男</td>
</tr>
<tr>
<td>川普</td><td>60</td><td>男</td>
</tr>
<tr>
<td>三胖</td><td>30</td><td>男</td>
</tr>
<tr>
<td>習近平</td><td>50</td><td>男</td>
</tr>
</table>
<input type="button" onclick="test()" value="測試外邊框"><input type="button" value="測試內邊框" onclick="test2()">
</body>
</html>