Je souhaite créer un écran pour saisir les détails de la commande client.création dynamique de commandes
je veux fixer le processus le plus rapidement possible
donc j'ai une table avec deux zones de texte
Product name Qty +
Donc, si je clique sur + je veux créer de nouvelles zones de texte sous Nom du produit et Qté Le nombre d'éléments peut être de 50 ou plus. Comment puis-je faire cela?
Vous pouvez utiliser jQuery. Quelque chose comme
$('.plus').click(function() {
$(this).append('<input type="text">');
})
Voici un exemple qui utilise le clonage d'une ligne initiale. Try it live with jsFiddle.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Add Input Rows</title>
<script type="text/javascript">
function addEvent(el, name, handler)
{
if (typeof window.addEventListener != "undefined")
{
el.addEventListener(name, handler, false);
}
else
{
el.attachEvent("on" + name, handler);
}
};
addEvent(window, "load",function()
{
var productRows = document.getElementById("productRows");
var clonedRow = productRows.getElementsByTagName("tr")[0].cloneNode(true);
addEvent(document.getElementById("addProductRow"), "click", function()
{
productRows.appendChild(clonedRow.cloneNode(true));
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Product name</th>
<th>Qty</th>
<th><input type="button" id="addProductRow" value="+"></th>
</tr>
</thead>
<tbody id="productRows">
<tr>
<td><input type="text" name="name"></td>
<td><input type="text" name="qty"></td>
</tr>
</tbody>
</table>
</body>
</html>
Si vous voulez aller et ajouter la possibilité de supprimer des lignes ajoutées dynamiquement, vous pouvez faire quelque chose comme ça (jsFiddle):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Add & Remove Input Rows</title>
<script type="text/javascript">
function addEvent(el, name, handler)
{
if (typeof window.addEventListener != "undefined")
{
el.addEventListener(name, handler, false);
}
else
{
el.attachEvent("on" + name, handler);
}
}
addEvent(window, "load", function()
{
var productRows = document.getElementById("productRows"),
templateRow = (function() {
var clonedRow = productRows.getElementsByTagName("tr")[0].cloneNode(true),
removeButton = document.createElement("input");
removeButton.type = "button";
removeButton.value = "-";
removeButton.title = "Click to remove this row";
clonedRow.getElementsByTagName("td")[2].appendChild(removeButton);
return clonedRow;
})();
addEvent(document.getElementById("addProductRow"), "click", function()
{
var row = templateRow.cloneNode(true),
removeButton = row.getElementsByTagName("td")[2].getElementsByTagName("input")[0];
addEvent(removeButton, "click", function()
{
productRows.removeChild(row);
});
productRows.appendChild(row);
});
});
</script>
<style>
th.buttons input, td.buttons input { width: 100%; }
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Product name</th>
<th>Qty</th>
<th class="buttons"><input type="button" id="addProductRow" title="Click to add a new row" value="+"></th>
</tr>
</thead>
<tbody id="productRows">
<tr>
<td><input type="text" name="name"></td>
<td><input type="text" name="qty"></td>
<td class="buttons"></td>
</tr>
</tbody>
</table>
</body>
</html>
Si vous voulez embêter vos utilisateurs avec popups ennuyeux s'ils essaient de supprimer des lignes remplies, remplacez-les par ce bit (jsFiddle):
addEvent(removeButton, "click", function()
{
var inputs = row.getElementsByTagName("input"),
confirmRemove = false;
for (var i = 0, input; input = inputs[i]; i++)
{
if (input.type == "text" && input.value !== "")
{
confirmRemove = true;
break;
}
}
if (!confirmRemove ||
confirm("This row contains data. Are you sure you want to remove it?"))
{
productRows.removeChild(row);
}
});