首页 > Web开发 > 详细

HTML动态操作表格

时间:2019-05-19 10:04:43      阅读:136      评论:0      收藏:0      [点我收藏+]
<!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>

 

HTML动态操作表格

原文:https://www.cnblogs.com/chuanzi/p/10888219.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!