zoukankan      html  css  js  c++  java
  • 给某一表格动态添加行、删除行

    //动态添加行 

    function AddDataRow() {

                //1、找到要添加行的表格
                var objTable = document.getElementById("myTable"); 

                //2、添加一个新的行

                var objRow = objTable.insertRow(); //在数据表中插入新行

        //3、给每一行取一个ID        

            var iMaxNum = parseInt(document.getElementById("iMaxNum").value) + 1;
                document.getElementById("iMaxNum").value = iMaxNum;
                objRow.id = "Row_" + iMaxNum;
                //创建一个【年份】单元格
                var objYear = document.createElement("<td align='center'>");
                objYear.innerHTML = "<input type='text' id='Row" + iMaxNum.toString() + "_Year' name='Row_" + iMaxNum + "_Year' value='' class=\"content\" data_chk=\"year\"/>";
                objRow.appendChild(objYear);

                //创建一个【新增产值】单元格
                var objOutputValue = document.createElement("<td align='center'>");
                objOutputValue.innerHTML = "<input type='text' id='Row" + iMaxNum.toString() + "_OutputValue' name='Row_" + iMaxNum + "_OutputValue' value=''class=\"content\" data_chk=\"num\"/>";
                objRow.appendChild(objOutputValue);

                //创建一个【新增利润】单元格
                var objProfit = document.createElement("<td align='center'>");
                objProfit.innerHTML = "<input type='text' id='Row" + iMaxNum + "_Profit' name='Row_" + iMaxNum + "_Profit' class=\"content\" data_chk=\"num\"/>";
                objRow.appendChild(objProfit);

                //创建一个【新增税收】单元格
                var objTax = document.createElement("<td align='center'>");
                objTax.innerHTML = "<input type='text' id='Row" + iMaxNum + "_Tax' name='Row_" + iMaxNum + "_Tax' class=\"content\"  maxlength=\"11\" data_chk=\"num\"/>";
                objRow.appendChild(objTax);

                //创建一个【创收外汇】单元格
                var objExchange = document.createElement("<td align='center'>");
                objExchange.innerHTML = "<input type='text' id='Row" + iMaxNum + "_Exchange' name='Row_" + iMaxNum + "_Exchange'  class=\"content\"  maxlength=\"11\" data_chk=\"num\"/>";
                objRow.appendChild(objExchange);

                //创建一个【节支总额】单元格
                var objTotalValue = document.createElement("<td align='center'>");
                objTotalValue.innerHTML = "<input type='text' id='Row" + iMaxNum + "_TotalValue' name = 'Row_" + iMaxNum + "_TotalValue' maxlength=\"11\"  class=\"content\"/>";
                objRow.appendChild(objTotalValue);

                //创建一个【删除】单元格
                var objCell_Del = document.createElement("<td align='center'>");
                objCell_Del.innerHTML = "<input type='button' id='Row" + iMaxNum + "F_Del' value='删除' onclick='DelDataRow(" + iMaxNum + ")' class=\"divButtons_Button\"/>";
                objRow.appendChild(objCell_Del);

            }

    //删除动态创建的行

    //根据行号删除行
            function DelDataRow(rowNum) {
                           if (confirm("你确认要删除【" + document.getElementById("Row" + rowNum.toString() + "_Year").value + "年】的数据吗?") == false)
                { return false; }
               //通过行编号取得该行对象
                var objRow = document.getElementById('Row_' + rowNum);
                if (objRow) {
                    var objTable = objRow.parentNode;
                    if (objTable.rows.length > 3) {//当行数大于3时,才能够删除
                        objTable.removeChild(objRow);
                        //当删除一行的时候将行数减去1
                        var iMaxNum = parseInt(document.getElementById("iMaxNum").value) - 1;
                        document.getElementById("iMaxNum").value = iMaxNum;
                    }
                }
            }

  • 相关阅读:
    centos7下mysql双主+keepalived
    Nginx 性能优化有这篇就够了!
    mysql对自增主键ID进行重新排序
    nginx 配置文件 2019-12-20
    zabbix服务端接收的数据类型,便于编写脚本向服务端提交数据
    zabbix自动注册,实现自动添加机器,减少人工干预
    zabbix企业微信告警配置教程
    websocket 连接测试端口服务是否正常代码
    mongodb Sort排序能够支持的最大内存限制为32M Plan executor error during find: FAILURE
    rabbitmq 的安装配置使用
  • 原文地址:https://www.cnblogs.com/yshuaiw/p/2191682.html
Copyright © 2011-2022 走看看