HTML动态操作表格 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>动态操作表格</title>
<script>
var flag=false,number=2;
function addRow(){
    flag=!flag;
    //添加一行
    var newTr=table1.insertRow(table1.rows.length);
    //添加两列
    var newTd0=newTr.insertCell();
    var newTd1=newTr.insertCell();
    //设置列内容和属性
    if(flag){
        newTr.style.backgroud="E0FFFF";
    }
    else{
        newTr.style.backgroud="90FF90";
    }
    number++;
    newTd0.innerText="第"+number+"行";
}
function delRow(){
    if(number>1){
        
        flag=!flag;
        table1.deleteRow(table1.rows.length-1);
        number--;
    }
}

</script>
</head>

<body>
<table width="200" cellspacing="1" id="table1" style="font-size:14px; border:1px solid #cad9ea;">
<tr bgcolor="#90EE90">
<td>第1行</td>
<td></td>
</tr>
<tr bgcolor="#909090">
<td>第2行</td>
<td></td>
</tr>
</table>
<input type="button" value="插入行" onClick="addRow()"/>&nbsp;&nbsp;
<input type="button" value="删除行" onClick="delRow()"/>
</body>
</html>

 

posted @ 2019-05-19 09:51  chuanzi  阅读(3218)  评论(0)    收藏  举报