Add dynamic control in javascript

Question

I have a textbox and a plus button. When the user clicks on the plus button a new row will added with textbox and minus button, and the text area have underline like this

[ text                         ] +

text                             -
--------------------------------

So I tried something like this:

function AddNote() {
  var xtbl = document.getElementById("tblMain");
  var xrowcount = xtbl.rows.length;
  var xrow = xtbl.insertRow(xrowcount);
  var xcell0 =xrow.insertCell(0);
  var xcell1 = xrow.insertCell(1);
  var xcell2 = xrow.insertCell(2);
  var newlabel = document.createElement("Label");
  newlabel.id = "id" + xrowcount
  newlabel.innerHTML = document.getElementById("txtReleaseNote").value;
  xcell1.appendChild(newlabel);
  var newlabel1 = document.createElement("Label");
  newlabel1.id = "lblminus" + xrowcount
  newlabel1.innerHTML="<h2>-</h2>"
  xcell1.setAttribute("colspan", 2);
  xcell1.setAttribute("borderBottom", "1px solid #0000FF");
  xcell2.appendChild(newlabel1);

}

<table id="tblMain" align="center" width="100%" cellpadding="0" cellspacing="0" style="table-layout: fixed; text-align: left; margin-top:10px;">
  <colgroup>
    <col style="width: 50px;">
    <col style="width: 145px;">
    <col style="width: 350px;">
    <col style="width: 100px;">
    <col style="width: auto;">
    <!-- Use "width: auto;" to apply the remaining (unused) space -->
    <col style="width: 50px">
  </colgroup>
  <tbody>
    <tr><td></td><td>Release Notes</td><td><asp:TextBox
                                                        id="txtReleaseNote" TextMode="MultiLine" Rows="3" runat="server" MaxLength="15" 
                                                        Width= "100%" CssClass="TextBoxBorder"></asp:TextBox></td>
      <td style="padding-left:15px; Color:RGB(33,88,103);"> <h2 id="lblplus" 
                                                                onclick="AddNote()" style="cursor: pointer; vertical-align:text-top;" > + </h2> </td> </tr>
  </tbody>
</table>

The minus button vertically not equal to the plus symbol. What am I doing wrong?
How assign color for minus symbol?

I am using asp.net 2008 CSS 2.1

Mosh Feu · Accepted Answer · 2016-01-18 07:52:31Z

1

This answer is explain how to fix the UI.

The open issue here is how to save it to the server because you are using ASP.NET and this framework doesn't support dynamic inputs by default. You can read the answer here http://forums.asp.net/t/1611284.aspx?How+to+get+value+from+dynamically+added+html+input+

function AddNote() {
  var xtbl = document.getElementById("tblMain");
  var xrowcount = xtbl.rows.length;
  var xrow = xtbl.insertRow(xrowcount);

  var xcell0 =xrow.insertCell(0);
  var newlabel = document.createElement("Label");
  newlabel.id = "id" + xrowcount
  newlabel.innerHTML = document.getElementById("txtReleaseNote").value;


  var xcell1 = xrow.insertCell(1);
  xcell1.setAttribute("colspan", 2);
  xcell1.setAttribute("style", "border-bottom:1px solid #0000FF");
  xcell1.appendChild(newlabel);

  var xcell2 = xrow.insertCell(2);
  xcell2.setAttribute('style', 'padding-left:15px; color:RGB(33,88,103);');
  var newlabel1 = document.createElement("label");
  newlabel1.id = "lblminus" + xrowcount
  newlabel1.innerHTML="<h2 style='cursor:pointer;margin:0;' onclick='removeRow(this)'>-</h2>"
  xcell2.appendChild(newlabel1);
}

function removeRow(elm) {
  var row = elm.parentNode.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

<table id="tblMain" align="center" width="100%" cellpadding="0" cellspacing="0" style="table-layout: fixed; text-align: left; margin-top:10px;">
  <colgroup>
    <col style="width: 50px;">
    <col style="width: 145px;">
    <col style="width: 350px;">
    <col style="width: 100px;">
    <col style="width: auto;">
    <!-- Use "width: auto;" to apply the remaining (unused) space -->
    <col style="width: 50px">
  </colgroup>
  <tbody>
    <tr>
      <td></td>
      <td>Release Notes</td>
      <td>
        <textarea id="txtReleaseNote" rows="3" class="TextBoxBorder"></textarea>
        <!-- <asp:TextBox id="txtReleaseNote" TextMode="MultiLine" Rows="3" runat="server" MaxLength="15" Width= "100%" CssClass="TextBoxBorder"></asp:TextBox>-->
      </td>
      <td style="padding-left:15px; color:RGB(33,88,103);">
        <h2 id="lblplus" onclick="AddNote()" style="cursor: pointer; vertical-align:text-top;" > + </h2>
      </td>
    </tr>
  </tbody>
</table>

edited Jan 18, 2016 at 7:52

answered Jan 18, 2016 at 6:45

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

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

4 Comments

Sathish Over a year ago

thanks sir i have one doubt line and text have space how to show line near text

Mosh Feu Over a year ago

The space is because of the h2 tag of the minus button. Just replace the h2 tag with a regular span.

Sathish Over a year ago

thanks sir. but minus symbol show small and i need click event also

Mosh Feu Over a year ago

I just updated my answer. Instead of replace to a span tag, I just setted the margin to 0. Also, I fixed the click event.

user5713256 · Accepted Answer · 2016-01-18 06:44:51Z

It's work.

Html code :

<table>
    <thead>
        <tr>
            <th>
                Text
            </th>
            <th>  <button type="button" data-bind="click: addNewRow"  >
                  +
                </button>
            </th>
        </tr>
    </thead>
    <tbody data-bind="template:{name:'tableRow', foreach: tableRows}">
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">

            </td>
        </tr>
    </tfoot>
</table>
<script id="tableRow" type="text/html">
    <tr>
        <td>
            <input type="text" style="width:40px;" data-bind="value: number, valueUpdate: 'keyup'" />
        </td>
        <td>
            <button type="button" data-bind="click: function(){ $data.remove(); }">
                -
            </button>
        </td>
    </tr>
</script>

knockout.js

function tableRow(number, ownerViewModel) {
    this.number = ko.observable(number);
    this.remove = function() {
        ownerViewModel.tableRows.destroy(this);
    }
}

function tableRowsViewModel() {
    var that = this;
    this.tableRows = ko.observableArray([]);
    this.addNewRow = function() {
        this.tableRows.push(new tableRow('', that));
    }
    this.addNewRow();

    //dependentObservable to represent the last row's value
    this.lastRowValue = ko.dependentObservable(function() {
       var rows = that.tableRows();
       return rows.length ? rows[rows.length - 1].number() : null; 
    });

    //subscribe to changes to the last row
    this.lastRowValue.subscribe(function(newValue) {
        if (newValue) {
           that.tableRows.push(new tableRow('', that));
        }
    });
}



$(document).ready(function() {
    ko.applyBindings(new tableRowsViewModel());
});

For More visit this:

http://jsfiddle.net/rniemeyer/f5f8s/

Collectives™ on Stack Overflow

Add dynamic control in javascript

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related