Código PHP:
<script language="JavaScript">
function ShowLess() {
// get a reference to the hidden element that contains the number of inputs counter
var numberOfInputsEle = document.getElementById("numberOfInputs");
// if there is only one input left on the screen, don't let them remove that one
if (numberOfInputsEle.value <= 1) { return; }
// get the actual count value from the hidden element
var lastRowNum = numberOfInputsEle.value;
// now we can get a reference to the form element that needs to be removed
var eleToRemove = document.getElementById("row_" + lastRowNum);
// then remove it
eleToRemove.parentNode.removeChild(eleToRemove);
// and decrement our input counter
numberOfInputsEle.value = lastRowNum - 1;
}
function ShowMore() {
// get a reference to the hidden element that contains the number of inputs counter
var numberOfInputsEle = document.getElementById("numberOfInputs");
// read in the value, increment it so we have the correct new counter value
var newRowNum = parseInt(numberOfInputsEle.value) + 1;
// clone the first row, reset it, and use it for the new row
var newNode = document.getElementById("row_1").cloneNode(true);
// change the ID
newNode.id = "row_" + newRowNum;
// need to reset the form elements, as they could have already had values.
// I reference them using getElementsByTagName and searching for them. I could
// have given them each unique IDs, but then those additional IDs would need
// to be changed, too, since they'd have the counter value in them.
newNode.getElementsByTagName("span")[0].innerHTML = newRowNum + ".";
newNode.getElementsByTagName("input")[0].value = "";
newNode.getElementsByTagName("input")[1].value = "";
newNode.getElementsByTagName("input")[2].value = "";
newNode.getElementsByTagName("input")[3].value = "";
newNode.getElementsByTagName("input")[4].value = "";
newNode.getElementsByTagName("input")[5].value = "";
newNode.getElementsByTagName("input")[6].value = "";
newNode.getElementsByTagName("input")[0].name = "FileHeader_" + newRowNum;
newNode.getElementsByTagName("input")[1].name = "FileHeader_" + newRowNum;
newNode.getElementsByTagName("input")[2].name = "FileHeader_" + newRowNum;
newNode.getElementsByTagName("input")[3].name = "FileHeader_" + newRowNum;
newNode.getElementsByTagName("input")[4].name = "FileHeader_" + newRowNum;
newNode.getElementsByTagName("input")[5].name = "FileHeader_" + newRowNum;
newNode.getElementsByTagName("input")[0].name = "desde_" + newRowNum;
newNode.getElementsByTagName("input")[0].id = "desde_" + newRowNum;
newNode.getElementsByTagName("input")[1].name = "hasta_" + newRowNum;
newNode.getElementsByTagName("input")[1].id = "hasta_" + newRowNum;
newNode.getElementsByTagName("select")[0].selectedIndex = 0;
newNode.getElementsByTagName("select")[0].name = "InternalField_" + newRowNum;
newNode.getElementsByTagName("select")[1].name = "n_desde_" + newRowNum;
newNode.getElementsByTagName("select")[2].name = "n_hasta_" + newRowNum;
// get a reference to the container holding all the form elements
var overallParent = document.getElementById("formElementsParent");
// the <p> that contains the more/less links has an ID of "moreAndLessLinks", so we
// can use that to insert our new element just before it.
overallParent.insertBefore(newNode,document.getElementById("moreAndLessLinks"));
// finally, write back the new counter value to the hidden form field
numberOfInputsEle.value = newRowNum;
}
</script>
Ejemplo: si tengo 6 registros usar este mismo java para que muestre los 6 registros de la db.
Este es el HTML
Código PHP:
<form action="/blog/wp-content/uploads/2009/01/test.cfm" method="post" style="font-family:arial; font-size: 11px;">
<table width="100%" border="0">
<tr>
<td>
<input type="hidden" id="numberOfInputs" name="numberOfInputs" value="1">
<div id="formElementsParent">
<p id="row_1" style="width: 100%;">
<span style="width: 18px; float: left;">1.</span>
<input tabindex="104" type="text" name="desde_1" class="date-input date" id="desde_1" size="10" value="<?php echo get_listing_saledate(); ?>" />
<input tabindex="106" type="text" name="hasta_1" class="date-input date" id="hasta_1" size="10" value="<?php echo get_listing_saledate(); ?>" />
<input size="6" width="10" type="text" name="FileHeader_1" id="sencilla" value="<?php echo $listing->bedrooms; ?>" />
<input size="6" width="10" type="text" name="FileHeader_1" id="Doble" value="<?php echo $listing->acsf; ?>">
<input size="6" width="10" type="text" name="FileHeader_1" id="Triple" value="<?php echo $listing->acsf; ?>">
<input size="6" width="10" type="text" name="FileHeader_1" id="Cuádruple" value="<?php echo $listing->acsf; ?>">
<input size="6" width="10" type="text" name="FileHeader_1" id="Quintuple" value="<?php echo $listing->acsf; ?>">
<select name="n_desde_1">
<option value="">Edad</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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
a
<select name="n_hasta_1">
<option value="">Edad</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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
<select name="InternalField_1">
<option value="">Seleccione</option>
<option value="alta">Alta</option>
<option value="baja">Baja</option>
<option value="ssanta">Semana Santa</option>
</select>
</p>
<p align="center" id="moreAndLessLinks" style="width: 100%;">
<br />
<a href="JavaScript:;" onclick="ShowMore(); return false;">Agregar Campo</a> |
<a href="JavaScript:;" onclick="ShowLess(); return false;">Borrar Campo</a></p>
</div></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</form> 
