首页 新闻 赞助 找找看

新手求问!!!用JS创建Table进行添加.修改.删除!还没有做完,求高手解答..

1
悬赏园豆:20 [已解决问题] 解决于 2011-03-04 15:56

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">
        //定义一个班级对象
        var classes;
        //定义一个学生对象
        function Student(_id, _name, _sex, _age) {
            this.id = _id;
            this.name = _name;
            this.sex = _sex;
            this.age = _age;
        }
        window.onload = function() {
            tow_load();
        }

        function tow_load() {
            classes = [
                         new Student(2, "Dangpei", "nan", 21),
                         new Student(3, "Bangying", "nv", 20),
                         new Student(1, "Ciyang", "nan", 21),
                         new Student(4, "Aing", "nv", 19)
                     ];
            //数组进行排序
            //classes.sort();
            //创建TABLE
            createtable(classes);       
        }
       
        //用DOM实现表格创建
        function createtable(cls) {
            var table = document.createElement("table");
            table.setAttribute("id","t1");
            table.setAttribute("border", "1");
            document.getElementById("table1").appendChild(table);

            //创建表格标题
            var thead = table.insertRow(0); //第0行
            var h1 = thead.insertCell(0); //第0列
            h1.innerText = "编号";
            var h2 = thead.insertCell(1);
            h2.innerText = "姓名";
            var h3 = thead.insertCell(2);
            h3.innerText = "性别";
            var h4 = thead.insertCell(3);
            h4.innerText = "年龄";
            h1.onclick = function() { SortStudent("id", cls); };
            h2.onclick = function() { SortStudent("name", cls); };
            thead.insertCell(4).innerText = "添加";
            thead.insertCell(5).innerText = "修改";
            thead.insertCell(6).innerText = "删除";
            //读取内容信息
            for (var i = 0; i < cls.length; i++) {
                var r = table.insertRow(1);
                r.insertCell(0).innerText = cls[i].id;
                r.insertCell(1).innerText = cls[i].name;
                r.insertCell(2).innerText = cls[i].sex;
                r.insertCell(3).innerText = cls[i].age;
                //创建添加按钮
                var butadd = document.createElement("input");
                butadd.setAttribute("type", "button");
                butadd.setAttribute("id", "btnadd");
                butadd.setAttribute("value", "添加");
                butadd.onclick = function() { butAdd_click(this); }
                var addCell = r.insertCell(4);
                addCell.appendChild(butadd);
                //创建修改按钮
                var butupdate = document.createElement("input");
                butupdate.setAttribute("type", "button");
                butupdate.setAttribute("value", "修改");
                var updateCell = r.insertCell(5);
                updateCell.appendChild(butupdate);
                butupdate.onclick = function() { butupdate_click(this); }
                //创建删除按钮
                var butDelete = document.createElement("input");
                butDelete.setAttribute("type", "button");
                butDelete.setAttribute("value", "删除");
                var deleteCell = r.insertCell(6);
                deleteCell.appendChild(butDelete);
                butDelete.onclick = function() { butDelete_click(this); }
            }
        }
        //type 排序的方式 cls:要排序的数组对象
        function SortStudent(type,cls) {
            if (type == "id")
                cls.sort(SortById);
            else {
                cls.sort(SortByName);
            }
            //清空DIV
            document.getElementById("table1").innerHTML = "";
            //重新加载数组数据
            createtable(cls);
        }
        //按编号进行排序
        function SortById(a, b) {
            return -(a.id-b.id);
        }

        //按姓名排序
        function SortByName(a, b) {
            if (a.name > b.name)
                return -1;
            else if (a.name < b.name)
                return 1;
            else
                return 0;
        }

        //添加
        function butAdd_click(butadd) {
            //获取Table
            var table = document.getElementById("t1");
            //获取row
            var row = table.insertRow(butadd.parentElement.parentElement.rowIndex);
            var cl1 = row.insertCell(0);
            var txtid = document.createElement("input");
            txtid.setAttribute("type", "text");
            txtid.setAttribute("id", "txtid");
            txtid.setAttribute("value","ok");
            cl1.appendChild(txtid);

            var cl2 = row.insertCell(1);
            var txtname = document.createElement("input");
            txtname.setAttribute("type", "text");
            txtname.setAttribute("id", "txtname");
            txtname.setAttribute("value", "name");
            cl2.appendChild(txtname);

            var cl3 = row.insertCell(2);
            var txtsex = document.createElement("input");
            txtsex.setAttribute("type", "text");
            txtsex.setAttribute("id", "txtsex");
            txtsex.setAttribute("value", "sex");
            cl3.appendChild(txtsex);

            var cl4 = row.insertCell(3);
            var txtage = document.createElement("input");
            txtage.setAttribute("type", "text");
            txtage.setAttribute("id", "txtage");
            cl4.appendChild(txtage);

            var clsave = row.insertCell(4);
            var save = document.createElement("input");
            save.setAttribute("type", "button");
            save.setAttribute("value", "保存");
            save.onclick = function() { save_click(this); }
            clsave.appendChild(save);

            var clcancel = row.insertCell(5);
            var cancel = document.createElement("input");
            cancel.setAttribute("type", "button");
            cancel.setAttribute("value", "取消");
            cancel.onclick = function() {cancel_click(this)};
            clcancel.appendChild(cancel);
        }
        //添加保存
        function save_click(save) {
            //alert(save.value);
            var id = document.getElementById("txtid").value;
            var name = document.getElementById("txtname").value;
            var sex = document.getElementById("txtsex").value;
            var age = document.getElementById("txtage").value;
            //清空DIV
            document.getElementById("table1").innerHTML = "";
            //重新加载数组数据
            tow_load();
           
        }
        function cancel_click(cls) {
            //清空DIV
            document.getElementById("table1").innerHTML = "";
            //重新加载数组数据
            tow_load();
         }
        //修改
        function butupdate_click(update) {
            var table = document.getElementById("t1");
            var row = table.insertRow(update.parentElement.parentElement.rowIndex);
            alert(row);
        }

        //删除
        function butDelete_click(butdelate) {
            var table = document.getElementById("t1");
            var row = butdelate.parentElement.parentElement.rowindex;
            alert(row);
        }
    </script>

</head>
<body>
    <div id="table1" align="center">
    </div>
</body>
</html>

蝸牛漫步的主页 蝸牛漫步 | 初学一级 | 园豆:0
提问于:2011-02-17 17:40
< >
分享
最佳答案
0

function deltr(trid) {

    var row = document.getElementById("hid_name").value;
        var tr = trid.parentNode.parentNode;
    tr.parentNode.removeChild(tr);

}

删除table的某行

收获园豆:20
cuxin | 菜鸟二级 |园豆:285 | 2011-02-18 16:24
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册