html+js实现动态添加表格及删除

html+js实现动态添加表格及删除.

代码

    <!--html中编写的部分-->
    <!--获取行和列的值 以及点击时的效果-->
	行: <input type="text" id="getrow" /> 列: <input type="text" id="getcell" />
    <button value="" onclick="change()">确定生成</button>
    </br>
    </br>
    </br>
    <!--获取删除的行和列的值-->
    <button value="" onclick="last()">删除最后一行</button>
    <button value="" onclick="llast()">删除最后一行的最后一格</button></br>
    行: <input type="text" id="getrow1" /> 列: <input type="text" id="getcell1" />
    <button value="" onclick="del()">确定删除所选</button>
    <table id="tab1" class="ta1">
    </table>

    //js中编写的部分
	//定义的change方法是生成表格是所用的
 function change() {
           //获取行(row)和列(cell)输入框里的值，获取表格的id(tab1)
            var gtrow = document.getElementById("getrow").value;
            var gtcell = document.getElementById("getcell").value;
            var tab1 = document.getElementById("tab1");
           //判断输入框里的值是否为空
            if (gtrow == 0 || gtcell == 0) {
                alert("内容不能为空");
                return false;
            }
            //用Math.round方法将获取的值四舍五入(如果是小数)
            gtrow = Math.round(gtrow)
            gtcell = Math.round(gtcell)
            //isNaN()方法判断输入的东西是否为数字
            if (isNaN(gtrow) || isNaN(gtcell)) {
                alert("请输入数字");
                return false;
            }
    		//判断输入的是否为正数
            if (gtrow < 0 || gtcell < 0) {
                alert("请输入正整数");
                return false;
            }
            //如果数字过大，会引起浏览器过载而无响应，所以数字超过100时不会运行
            if (gtrow > 100 || gtcell > 100) {
                alert("电脑不想要了是吧");
                return false;
            }
            //每次点击生成表格，都会将前一个表格删除，使用innerHTML = ""方法
            tab1.innerHTML = ""
     		//生成表格，使用.insertRow(i)和.insertCell(j)方法
            for (i = 0; i < gtrow; i++) {
                var tr = tab1.insertRow(i)
                for (j = 0; j < gtcell; j++) {
                    var td = tr.insertCell(j)
                    td.innerHTML = j + 1
                }
            }
        }
        //删除最后一列表格
        function last() {
            var tab1 = document.getElementById("tab1");
            console.log(tab1)
            if (!tab1) {
                return false;
            }
            tab1.deleteRow(tab1.rows.length - 1);
            if (tab1.rows.length == 0) {
                tab1.parentNode.removeChild(tab1)
            }

        }
       //删除最后一列表个的最后一个
        function llast() {
            var tab1 = document.getElementById("tab1");
            if (!tab1) {
                return false;
            }
            var lastRow = tab1.rows[tab1.rows.length - 1]
            lastRow.deleteCell(lastRow.cells.length - 1)
            //如果最后一列没有内容，则将最后一列表格直接删除，接下来删除倒数第二列的最后一个
            if (lastRow.cells.length == 0) {
                last()
            }
        }
       //在输入框中写要删除的哪一行哪一列
        function del() {
            //trim()去除左右空格
            var gtrow = document.getElementById("getrow1").value.trim();
            var gtcell = document.getElementById("getcell1").value.trim();
            var tab1 = document.getElementById("tab1");
            //判断输入框里的值是否为空
            if (gtrow == 0 || gtcell == 0) {
                alert("内容不能为空");
                return false;
            }
            //用Math.round方法将获取的值四舍五入(如果是小数)
            gtrow = Math.round(gtrow)
            gtcell = Math.round(gtcell)
            //isNaN()方法判断输入的东西是否为数字
            if (isNaN(gtrow) || isNaN(gtcell)) {
                alert("请输入数字");
                return false;
            }
            //判断输入的值是否在表格的范围内
            if (gtrow > tab1.rows.length || gtcell > tab1.rows[gtrow - 1].cells.length) {
                alert("请输入范围内的数");
                return false;
            }
            //判断输入的是否为正数
            if (gtrow < 0 || gtcell < 0) {
                alert("请输入正数");
                return false;
            }
            //删除表格操作
            tab1.rows[(gtrow - 1)].deleteCell(gtcell - 1)
            if (tab1.rows[gtrow - 1].cells.length == 0) {
                tab1.deleteRow(gtrow - 1)
            }
        }

效果