js 实现的添加删除表格

最新推荐文章于 2024-09-19 11:17:39 发布

fengyilan

最新推荐文章于 2024-09-19 11:17:39 发布

阅读量270

点赞数

文章标签： input button function javascript table border

本文链接：https://blog.csdn.net/fengyilan/article/details/4905205

版权

<head>
    <script language="javascript">
        var maxRows=12;
        function addRow()
        {
            var l = document.all("tblContracts").rows.length;
            var newtr = document.all("tblContracts").rows(1).cloneNode(true) ;

            document.all("tblContracts").getElementsByTagName("tbody")[0].insertBefore(
               newtr, document.all("tblContracts").rows(l-1) );

            document.all("tblContracts").rows(l-1).cells(0).firstChild.value="";

            if ( document.all("tblContracts").rows.length==maxRows )
            {
                alert("从性能考虑，您一次只能最多添加10条记录。");
                event.srcElement.disabled= true;
            }

            document.getElementById("btnDelRow").disabled=false;
            document.all("tblContracts").rows(l-1).cells(0).firstChild.focus();
        }

        function delRow()
        {
            var i;
            if ( document.all("tblContracts").rows.length==3) // 只有1行了
            {
                for ( i=0; i<document.all("tblContracts").rows(1).cells.length; i++)
                {
                    document.all("tblContracts").rows(1).cells(i).all(0).value="";
                }
            }
            else
            {
                document.all("tblContracts").deleteRow( currowidx);
            }

            var l = document.all("tblContracts").rows.length;
            document.all("tblContracts").rows(l-2).cells(0).firstChild.focus();
            document.all("tblContracts").rows(l-2).cells(0).firstChild.select();
            document.getElementById("btnAddRow").disabled=false;
        }

        function checkData()
        {
            var tmp="", oldtmp="";
            var tmptxt;
            for ( var i=1; i<document.all("tblContracts").rows.length-1; i++)
            {
                tmp=document.all("tblContracts").rows(i).cells(0).firstChild.value;
                if ( tmp.length == 0)
                {
                    alert( "合同信息必须完整");
                    document.all("tblContracts").rows(i).cells(0).firstChild.focus();
                    return false;
                }

                oldtmp = tmp;
                for ( var j=1; j<document.all("tblContracts").rows(0).cells.length; j++)
                {
                    tmptxt = document.all("tblContracts").rows(i).cells(j).firstChild.value;
                    tmp += tmptxt;
                    if ( tmp.length == oldtmp.length)
                    {
                        alert( "合同信息必须完整");
                        document.all("tblContracts").rows(i).cells(j).firstChild.focus();
                        return false;
                    }
                    else
                    {
                        oldtmp = tmp;
                    }
                    if ( j>=2 && isNaN(parseFloat(tmptxt)) )
                    {
                        alert( "金额必须输入数值");
                        document.all("tblContracts").rows(i).cells(j).firstChild.focus();
                        return false;
                    }
                }
            }
            return true;
        }

        var currowidx;
    </script>
</head>

<body οnlοad="document.all('tblContracts').rows(1).cells(0).firstChild.focus();">
    <form method="post" action="/eFinanceTD/dataMaintainance/addContract.do">
        <table width="100%" align="center" id="tblContracts" border="1">
            <tr>
                <td width="20%">合同编号</td>
                <td width="50%">合同名称</td>
                <td width="10%">合同总金额</td>
                <td width="10%">已支付金额</td>
                <td width="10%">列帐金额</td>
            </tr>

                <tr onbeforeactivate="currowidx=this.rowIndex;">
                    <td> <input type="text" style="width:100%" name="contractNo" id="contractNo"> </td>
                    <td> <input type="text" style="width:100%" name="contractName" id="contractName"> </td>
                    <td> <input type="text" style="width:100%" name="contractAmount" id="contractAmount"> </td>
                    <td> <input type="text" style="width:100%" name="contractPaidAmount" id="contractPaidAmount"> </td>
                    <td> <input type="text" style="width:100%" name="contractListAmount" id="contractListAmount"> </td>
                </tr>

            <TR>
                <td colspan="5" align="center">
                    <input type="button" value=" 添加 " id="btnAddRow" οnclick="addRow();">
                    <input type="button" value=" 删除 " id="btnDelRow" οnclick="delRow();">
                    <input type="submit" value=" 保存 " οnclick="return checkData();">
                    <input type="button" value=" 关闭 " οnclick="window.close();">
                </td>
            </TR>
        </table>
    </form>
        <table algin="center" width="100%">
            <tr gbColor="red">
                <td align="center">
                    <label style="color:red;font-size:20;"></label>
                </td>
            </tr>
        </table>
</body>
</html>