javascript动态插入和删除表格行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态插入和删除单元行</title>
    <style>
        h2,h5,#tooltipMsg,p {
            white-space: nowrap;
        }
        td {
            border: 1px solid #ccc;
            height: 50px;
            text-align: center;
            font-size: 10pt;
            padding: 2px;
        }
    </style>
</head>
<body>
    <table id="tableAct" border="1" width="500">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>
<input type="button" id="deleteRow" value="删除第一行" />
<input type="button" id="addRow" value="新增一行" />
<script>
    window.onload=function(){
        trAct=function(table,num,tr){
            if(!tr){ //如果tr参数不存在,执行删除操作
                var _num=table.rows[num];
                if(_num){ //如果被删除的行对象存在,则删除,返回true
                    table.deleteRow(_num);//js的原生函数删除行
                    return true;
                }
                else {
                    return false;//如果删除的对象不存在,则删除失败,返回false;
                }
            }
            else {
                var r=table.insertRow(num), //在指定的位置创建行对象
                        i= 0,
                        l=tr.length;//待插入的数据长度
                for(;i<l;i++){ //遍历待插入数据
                    r.insertCell(i).innerHTML=tr[i];//插入新单元格数据
                }
                return true;//新增成功返回 true;
            }
        }
        /*动态插入和删除单元格*/
        var _tableAct=document.getElementById("tableAct");
        document.getElementById("deleteRow").onclick=function(){ //删除第一行
            trAct(_tableAct,0);
        }
        document.getElementById("addRow").onclick=function(){
            trAct(_tableAct,0,["新增单元格1","新增单元格2"]);
        }
    }
</script>
</body>
</html>

你可能感兴趣的:(javascript动态插入和删除表格行)