JavaScript 输入多行多列,并且可以删除

输入多行多列,并且可以删除

<input type="text" class="row"> 行:<br>
<input type="text" class="col"> 列:<br>
<input type="button" value="提交" class="button"><br>
<div class="box"></div>
<script>
    function $(id) {
        return document.getElementById(id);
    }

    function create(tagName) {
        return document.createElement(tagName);
    }

    $('btn').onclick = function() {
        var rValue = $('row').value;
        var cValue = $('col').value;
        var oTable = create('table');
        oTable.border = 1;
        for (var i = 0; i < rValue; i++) {
            var oTr = create('tr');
            for (var j = 0; j < cValue; j++) {
                var oTd = create('td');
                oTd.innerHTML = 'aaa';
                oTr.appendChild(oTd);
            }
            // 再添加一列
            var endTd = create('td');
            endTd.innerHTML = '<a href="javascript:;">删除</a>';
            oTr.appendChild(endTd);
            oTable.appendChild(oTr);
        }
        $('box').appendChild(oTable);

        // 给删除绑定单击事件 删除元素是动态创建 事件绑定在函数内
        var as = $('box').getElementsByTagName('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                if (confirm('你确定要删除吗?')) {
                    this.parentNode.parentNode.remove();
                }
            }
        }
    }
</script>
posted @ 2020-11-26 15:17  qqaazzhf  阅读(231)  评论(0)    收藏  举报