나는 판매 주문 세부 사항 입력을위한 화면을 만들고 싶습니다.컨트롤의 동적 생성
내가 그래서 내가 제품 이름 아래에 새로운 텍스트 상자를 만들려면 +
를 클릭하면 그래서 내가 두 개의 텍스트 상자
Product name Qty +
을 가진 테이블이 가능한 한 빨리
등의 과정을 고정 할 및 수량. 항목 수는 50 개 이상일 수 있습니다. 어떻게해야합니까?
나는 판매 주문 세부 사항 입력을위한 화면을 만들고 싶습니다.컨트롤의 동적 생성
내가 그래서 내가 제품 이름 아래에 새로운 텍스트 상자를 만들려면 +
를 클릭하면 그래서 내가 두 개의 텍스트 상자
Product name Qty +
을 가진 테이블이 가능한 한 빨리
등의 과정을 고정 할 및 수량. 항목 수는 50 개 이상일 수 있습니다. 어떻게해야합니까?
jQuery를 사용할 수 있습니다. 예 :
$('.plus').click(function() {
$(this).append('<input type="text">');
})
다음은 초기 행의 복제를 사용하는 예입니다. 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>
,이 같은 (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>
을 당신은 성가신 팝업으로 사용자를 훼방하려는 경우 채워진 행을 삭제하려고 시도하는 경우이 비트 (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);
}
});