쉽다. 당신이 말 :
<select name="hdd"><!-- ...options here...--></select>
을 당신이 DOM (아래 참조)에서 기존 요소에 대한 참조를 일단, 당신은이 작업을 수행 할 수 있습니다
var newSelect = existingSelect.cloneNode(true);
newSelect.selectedIndex = -1; // To clear any existing selection
existingSelect.parentNode.insertBefore(newSelect, existingSelect.nextSibling);
이 될 수있는 기존 select에 대한 참조를 얻기 예를 들어, (모든 일치의 목록을 얻을 수 있습니다) (첫 번째 일치를 얻을 수)는 CSS 셀렉터와 document.querySelector를 사용하거나 document.querySelectorAllany modern browser에서 수행 :
var list = document.querySelectorAll('select[name="hdd"]');
var existingSelect = list[list.length - 1]; // Get the last one
... 당신에게 마지막 것입니다. 또는 어떤 종류의 행 (tr 또는 div) 에 복사 할 문자가 인 행이 있습니다. 사물의 MySQL의 측면에서
var list = document.querySelectorAll('.hdd');
var existingRow = list[list.length - 1]; // Get the last one
var newRow = existingRow.cloneNode(true); // Clone it
newRow.querySelector('select[name="hdd"]').selectedIndex = -1; // Clear selected value
existingRow.parentNode.insertBefore(newRow, existingRow.nextSibling);
: 아니 문제, 전체 일을 (여기에 내가 마지막 행을 복제하고 마지막에 추가 해요) (예를 들어, "hdd")을 해당 행을하는 클래스를 제공하고, 복제 이 아닌이 hdd1, hdd2 등과 같은 열을 포함하는 것이 가장 좋습니다. 왜냐하면 이러한 필드에 대한 쿼리가 복잡해지며 물론 최대 수를 제한하기 때문입니다 (어쨌든 제한하고 싶을 수도 있음) . (한 열에있는 열을 갖는 것은 DB를 "비정규 화"라고합니다.)
DB 설계에서이를 수행하는 일반적인 방법은 HDD를 나열하는 두 번째 테이블을 갖는 것입니다. 두 번째 테이블의 키 키 "라고도 함)가 메인 테이블로 다시 연결됩니다. (자세한 내용은 "데이터베이스 정규화"를 참조하십시오.)
그래서 주 테이블에 SystemID과 같은 레코드 ID가있을 수 있습니다. 그러면 HDD 테이블은 SystemID 열과 HDD 열을 가지며 여기에는 동일한 SystemID에 대해 많은 행이있을 수 있습니다.
다음은 양식 비트의 전체 예입니다. Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Add Form Field Example</title>
</head>
<body>
<div class="hdd">
<label>HDD: <select name="hdd">
<option>--choose--</option>
<option>80GB</option>
<option>500GB</option>
<option>1TB</option>
<option>2TB</option>
</select></label></div>
<input type="button" id="theButton" value="Add Row">
<script>
(function() {
document.getElementById("theButton").addEventListener("click", addRow, false);
function addRow() {
var list = document.querySelectorAll('.hdd');
var existingRow = list[list.length - 1]; // Get the last one
var newRow = existingRow.cloneNode(true); // Clone it
newRow.querySelector('select[name="hdd"]').selectedIndex = -1; // Clear selected value
existingRow.parentNode.insertBefore(newRow, existingRow.nextSibling);
}
})();
</script>
</body>
</html>
몇 가지 유용한 참조 :
