여분필드 능동배치 - 예제 22개 > 팁

• 목록

<style>.iptStyle { width:100%; height:40px; padding:5px; border:1px solid #cccccc; background-color:#ffffff; border-radius:3px; box-sizing:border-box; }</style>
<script>
inputTotal = 22;
widthTotal = 4;
inputGap = 3;
topString = "my_";
inputRequired = [3,7,9,16,17,22];
inputIdName = "<input type=text class=iptStyle>";
document.write("<table id=inputTable style=width:100%;table-layout:fixed cellpadding=0 cellspacing=0></tr>");
for (n = 1; n <= inputTotal; n++) {
if (n % widthTotal == 0) {
if (inputTotal <= widthTotal || n == inputTotal) document.write("<td>" + inputIdName + "</td>");
else document.write("<td>" + inputIdName + "</td></tr><tr><td style=height:" + inputGap + "px></td></tr><tr>");
}
else document.write("<td>" + inputIdName + "</td><td style=width:" + inputGap + "px></td>");
}
document.write("</tr></table>");
ipt = inputTable.getElementsByTagName("input");
for (n = 1; n <= ipt.length; n++) {
ipt[n - 1].id = ipt[n - 1].name = topString + n;
for (iptr in inputRequired) {
if (inputRequired[iptr] == n) {
ipt[n - 1].required = true;
ipt[n - 1].style.backgroundColor = "#eeeeee";
}
}
ipt[n - 1].placeholder = "여분필드_" + n;
}
</script>