HTML動態操作表格

本文轉載自查看原文 2019-05-19 09:51 1212 javascript

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS 動態操作表格 JQuery動態操作表格用js操作表格 js操作表格 python 操作表格 itextpdf5操作表格 js操作表格、table、 JavaScript操作表格及CSS樣式 Jqgrid入門-操作表格的數據(二) jquery操作表格合並單元格