How do I add HTML elements in this jQuery?

Question

I have downloaded jQuery to add & remove input types.

Now how can I insert new table in this code?

Here is my code:

$(document).ready(function(){

    var counter = 2;

    $("#ctl00_mainContentPlaceHolder_btnNewRow").click(function () {

    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<label>Textbox '+ counter + ' : ' +
          '<input type="text" name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" ></label>');               

    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
     });

     $("#removeButton").click(function () {
    if(counter==2){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

    var msg = '';
    for(i=1; i<counter; i++){
      msg += "\n Textbox " + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
     });
  });

Nikunj Soni · Accepted Answer · 2014-11-18 09:59:50Z

4

You just need to add this code in you jQuery after the addition of label. you can use table instead of label by the help of below code

newTextBoxDiv.after().html('<table> <tr> <td>Textbox '+ counter + ' : ' +
          '<input type="text" name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" > <td></tr></table>');

edited Nov 18, 2014 at 9:59

answered Nov 18, 2014 at 9:53

Nikunj Soni

8741 gold badge7 silver badges18 bronze badges

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

Comments

user3154108 · Accepted Answer · 2014-11-18 10:08:12Z

0

If you want to dynmically add table rows you might want to use dom manipulation instead of putting the html code as string

var table = $('<table/>');
//for
    var tr = $('<tr/>').attr('id', {row_id}).addClass('row_class');
    //for
        var td = $('<td/>').addClass('td_class').html('or .text()');
        tr.append(td);
    table.append(tr);
table.appendTo($('whereever'));

answered Nov 18, 2014 at 10:08

user3154108

1,29413 silver badges24 bronze badges

Collectives™ on Stack Overflow

How do I add HTML elements in this jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related