您的位置：首页 > Web前端 > JavaScript

js 实现的添加删除表格

2009-11-30 14:10 405 查看

<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 +
4000
= 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 onload="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" onclick="addRow();">

                    <input type="button" value=" 删除 " id="btnDelRow" onclick="delRow();">

                    <input type="submit" value=" 保存 " onclick="return checkData();">

                    <input type="button" value=" 关闭 " onclick="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： input button function javascript table border

相关文章推荐

新的分享

章节导航