How to add table dynamically in javascript

Question

I want to add table row dynamically. I tried with online solution but no luck My code:

<script type="text/javascript">
	var index = 2;
	var chr = 68;
    function insertRow(){
                var table=document.getElementById("myTable");
                var row=table.insertRow(table.rows.length);
                var cell1=row.insertCell(0);
                var t1=document.createElement("input");
                	t1.setAttribute('name', "sigID"+index);
                    t1.setAttribute('value',  char(chr));
                    t1.setAttribute('size', 10);
                    cell1.appendChild(t1);
                var cell2=row.insertCell(1);
                var t2=document.createElement("input");
                	t2.setAttribute("type","text");
                	t2.setAttribute('name',"pattern"+index);
                    t2.setAttribute('size',10);
                    t2.setAttribute('colspan',2);
                    cell2.appendChild(t2);
          index++;
          chr++;

    }
	</script>

I have added one default row in HTML and then on clicking add I want to add row as per the need. HTML Page:

<table id="myTable" style="margin-left:201px;">
  <tr>
    <th>SigID</th>
    <th colspan="2">Patterns</th>
  </tr>
  <tr>
    <td>
      {!!Form::text('sigID1','A',array('size'=>'5'))!!}
    </td>
    <td colspan="2">
      {!!Form::text('pattern1','',array('size'=>'102'))!!}
      <input type="button" class="btn btn-primary btn-md" onclick="insertRow()" value="Add">
    </td>
  </tr>
</table>

Please let me know what is wrong in this code.

Andy · Accepted Answer · 2015-12-10 06:52:22Z

1

Change:

t1.setAttribute('value', char(chr));

to:

t1.setAttribute('value', String.fromCharCode(chr));

DEMO

answered Dec 10, 2015 at 6:52

Andy

63.6k13 gold badges72 silver badges99 bronze badges

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

2 Comments

Rajendra Over a year ago

How to delete row if not required after addition(consider I have delete button there)

Andy Over a year ago

I would add an attribute to the row when it's created and target it when the delete button is clicked. But you might want to ask a new question if you don't work out how to do that.

CodeWizard · Accepted Answer · 2015-12-10 06:52:51Z

1

You have error in this line:

t1.setAttribute('value',  char(chr));

char is not Javascript function.

I assume you want this:

String.fromCharCode(chr)

Change the above line to this:

t1.setAttribute('value', String.fromCharCode(chr));

answered Dec 10, 2015 at 6:52

CodeWizard

146k22 gold badges162 silver badges181 bronze badges

Comments

Tanah · Accepted Answer · 2015-12-10 07:51:25Z

0

I always find this site usefull, you can take a look at the given example http://www.w3schools.com/jsref/met_table_insertrow.asp

answered Dec 10, 2015 at 7:51

Tanah

4594 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to add table dynamically in javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related