0

シンプルなメソッド makeInput() を使用して HTML フォームを動的に作成していますが、テキスト入力ボックスを右から左にではなく、1 行に 1 つずつ表示する方法を考えています。現在、「コースを追加」ボタンをクリックすると、新しい行ではなく、古いテキスト入力のすぐ隣に新しいテキスト入力が追加されます。これが私がこれまでに持っているコードです:

<html>
<head>COURSES</head>
<title>Add Courses</title>
<script type="text/javascript">
var x = 0;
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"tron.php");
f.id = "form1";
var s = document.createElement("input"); //input element, Submit button
s.setAttribute('type',"submit");
s.setAttribute('value',"Submit Courses");
f.appendChild(s);
function makeInput()
{

var i = document.createElement("input");
i.type = "text";
i.name = "cname"+ x;
i.id = "cname"+ x;

f.appendChild(i);
document.getElementById("test").appendChild(f);

x = x+1;
document.getElementById("course").innerHTML= "Number of courses: " + x;
}

</script>
<body>
<p id="course">Number of courses: </p>
<button onclick="makeInput()">Add Course</button>
<p id="test"></p>


</body>
</html>
4

2 に答える 2

0

私は通常、html フォームの周囲に div やスパンを動的に作成して、それらにも css を適用できるようにします。入力ボックスを div 内に配置する場合は、特に css を追加しない限り、一度に 1 行ずつ表示する必要があります。

于 2013-04-24T02:51:25.067 に答える
0

コメントを回答として実装するだけです。

変化する

document.getElementById("test").appendChild(f);

次へ

document.getElementById("test").appendChild(f).innerHTML += '<br />';

これがフィドルです：http://jsfiddle.net/UR4y7/

于 2013-04-24T02:55:20.220 に答える