0

複数の画像をキャプション付きで追加するフォームを作成したい。私はphpとmysqlの人です。したがって、addmore をクリックして新しいフィールドを取得できれば、残りの php mysql 部分を実行できます。var x を設定して新しい行を作成し、新しい参照ボタンとキャプション テキストフィールドを提供するにはどうすればよいですか。

<script type="text/javascript">
<!--
function addMore() {
if (document.getElementById && document.createElement) {
    var x = ;
    document.getElementById('inserthere').appendChild(x);
}
else alert('Your browser doesn\'t support the Level 1 DOM');
}

function delMore() {
if (document.getElementById && document.createElement) {
    var node = document.getElementById('inserthere')
    node.removeChild(node.childNodes[0]);
}
else alert('Your browser doesn\'t support the Level 1 DOM');
}
// -->
</script>

</head>

<body>
<table>
<tr><td>Select Image<input type="file" name="img[]" id="img"  /></td><td>Add caption
<input type="text" name="img_cap[]" id="img_cap" /></td>
</tr>
<span id="inserthere"></span>
</table>

<a href="javascript:addMore()" class="page">add More</a><br />
<a href="javascript:delMore()" class="page">remove</a>

</body>

誰かが返信するまで、私は学び、インターネットを探索し、試してみます.....

4

1 に答える 1

0

これは最も美しい方法ではありませんが、おそらく最も簡単で迅速な方法は、テーブルにidプロパティ (たとえば、 ) を与え、関数'imgtable'で次のことを行うことです。addMore()

var x = document.createElement('tr'); // create a new row ready to add
x.innerHTML = '<td>Select Image<input type="file" name="img[]" id="img"  /></td><td>Add caption <input type="text" name="img_cap[]" id="img_cap" /></td>'; // fill it with your code
document.getElementById('imgtable').appendChild(x) // add the new row to the table

ただし、詳細を知りたい場合はdocument.createDocumentFragment()、オブジェクトを実際に DOM に追加する前に、個別に宣言された要素をオブジェクトに追加する方法などのメソッドを調べてください。私が使用したinnerHTML方法はより高速ですが、ドキュメントフラグメントを宣言するよりもきちんとしたものではなく、デバッグがより困難になる可能性があります。

お役に立てれば。

于 2013-01-31T14:00:49.433 に答える