Hey,

I have a problem that i have been working on for too long, how can i add rows and remove rows from a form dynamically using javascript?

What i need is two buttons, one to add a row and the other to remove the row. How would i do this?

In this form i have, on one line, a couple of text boxes, is this possible to achieve, on an HTML form not an HTML table

Cheers.

Without the table, I'm not certain there's a solution. The table wouldn't need to be particularly complicated.

<form>
     <table name="mytable" id="mytable">
          <tr>
               <td><input type="button" value="Add Row" onclick="addrow('mytable')"></td>
               <td><input type="button" value="Subtract Row" onclick="subtractrow('mytable')"></td></tr>
     </table>
</form>

<script>
function addrow(el){
	usertbl = $(el);
	srow = usertbl.insertRow(numRows(el)+1);
	cell1 = srow.insertCell(0);
        
        element1 = document.createElement('input');
        element1.setAttribute('type','text');
        cell1.appendChild(element1);
}
function subtractrow(el){
	if(numRows(el)!=0){
		usertbl = $(el);
		srow = usertbl.deleteRow(numRows(el));
	}
}
</script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.