首页 > 其他 > 详细

今日奉上动态添加表格及删除操作!

时间:2019-08-08 15:48:20      阅读:103      评论:0      收藏:0      [点我收藏+]

效果图

 技术分享图片

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态创建表格实操</title>
    <style>
        #table,tr,td{
            border: 1px #000000 solid;
        }
        /* tr,td{
            width: 10px;
            height: 10px;
        } */
    </style>
</head>
<body>
    行:<input type="text" name="" id="row">
    列:<input type="text" name="" id="col">
    <input type="submit" name="" id="submit" value="开始创建">
    <table id="table">
        <!-- <tr>
            <td></td>
        </tr> -->
    </table>
    <script src="public.js"></script>
    <script>
        var row = $id("row"),
            col = $id("col"),
            submit = $id("submit"),
            table = $id("table");
        submit.onclick = function(){
            var rVal = Number(row.value);
            var cVal = Number(col.value);
            for(i = 0 ; i < rVal ; i++){
                var tr = document.createElement("tr");
                table.appendChild(tr);
                
                for(j = 0 ; j <= cVal ; j++){
                    var td = document.createElement("td");
                    tr.appendChild(td);
                    if(j != cVal ){
                        td.innerHTML = "磊子哥真帅!";
                        td.style.background = getColor();
                    }else{
                        var a = document.createElement("a");
                        a.href = "#";
                        td.appendChild(a);
                        a.innerHTML = "购买";
                        a.onclick = function(){
                            table.removeChild(this.parentNode.parentNode)
                            var flag = true;
                            setTimeout(function(){
                                if(flag){
                                alert("恭喜您成功买入磊子大帅哥!")
                            }
                            },)
                        }
                        
                    }
                }
            }

        }
    </script>
</body>
</html>

 

源码分享下载外链:

https://www.lanzous.com/b886162/ 
密码:7cm1

今日奉上动态添加表格及删除操作!

原文:https://www.cnblogs.com/g-code/p/11321120.html

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