Adding Rows Dynamically in a Table

Question

Here I am trying to display the modal popup window with one text area and two dropdowns in a row. And I am trying to add row by clicking "AddNewRow" button in same popup window. For this I have written Javascript function.

    Java Script function for Adding row.   
    <SCRIPT TYPE="text/javascript">

          function addRow() {
              var tbody = document.getElementById(modaltable).getElementsByTagName("TBODY")[0];
              // create row
              var row = document.createElement("TR");
              // create table cell 1
              var td1 = document.createElement("TD");
              var strHtml1 = "<FONT SIZE=\"+3\"></FONT>";
              td1.innerHTML = strHtml1.replace(/!count!/g, count);

              var td2 = document.createElement("TD")
              var strHtml2 = "<SELECT NAME=\"Alpha-Numeric Scramble\"><OPTION VALUE=\"Alpha-Numeric Scramble\">Alpha-Numeric Scramble<OPTION VALUE=\"Packed-Decimal Scramble\">Packed-Decimal Scramble<OPTION VALUE=\"Date-Time Scrambler\">Date-Time Scrambler</SELECT>";
              td2.innerHTML = strHtml2.replace(/!count!/g, count);

              var td3 = document.createElement("TD")
              var strHtml3 = "<SELECT NAME=\"Yes\"><OPTION VALUE=\"Yes\">Yes<OPTION VALUE=\"No\">No</SELECT>";
              td2.innerHTML = strHtml3.replace(/!count!/g, count);

              row.appendChild(td1);
              row.appendChild(td2);
              row.appendChild(td3);

              count = parseInt(count) + 1;
              // append row to table
              tbody.appendChild(row);

          }
              </script>

This is For modal popup design.

    <table class="table .table-responsive" id ="modaltable">
    <tbody>
            <tr>
            <td ><textarea class="form-control" id="comment" ></textarea></td>
            <td ><div class="dropdown">
                <asp:DropDownList ID="DropDownList2" runat="server" CssClass="selectpicker">
                    <asp:ListItem Text="Alpha-Numeric Scramble"/>
                    <asp:ListItem Text="Packed-Decimal Scramble"/>
                    <asp:ListItem Text="Date-Time Scrambler"/>
                    </asp:DropDownList>
             </div></td>
            <td><div class="dropdown">
             <asp:DropDownList ID="DropDownList1" runat="server" CssClass="selectpicker">
                 <asp:ListItem Text="Yes"/>
                    <asp:ListItem Text="No"/>
             </asp:DropDownList>

             </div></td></tr></tbody></table>

These are buttons in modal popup,

 <div class="modal-footer">
                <asp:Button ID="Addnewrow" runat="server" CssClass="btn btn-primary" Text="Add New Row" OnClientclick= "addRow()"/>

Here If I click "AddNewRow" button one row should add.

Unfortunately not able to displaying. What's the error in the above Java script. Any help Please.

What is not working ?

Rayon
– Rayon

2016-04-26 09:39:26 +00:00
Commented Apr 26, 2016 at 9:39 — Rayon
– Rayon, Commented Apr 26, 2016 at 9:39
OnClientclick= "addRow()" this function is not triggering

kiran
– kiran

2016-04-26 09:40:57 +00:00
Commented Apr 26, 2016 at 9:40 — kiran
– kiran, Commented Apr 26, 2016 at 9:40
what is happening when clicking on button?

Sachin
– Sachin

2016-04-26 09:46:11 +00:00
Commented Apr 26, 2016 at 9:46 — Sachin
– Sachin, Commented Apr 26, 2016 at 9:46
Nothing happening sir. Just closing the popup window.

kiran
– kiran

2016-04-26 09:47:09 +00:00
Commented Apr 26, 2016 at 9:47 — kiran
– kiran, Commented Apr 26, 2016 at 9:47
Because it is postbacking to server..

Sachin
– Sachin

2016-04-26 09:55:44 +00:00
Commented Apr 26, 2016 at 9:55 — Sachin
– Sachin, Commented Apr 26, 2016 at 9:55

Sachin · Accepted Answer · 2016-04-26 09:59:46Z

1

Here is what happening in your code. You have used <ASP:Button> control for triggering your javascript function. It is better to use HTML <button> like below:

<button ID="Addnewrow" class="btn btn-primary" onclick= "addRow()"> Add New Row </button>

OR

If you want to use server side control then you should stop postback triggered after OnClientClick Some changes needed in your code.
First add return false; in your function addRow() {
Then use OnClientclick= "return addRow()"

answered Apr 26, 2016 at 9:59

Sachin

2,1481 gold badge24 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

kiran Over a year ago

Sir after changing also same thing happening.

kiran Over a year ago

var td1 = document.createElement("TD"); var strHtml1 = "<FONT SIZE=\"+3\"></FONT>"; td1.innerHTML = strHtml1.replace(/!count!/g, count); Getting error here . In place of "TD" what should I use.

Sachin Over a year ago

what is count here? what do you want to write in <td>?

Sachin Over a year ago

It should be var strHtml1 = "<font size=\"3\"></font>"; and

var strHtml2 = "<select name=\"Alpha-Numeric_Scramble\"><option value=\"Alpha-Numeric Scramble\">Alpha-Numeric Scramble</option><option value=\"Packed-Decimal Scramble\">Packed-Decimal Scramble</option><option value=\"Date-Time Scrambler\">Date-Time Scrambler</option></select>";

kiran Over a year ago

Sir its working. but unfortunately it is closing automatically. By pressing addRow(). After adding the Row it is closing the window.

|

Collectives™ on Stack Overflow

Adding Rows Dynamically in a Table

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related