XploreDotNet: How To Create Row Dynamically And Remove Row

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" >
    <title>Dynamically Create Table Row And Remove Row</title>

    <script type="text/javascript" language="javascript">

        function addRow() {

            var tbl = document.getElementById('evntTbl');
            var lstRow = tbl.rows.length;
            var iteration = lstRow;

          if (lstRow <= 10) {

                var row = tbl.insertRow(lstRow);

                var cellLeft = row.insertCell(0);

                var el0 = document.createElement('input');

                el0.type = 'text';

                el0.name = 'txtName_' + iteration;

                el0.id = 'txtName_' + iteration;

                //el0.size = 40;
                el0.style.width = 170 + 'px';

                cellLeft.appendChild(el0);

                var cellMid = row.insertCell(1);

                var el1 = document.createElement('input');

                el1.type = 'text';

                el1.name = 'txtRole_' + iteration;

                el1.id = 'txtRole_' + iteration;

                //el1.size = 40;
                el1.style.width = 170 + 'px';

                cellMid.appendChild(el1);

                var cellRight = row.insertCell(2);

                var el2 = document.createElement('input');

                el2.type = 'text';

                el2.name = 'txtEmail_' + iteration;

                el2.id = 'txtEmail_' + iteration;

                //el2.size = 40;
                el2.style.width = 170 + 'px';

                cellRight.appendChild(el2);

                var cellImg = row.insertCell(3);
                var el3 = document.createElement("button");
                el3.id = 'btn_' + iteration;
                el3.style.zIndex = 200;
                el3.style.cursor = 'hand';
               el3.value = '-';
                el3.onclick = function() { removeRow(this); };

                cellImg.appendChild(el3);
            }
            else {
                document.getElementById('btnAdd').disabled=true;
            }
            if (document.getElementById('txtName_' + (iteration)) != null) {
                document.getElementById('txtName_' + (iteration)).focus();
            }

        }

        function removeRow(evt) {

            var tbl = document.getElementById('evntTbl');
            var lstRw = tbl.rows.length;

           if(lstRw <= 10)
           {
               document.getElementById('btnAdd').disabled=false;
           }

            var _row = evt.parentNode.parentNode;
            _row.parentNode.deleteRow(_row.rowIndex);
        }
    </script>

</head>
<body>
    <div>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td align="center" valign="top" style="height: 5px">
                </td>
            </tr>
            <tr>
                <td align="right" class="style31">
                     
                </td>
                <td align="left">
                    <table width="60%" border="0" cellpadding="2" cellspacing="2" id='evntTbl'>
                        <tr>
                            <td width="10%" align="left" class="style31">
                                Column 1
                            </td>
                            <td width="10%" align="left" class="style31">
                                Column 2
                            </td>
                            <td width="10%" align="left" class="style31">
                                Column 3
                            </td>
                            <td width="1%" align="left" class="style31">
                                 
                            </td>
                        </tr>
                        <tr>
                            <td align="left" class="style31">
                                <input type="text" class="style5" tabindex="6" id="Text1" maxlength="25" title=""
                                     style="width: 170px" />
                            </td>
                            <td align="left" class="style31">
                                <input type="text" class="style5" tabindex="7" id="Text2" maxlength="25" title=""
                                     style="width: 170px" />
                            </td>
                            <td align="left" class="style31">
                                <input type="text" class="style5" tabindex="8" id="Text3" maxlength="25" title=""
                                     style="width: 170px" />
                            </td>
                            <td width="1%" align="left" class="style31">
                                <input type='button' id='btnAdd' value='+' style="cursor: hand;" tabindex="9" onclick="addRow();" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Download File

XploreDotNet

Wednesday, June 10, 2009

How To Create Row Dynamically And Remove Row - JavaScript

No comments: