2011-02-03 6 views
0

나는 판매 주문 세부 사항 입력을위한 화면을 만들고 싶습니다.컨트롤의 동적 생성

내가 그래서 내가 제품 이름 아래에 새로운 텍스트 상자를 만들려면 +를 클릭하면 그래서 내가 두 개의 텍스트 상자

Product name   Qty + 

을 가진 테이블이 가능한 한 빨리

등의 과정을 고정 할 및 수량. 항목 수는 50 개 이상일 수 있습니다. 어떻게해야합니까?

답변

1

jQuery를 사용할 수 있습니다. 예 :

$('.plus').click(function() { 
    $(this).append('<input type="text">'); 
}) 
0

다음은 초기 행의 복제를 사용하는 예입니다. 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 &amp; 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); 
    } 
});