[Solved] Add Delete multiple row of TextBoxes using JavaScript and jQuery

SaifJame...

SOLVED CLOSED ACTIVE ANSWERED
User: SaifJameel
Posted: on Oct 02, 2014 08:10 AM
Forum: JavaScript
Answer: 1
Views: 4029

I want To add Multiple Text Boxes In panel with Javascript .. But it is not Working Properly Pls Help Me

this my script

 var count = "1";
        function ADDRow(in_tbl_name) {
            var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
            // create row
            var row = document.createElement("TR");
            // create table cell 2
            var td1 = document.createElement("TD")
            var strHtml2 = "<input type=\"text\" name=\"quantity2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
            td1.innerHTML = strHtml2.replace(/!count!/g, count);
            // create table cell 3
            var td2 = document.createElement("TD")
            var strHtml3 = "<input type=\"text\" name=\"Length2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
            td2.innerHTML = strHtml3.replace(/!count!/g, count);
            // create table cell 4
            var td3 = document.createElement("TD")
            var strHtml4 = "<input type=\"text\" name=\"Width2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
            td2.innerHTML = strHtml4.replace(/!count!/g, count);
            // create table cell 5
            var td4 = document.createElement("TD")
            var strHtml5 = "<input type=\"text\" name=\"Depth2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\"/>";
            td2.innerHTML = strHtml5.replace(/!count!/g, count);
            // create table cell 6
            var td5 = document.createElement("TD")
            var strHtml6 = "<input type=\"text\" name=\"azimuth2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
            td3.innerHTML = strHtml6.replace(/!count!/g, count);
            // create table cell 7
            var td6 = document.createElement("TD")
            var strHtml7 = "<input type=\"text\"  name=\"elevation2\" style=\"width:140px;\" size=\"20\" maxlength=\"30\" />";
            td4.innerHTML = strHtml7.replace(/!count!/g, count);
            // create table cell 8
            var td7 = document.createElement("TD")
            var strHtml8 = "<input type=\"text\" name=\"position2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
            td5.innerHTML = strHtml8.replace(/!count!/g, count);
            // create table cell 9
            var td8 = document.createElement("TD")
            var strHtml9 = "<img src=\"images/Close_Box_Red.png\" onclick=\"delRow2()\" style=\"width: 22px; cursor: pointer;\" />";
            td6.innerHTML = strHtml9.replace(/!count!/g, count);
            // append data to row
            row.appendChild(td1);
            row.appendChild(td2);
            row.appendChild(td3);
            row.appendChild(td4);
            row.appendChild(td5);
            row.appendChild(td6);
            row.appendChild(td7);
            row.appendChild(td8);
            count = parseInt(count) + 1;
            // add to count variable
            // append row to table
            tbody.appendChild(row);
        }
        function delRow2() {
            var current = window.event.srcElement;
            //here we will delete the line
            while ((current = current.parentElement) && current.tagName != "TR");
            current.parentElement.removeChild(current);
        }

And This is my html Pls help me

 <table id="tblPets2" style="width: 80%; overflow-x: hidden;" class="custom-tablePopup">
                <tr>
                    <th>No's</th>
                    <th>Length(m)</th>
                    <th>Width(m)</th>
                    <th>Depth(m)</th>
                    <th>Azimuth(Degrees)</th>
                    <th>Elevation above GL(m)</th>
                    <th>Position(Leg/Face)</th>
                </tr>
                <tr>
                    <td style="width: 80%;">
                        <input type="text" name="quantity2" style="width: 140px;" size="20" maxlength="30" /></td>
                    <td>
                        <input type="text" name="Length2" style="width: 140px;" size="20" maxlength="30" /></td>
                    <td>
                        <input type="text" name="Width2" style="width: 140px;" size="20" maxlength="30" /></td>
                    <td>
                        <input type="text" name="Depth2" style="width: 140px;" size="20" maxlength="30" /></td>
                    <td>
                        <input type="text" name="azimuth2" style="width: 140px;" size="20" maxlength="30" /></td>
                    <td>
                        <input type="text" name="elevation2" style="width: 140px;" size="20" maxlength="30" /></td>
                    <td>
                        <input type="text" name="position2" style="width: 140px;" size="20" maxlength="30" /></td>

                    <td class="auto-style1">
                        <img src="images/Close_Box_Red.png" onclick="delRow2()" style="width: 22px; cursor: pointer;" /></td>
                </tr>
            </table>
             <table class="TemplateTable">
                <tr>
                    <td style="float: right; padding-right: 90px;">
                        <div>
                            <img id="Img2" src="images/images%20.png" width="20" runat="server" />
                        </div>
                        <div>
                            <a title="Add more template" style="cursor: pointer;" onclick="ADDRow('tblPets2')">Add
                            Template</a>
                        </div>
                    </td>
                </tr>
            </table>

Azim

0 7

Reply
ANSWER
User: Azim
Replied: on Oct 03, 2014 03:21 AM
Report

