dom 动态生产表格

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    #form1 {
        width: 480px;
        border: 1px solid #eee;
        border-radius: 5px;
        margin: 30px auto;
        padding: 10px;
        line-height: 30px;
        position: relative;
    }
    #tab1 {
        width: 500px;
        margin: 30px auto;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #000;
        padding: 5px;
    }
    tr {
        cursor: pointer;
    }
    tbody tr td:first-child {
        text-align: center;
    }
    input[type="checkbox"] {
        width: 15px;
        height: 15px;
    }
    input[type="button"] {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
    #div1 {
        position: relative;
        width: 480px;
        padding: 10px;
        margin: 0 auto;
    }
</style>
<script type="text/javascript">
    function getChecked(form,name)
    {
        var arr = [];
        for (var i = 0; i < form[name].length; i++)
        {
            if(form[name][i].checked)
            {
                arr.push(form[name][i].value)
            }
        }
        if(form[name][0].type == 'radio')
        {
            return arr[0];
        }
        if(form[name][0].type == 'checkbox')
        {
            return arr;
        }
    };
</script>
<script type="text/javascript">
window.onload = function ()
{
    var data = [
    {'name': '赵一', 'sex': '男', 'age': '35'},
    {'name': '钱二', 'sex': '女', 'age': '28'},
    {'name': '孙三', 'sex': '男', 'age': '15'},
    {'name': '李四', 'sex': '男', 'age': '48'},
    {'name': '周五', 'sex': '男', 'age': '36'},
    {'name': '武六', 'sex': '女', 'age': '49'},
    {'name': '郑七', 'sex': '女', 'age': '75'},
    {'name': '王九', 'sex': '男', 'age': '17'},
    ];

    var otab = document.getElementById('tab1');
    var obody = otab.tBodies[0];
    var oform = document.getElementById('form1');
    var oall = document.getElementById('checkAll');
    var odelet = document.getElementById('delete');

    for( var i = 0; i < data.length; i++)
    {
        var otr = document.createElement('tr');

        var otd = document.createElement('td');
        otd.innerHTML = '<input type="checkbox">'
        otr.appendChild(otd);

        var otd = document.createElement('td');
        otd.innerHTML = data[i].name;
        otr.appendChild(otd);

        var otd = document.createElement('td');
        otd.innerHTML = data[i].sex;
        otr.appendChild(otd);

        var otd = document.createElement('td');
        otd.innerHTML = data[i].age;
        otr.appendChild(otd);

        obody.appendChild(otr);

        colorline();
    }

    checkbox();
    oform.add.onclick = function ()
    {
        arr = [];
        arr[0] = oform.name.value;
        arr[1] = getChecked(oform,'sex');
        arr[2] = oform.age.value;

        for(var i = 0; i < arr.length; i++ )
        {
            var otr = document.createElement('tr');
            var otd = document.createElement('td');
            otd.innerHTML = '<input type="checkbox">'
            otr.appendChild(otd);

            for(var i = 0; i < arr.length; i++)
            {
                var otd = document.createElement('td');
                otd.innerHTML = arr[i];
                otr.appendChild(otd);
            }
        }
        obody.appendChild(otr);
        oform.reset();
        colorline();
        checkbox();
    };

    function colorline()
    {
        for( var i = 0; i < obody.rows.length; i++ )
        {
            if(i%2)
            {
                obody.rows[i].style.background = '#fff';
            }
            else
            {
                obody.rows[i].style.background = 'pink';
            }

        }
    };

    function checkbox()
    {
        for(var i = 0; i < obody.rows.length; i++ )
        {
            obody.rows[i].onclick = function ()
            {
                this.cells[0].children[0].checked = this.cells[0].children[0].checked == false?true:false;
                check();
            }

            obody.rows[i].cells[0].children[0].onclick = function ()
            {
                this.checked = this.checked == false ? true:false;
                check();
            }
        }
    }

    otab.tHead.onclick = function ()
    {
        oall.checked = oall.checked == false ? true: false;
        checkall();
    };

    oall.onclick = function ()
    {
        this.checked = this.checked == false ? true:false;
        checkall();
    }

    function checkall()
    {
        for( var i = 0; i < obody.rows.length; i++ )
        {
            obody.rows[i].cells[0].children[0].checked = oall.checked;
        }
    };

    function check()
    {
        for( var i = 0; i < obody.rows.length; i++)
        {
            if(!obody.rows[i].cells[0].children[0].checked)
            {
                oall.checked = false;
                return;
            }
        }
        oall.checked = true;
    }

    odelet.onclick = function ()
    {
        oall.checked = false;
        for(var i = 0; i < obody.rows.length; i++ )
        {
            if(obody.rows[i].cells[0].children[0].checked)
            {
                obody.removeChild(obody.rows[i])
                i--;
            }
        }
        colorline();
    }
}
</script>
</head>

<body>
    <form id="form1">
        请输入姓名：<input type="text" name="name"><br>
        请选择性别：<input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女<br>
        请输入年龄：<input type="text" name="age"><br>
        <input type="button" value="添加到表格" name="add">
    </form>
    <table id="tab1">
        <thead>
            <tr>
                <th width="20%"><input type="checkbox" id="checkAll"  id="checkAll"/> 全选</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="div1">
        <input type="button" value="删除所选行" id="delete">
    </div>
</body>
</html>