Add dynamically rows when user click on button?

Question

Add dynamically rows when user click on button. I made a script but it does not work plz help me out

   
<script>
var t;
t=2;
function Insert(){
var tab=document.getElementById("mytable");

var row=insertRow(t);
var cell1=insertCell(0);
var cell2=insertCell(1);
var cell3=insertCell(2);
var cell4=insertCell(3);
 
t=t+1;
 
 
   cell2.setAttribute('contenteditable','true');
   cell3.setAttribute('contenteditable','true');
   cell4.setAttribute('contenteditable','true');
}
</script>
Html 
<input type="button"  onclick="Insert()" name="Insert Row" value="Insert Row" />

Gowtham · Accepted Answer · 2016-09-23 07:25:59Z

2

function addRow(tableID) {

			var table = document.getElementById(tableID);

			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);


			var cell3 = row.insertCell(0);
			var element2 = document.createElement("input");
			element2.type = "text";
			element2.name = "txtbox[]";
			cell3.appendChild(element2);


		}

<BODY>

	<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />


	<TABLE id="dataTable" width="100px" border="1">
		<TR>
			<TD> <INPUT type="text" /> </TD>
		</TR>
	</TABLE>

</BODY>

answered Sep 23, 2016 at 7:25

Gowtham

1,59712 silver badges24 bronze badges

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

2 Comments

Marina Over a year ago

done thank you so much please refer me some good book for java script

Gowtham Over a year ago

You can download pdf from tutorialspoint.com, you can learn from that site

Rebecca Joanna · Accepted Answer · 2016-09-23 07:19:37Z

1

change your script like

<script>
var t;
t=2;
function Insert(){
var tab=document.getElementById("mytable");

var row=tab.insertRow(t);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
 
t=t+1;
 
 
   cell2.setAttribute('contenteditable','true');
   cell3.setAttribute('contenteditable','true');
   cell4.setAttribute('contenteditable','true');
}
</script>

answered Sep 23, 2016 at 7:19

Rebecca Joanna

3351 silver badge14 bronze badges

3 Comments

Roy123 Over a year ago

insertRow and insertCell are Object methods, in your script you use them as functions. Object methods, as the name tells you; require an object in order to be called. This is done with the ' . ' which is a property accessor.

Rebecca Joanna Over a year ago

you get table id and store that in tab variable now you inserting the row without mention table so where it will enter the row

Marina Over a year ago

done thank you so much please refer me some good book for java script

Collectives™ on Stack Overflow

Add dynamically rows when user click on button?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related