You have done some mistakes in copy paste.

HTML

For deleting

http://stackoverflow.com/questions/17818771/deleting-a-specific-row-in-a-table

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var count = "1";
        function ADDRow(in_tbl_name) {
            var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
            // create row
            var row = document.createElement("TR");
            // create table cell 2
            var td1 = document.createElement("TD")
            var strHtml2 = "<input type=\"text\" name=\"quantity2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
            td1.innerHTML = strHtml2.replace(/!count!/g, count);
            // create table cell 3
            var td2 = document.createElement("TD")
            var strHtml3 = "<input type=\"text\" name=\"Length2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
            td2.innerHTML = strHtml3.replace(/!count!/g, count);
            // create table cell 4
            var td3 = document.createElement("TD")
            var strHtml4 = "<input type=\"text\" name=\"Width2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
            td3.innerHTML = strHtml4.replace(/!count!/g, count);
            // create table cell 5
            var td4 = document.createElement("TD")
            var strHtml5 = "<input type=\"text\" name=\"Depth2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\"/>";
            td4.innerHTML = strHtml5.replace(/!count!/g, count);
            // create table cell 6
            var td5 = document.createElement("TD")
            var strHtml6 = "<input type=\"text\" name=\"azimuth2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
            td5.innerHTML = strHtml6.replace(/!count!/g, count);
            // create table cell 7
            var td6 = document.createElement("TD")
            var strHtml7 = "<input type=\"text\"  name=\"elevation2\" style=\"width:140px;\" size=\"20\" maxlength=\"30\" />";
            td6.innerHTML = strHtml7.replace(/!count!/g, count);
            // create table cell 8
            var td7 = document.createElement("TD")
            var strHtml8 = "<input type=\"text\" name=\"position2\" style=\"width: 140px;\" size=\"20\" maxlength=\"30\" />";
            td7.innerHTML = strHtml8.replace(/!count!/g, count);
            // create table cell 9
            var td8 = document.createElement("TD")
            var strHtml9 = "<img src=\"images/Close_Box_Red.png\" onclick=\"delRow2(this)\" style=\"width: 22px; cursor: pointer;\" />";
            td8.innerHTML = strHtml9.replace(/!count!/g, count);
            // append data to row
            row.appendChild(td1);
            row.appendChild(td2);
            row.appendChild(td3);
            row.appendChild(td4);
            row.appendChild(td5);
            row.appendChild(td6);
            row.appendChild(td7);
            row.appendChild(td8);
            count = parseInt(count) + 1;
            // add to count variable
            // append row to table
            tbody.appendChild(row);
        }
        function delRow2(a) {
            var tr = a;
            while (tr && tr.nodeName != "TR") tr = tr.parentNode;
            if (!tr) throw new Error("Failed to find the row, was the function called correctly?");
            tr.parentNode.removeChild(tr); // delete it
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="tblPets2" style="width: 80%; overflow-x: hidden;" class="custom-tablePopup">
            <tr>
                <th>
                    No's
                </th>
                <th>
                    Length(m)
                </th>
                <th>
                    Width(m)
                </th>
                <th>
                    Depth(m)
                </th>
                <th>
                    Azimuth(Degrees)
                </th>
                <th>
                    Elevation above GL(m)
                </th>
                <th>
                    Position(Leg/Face)
                </th>
            </tr>
            <tr>
                <td style="width: 80%;">
                    <input type="text" name="quantity2" style="width: 140px;" size="20" maxlength="30" />
                </td>
                <td>
                    <input type="text" name="Length2" style="width: 140px;" size="20" maxlength="30" />
                </td>
                <td>
                    <input type="text" name="Width2" style="width: 140px;" size="20" maxlength="30" />
                </td>
                <td>
                    <input type="text" name="Depth2" style="width: 140px;" size="20" maxlength="30" />
                </td>
                <td>
                    <input type="text" name="azimuth2" style="width: 140px;" size="20" maxlength="30" />
                </td>
                <td>
                    <input type="text" name="elevation2" style="width: 140px;" size="20" maxlength="30" />
                </td>
                <td>
                    <input type="text" name="position2" style="width: 140px;" size="20" maxlength="30" />
                </td>
                <td class="auto-style1">
                    <img id="imgDelete" src="minus.png" onclick="delRow2(this);" style="width: 22px;
                        cursor: pointer;" />
                </td>
            </tr>
        </table>
        <table class="TemplateTable">
            <tr>
                <td style="float: right; padding-right: 90px;">
                    <div>
                        <img id="Img2" src="plus.png" width="20" runat="server" />
                    </div>
                    <div>
                        <a title="Add more template" style="cursor: pointer;" onclick="ADDRow('tblPets2');">
                            Add Template</a>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Demo

[Solved] Add Delete multiple row of TextBoxes using JavaScript and jQuery

Company

Explore

Follow us

Contact Us