...
PDA

Dropdown box to add or remove table rows

TonyCable
05-12-2009, 04:53 PM
Hi

Wondering if someone can help. Below is the code that I have so far. What I’m after doing is when a number is selected on the dropdown box that the number of rows with the text boxes in the table below.

In other words, if the number three is selected from the drop down, there would be three rows in the table with text boxes in. if 5 is selected then 5 rows etc.

Hope that this makes sense and hope that someone can help me with this.

Thanks



<html>
<head>
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="/itmedia/Style/style.css">
</head>

<body>
<table width="278" border="0">
<tr>
<td width="220"><h3>New Equipment</h3></td>
<td width="48"><select name="select2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select></td>
</tr>
</table>
<table width="59%" id="table1">
<tr>
<td width="70">&nbsp;</td>
<td width="151">
<p align="center">PC Number</td>
<td width="150">
<p align="center">MO Number</td>
<td width="150">
<p align="center">PR Number</td>
<td width="151">
<p align="center">AX Number</td>
</tr>
<tr>
<td>Asset Tag</td>
<td width="151">
<p>
<input type="text" name="PCNumberNew1" size="21">
</p></td>
<td width="150">
<p>
<input type="text" name="MONumberNew1" size="21">
</p></td>
<td width="150">
<p>
<input type="text" name="PRNumberNew1" size="21">
</p></td>
<td width="151">
<p>
<input type="text" name="AXNumberNew1" size="21">
</p></td>
</tr>
</table>

</body>
</html>
Philip M
05-12-2009, 05:15 PM
Here you are:-


<html>
<head>
<script type = "text/javascript">

var rowCount=1;

function addRow() {
rowCount++;

var content1='<input type="text" name="text'+rowCount+'A">';
var content2='<input type="text" name="text'+rowCount+'B">';
var content3='<input type="text" name="text'+rowCount+'C">';
var content4='<input type="text" name="text'+rowCount+'D">';

tabBody=document.getElementsByTagName("TBODY").item(0);
row=document.createElement("TR");
cell1 = document.createElement("TD");
cell2 = document.createElement("TD");
cell3 = document.createElement("TD");
cell4 = document.createElement("TD");
cell1.innerHTML=content1;
cell2.innerHTML=content2;
cell3.innerHTML=content3;
cell4.innerHTML=content4;
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
tabBody.appendChild(row);
}

function getRows() {
var x = document.myform.addNewRow.value;
document.myform.addNewRow.value = 0;
for (var i = 1; i <=x; i++) {
addRow('mytable');
}
}

</script>

</head>
<body>

<form name = "myform">
<select name = "addNewRow" id = "addNewRow" onchange = "getRows()">
<option value="0">Select Number Of Rows To Add</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>

<br><br>
<table id='mytable'>
<tbody>
<TR>

<TD><input name="text1A"></TD>
<TD><input name="text1B"></TD>
<TD><input name="text1C"></TD>
<TD><input name="text1D"></TD>

</TR>

</tbody>
</table>
</form>
</body>
</html>

The whole aim of practical politics is to keep the populace alarmed (and hence clamorous to be led to safety) by menacing it with an endless series of hobgoblins, all of them imaginary.
H.L. Mencken 1880-1956, American Editor, Author, Critic, Humorist
TonyCable
05-12-2009, 06:12 PM
Hi

thats great, just editing it now for my own form.

out of interest, where it creates a textnode saying row number etc, is there a way to change that to a text box?
adios
05-12-2009, 06:23 PM
Didn't you want a select that would allow the user to choose the exact number of rows?
Philip M
05-12-2009, 06:23 PM
Hi

thats great, just editing it now for my own form.

out of interest, where it creates a textnode saying row number etc, is there a way to change that to a text box?

Yes, I revised the code to cover that. You may be working with the first version.

Not sure exactly what adios means - obviously you can add as many rows to the select options as you wish. But if the user can only make the choice once (and not add any more rows) then it is not hard to disable attempts to add further rows.
TonyCable
05-12-2009, 06:24 PM
yeah, but i also want to prepopulate them with text boxes if i can.

i know this code doesn't do exactly what i was after, but its a start.
TonyCable
05-12-2009, 06:25 PM
Great thank you very much, i'll edit this and get this working before moving on to the next bots that i want.
Philip M
05-12-2009, 06:32 PM
yeah, but i also want to prepopulate them with text boxes if i can.

i know this code doesn't do exactly what i was after, but its a start.

Is this what you mean?

var content1='<input type="text" name="text'+rowCount+'A" value = "ABC">';
var content2='<input type="text" name="text'+rowCount+'B" value = "DEF">';
var content3='<input type="text" name="text'+rowCount+'C" value = "GHJ">';
var content4='<input type="text" name="text'+rowCount+'D" value = "KLM">';
TonyCable
05-12-2009, 06:38 PM
no the code that you gave me looks like it is doing pretty much the job that i want it to do, execpt i can't get it to add to the bottom of my table that i have called table1. it seems to be adding it to the top table that i have got called table2, but its prob something i've done :p
Philip M
05-12-2009, 07:05 PM
You did not mention that you had two tables. Try:

tabBody=document.getElementsByTagName("TBODY").item(1);

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum