0
사람이 항목을 추가 할 수있는 동적 목록을 만들려고합니다. 한 번에 한 줄, 컨트롤을 사용하여 각 줄을 삭제하거나 새 목록을 추가하십시오.자바 스크립트 동적 목록
내 목록은 10 개 항목이고 첫 번째 항목은 항상 필수 항목입니다.
사용자가 10 줄을 모두 추가 할 수있을 때까지 관리 할 수 있었지만 삭제하려고 시도했거나 모든 것이 남을 경우 ... 누군가 jQuery없이이 작업을 도와 줄 수 있습니까?
http://jsfiddle.net/Zx8hc/2/ 사전에 대단히 감사합니다 :
가 나는 또한 JSFiddle의 예를 생성하지만이 작동하지 않습니다 ... 그는 링크 적은 없다.
<html>
<head>
<title>Doc</title>
<style type="text/css">
#usersform {
display: table;
}
.divtr {
display: none;
}
.divtd {
display: table-cell;
padding-top: 10px;
}
#presUser_1 {
display: table-row!important;
}
</style>
<script type="text/javascript">
function addUsersForm(x) {
var y = "presUser_" + x;
var z = "addUserButton_" + (x - 1);
var t = "removeUserButton_" + (x - 1);
document.getElementById(y).style.display = "table-row";
document.getElementById(z).style.display = "none";
document.getElementById(t).style.display = "inline-block";
}
function removeUsersForm(x) {
var y = "presUser_" + x;
document.getElementById(y).style.display = "none";
}
</script>
</head>
<body>
<div id="usersForm">
<div class="divtr" id="presUser_1">
<div class="divtd">Age <input type="text"></div>
<div class="divtd">
<a href="javascript:void(0);" id="addUserButton_1" title="Add" onClick="addUsersForm(2);">Add</a>
<a href="javascript:void(0);" id="removeUserButton_1" title="Delete this" onClick="removeUsersForm(1);">Delete</a>
</div>
</div>
<div class="divtr" id="presUser_2">
<div class="divtd">Age <input class="textAge" name="page_2" id="page_2" type="text"></div>
<div class="divtd">
<a href="javascript:void(0);" id="addUserButton_2" title="Add" onClick="addUsersForm(3);">Add</a>
<a href="javascript:void(0);" id="removeUserButton_2" title="Delete this" onClick="removeUsersForm(2);">Delete</a>
</div>
</div>
<div class="divtr" id="presUser_3">
<div class="divtd">Age <input class="textAge" name="page_3" id="page_3" type="text"></div>
<div class="divtd">
<a href="javascript:void(0);" id="addUserButton_3" title="Add" onClick="addUsersForm(4);">Add</a>
<a href="javascript:void(0);" id="removeUserButton_3" title="Delete this" onClick="removeUsersForm(3);">Delete</a>
</div>
</div>
<div class="divtr" id="presUser_4">
<div class="divtd">Age <input class="textAge" name="page_4" id="page_4" type="text"></div>
<div class="divtd">
<a href="javascript:void(0);" id="addUserButton_4" title="Add" onClick="addUsersForm(5);">Add</a>
<a href="javascript:void(0);" id="removeUserButton_4" title="Delete this" onClick="removeUsersForm(4);">Delete</a>
</div>
</div>
<div class="divtr" id="presUser_5">
<div class="divtd">Age <input class="textAge" name="page_5" id="page_5" type="text"></div>
<div class="divtd">
<a href="javascript:void(0);" id="addUserButton_5" title="Add" onClick="addUsersForm(6);">Add</a>
<a href="javascript:void(0);" id="removeUserButton_5" title="Delete this" onClick="removeUsersForm(5);">Delete</a>
</div>
</div>
<div class="divtr" id="presUser_6">
<div class="divtd">Age <input class="textAge" name="page_6" id="page_6" type="text"></div>
<div class="divtd">
<a href="javascript:void(0);" id="addUserButton_6" title="Add" onClick="addUsersForm(7);">Add</a>
<a href="javascript:void(0);" id="removeUserButton_6" title="Delete this" onClick="removeUsersForm(6);">Delete</a>
</div>
</div>
<div class="divtr" id="presUser_7">
<div class="divtd">Age <input class="textAge" name="page_7" id="page_7" type="text"></div>
<div class="divtd">
<a href="javascript:void(0);" id="addUserButton_7" title="Add" onClick="addUsersForm(8);">Add</a>
<a href="javascript:void(0);" id="removeUserButton_7" title="Delete this" onClick="removeUsersForm(7);">Delete</a>
</div>
</div>
<div class="divtr" id="presUser_8">
<div class="divtd">Age <input class="textAge" name="page_8" id="page_8" type="text"></div>
<div class="divtd">
<a href="javascript:void(0);" id="addUserButton_8" title="Add" onClick="addUsersForm(9);">Add</a>
<a href="javascript:void(0);" id="removeUserButton_8" title="Delete this" onClick="removeUsersForm(8);">Delete</a>
</div>
</div>
<div class="divtr" id="presUser_9">
<div class="divtd">Age <input class="textAge" name="page_9" id="page_9" type="text"></div>
<div class="divtd">
<a href="javascript:void(0);" id="addUserButton_9" title="Add" onClick="addUsersForm(10);">Add</a>
<a href="javascript:void(0);" id="removeUserButton_9" title="Delete this" onClick="removeUsersForm(9);">Delete</a>
</div>
</div>
<div class="divtr" id="presUser_10">
<div class="divtd">Age <input class="textAge" name="page_10" id="page_10" type="text"></div>
<div class="divtd">
<a href="javascript:void(0);" id="removeUserButton_10" title="Delete this" onClick="removeUsersForm(10);">Delete</a>
</div>
</div>
</div>
</body>
</html>
======================== 편집
자세한 설명은 ... 내 말 것은 그 사람의 경우 행을 삭제하기 시작하지만 올바른 순서가 아닌 "추가"버튼이 사라지거나 행이 "한정된"횟수만큼 추가 될 수 있습니다. 이 물건에 대한 경험이있는 사람들이 나에게이 방법을 사용하는 것이 더 쉬운 방법이라고 말할 수 있는지 물어 보았습니다.
- 당신은이 "추가"모든 10 줄을 추가 버튼 미만 10 라인, 오른쪽 라인의 마지막에 추가 버튼이 있어야이 추가되면 사라지지만? 추가 할 때
- 또한,/삭제 나는
여기에 코드로 작동하는 바이올린이 있습니다. [** fiddle **] (http://jsfiddle.net/Zx8hc/3/) 어쨌든 모든 것이 잘 작동하는 것 같습니다. 추가 및 삭제 버튼이 모두 제대로 작동합니다. "모든 게 남쪽으로 간다"는 말이 무슨 뜻인지 설명해 주시겠습니까? – BeNdErR