Member Avatar for kalpana0611

Hi, I managed to get the following script to work

<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type = "text/javascript">

var intTextBox=0;

//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement()
{
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "<table><tr><td>Memory "+intTextBox+": <input type='text' id='Memory " + intTextBox + "' name='memory_size" + intTextBox + "'/></td><td><input type='text' id='Memory " + intTextBox + "' name='memory_size" + intTextBox + "'/></td></tr></table>";
contentID.appendChild(newTBDiv);
}
</script>

</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<form method="post" action="php/admin_adddesktop1.php">
<p><a href="javascript:addElement();">Add</a><a href="javascript:removeElement();">Remove</a>

<table style="width: 100%">
	<tr>
		<td><div id="content" style="width: 268px"></div></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td>&nbsp;</td>
	</tr>
</table>
</p>
<input name="Submit1" type="submit" value="submit"></form>
</body>
</html>

How do I get the row and column in the javascript to appear in the html page. I want the row created by the javascript as the second row below the

<table style="width: 100%">
	<tr>
		<td><div id="content" style="width: 268px"></div></td>
		<td></td>
	</tr>
  • 2 Contributors
  • 1 Reply
  • 91 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by kanaku
Member Avatar for kanaku

Well, your javascript function actually adds a new div with a table inside it each time you click on the "Add". For example, clicking on the add link 3 times gives me this code:

<table style="width: 100%;" id="theT" border="1">

	<tbody><tr>
		<td><div id="content" style="border: 1px solid ; width: 268px;"><div id="strText1"><table border="1"><tbody><tr><td>Memory 1: <input id="Memory 1" name="memory_size1" type="text"></td><td><input id="Memory 1" name="memory_size1" type="text"></td></tr></tbody></table></div><div id="strText2"><table border="1"><tbody><tr><td>Memory 2: <input id="Memory 2" name="memory_size2" type="text"></td><td><input id="Memory 2" name="memory_size2" type="text"></td></tr></tbody></table></div><div id="strText3"><table border="1"><tbody><tr><td>Memory 3: <input id="Memory 3" name="memory_size3" type="text"></td><td><input id="Memory 3" name="memory_size3" type="text"></td></tr></tbody></table></div></div></td>
		<td></td>
	</tr>
</tbody></table>

Here is a crude example of a different way to do it (using insertCell and insertRow). It's self-explanatory and I'm sure you can figure out how to use it to make two columns per row. =)

<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type = "text/javascript">

var rownum = 0;
var colnum = 0;

function addElement2(){
rownum = rownum + 1;
var newRow = document.getElementById('theT').insertRow(rownum);
var newCol = newRow.insertCell(colnum);

newRow.setAttribute('id', 'row'+rownum);
newCol.setAttribute('id', 'row'+rownum+'col'+colnum);
}


</script>

</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<form method="post" action="php/admin_adddesktop1.php">
<p><a onclick="addElement2();">Add</a><br /><a onclick="removeElement();">Remove</a>

<table style="width: 100%" border="1" id="theT">
	<tr>
		<td><div id="content" style="width: 268px; border: 1px solid;"></div></td>
		<td></td>
	</tr>
</table>
</p>
<input name="Submit1" type="submit" value="submit"></form>
</body>
</html>
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.