2

画像に見られるように、(「追加」リンクを介して) 新しいセクションを追加し、(「x」ボタンを介して) それらを削除できるようにしたいと考えています。

スクリーンショット

画像の HTML:

<fieldset>
   <legend>Legend</legend>

        <div id="section0">
            <input type="text" name="text1" value="Text1" />
            <input type="text" name="text2" value="Text2" size='40' />
            <input type="button" value="x" style="width: 26px" /><br />
        </div>

     <a href="#">add</a><br />

</fieldset>

必要に応じて新しいセクション (セクション 1、セクション 2) を追加し、どのボタンが押されたかに応じてそれらのセクションを削除できると思います。「追加」リンクがクリックされるたびに DOM にセクションを挿入する JavaScript 関数と、「x」ボタンがクリックされるたびにセクションを削除する別の JavaScript 関数があります。

私は HTML と Javascript の経験がほとんどないので、これが良い解決策か悪い解決策かわかりません。だから、私の質問はまさにそれです:これはそれを行う正しい方法ですか、それともより単純でより良い方法がありますか? ありがとう。

PS：サンプルコードで自由に答えてください

4

3 に答える 3

1

http://pastebin.com/QBMEJ2pqは少し長いですが、堅実な答えです。

于 2012-04-06T03:50:45.263 に答える
1

ほんの数分前に、ここで jQuery を使用してほぼ同じ質問に答えました: https://stackoverflow.com/a/10038635/816620でどのように機能したかを確認したい場合。

プレーンな JavaScript が必要な場合は、次のように実行できます。

HTML:

<div id="section0">
    <input type="text" name="text1" value="Text1" />
    <input type="text" name="text2" value="Text2" size='40' />
    <input type="button" value="x" style="width: 26px" /><br />
</div>

<a href="#" onclick="addSection(this)">add</a><br />

Javascript:

function addSection(where) {
    var main = document.getElementById("section0");
    var cntr = (main.datacntr || 0) + 1;
    main.datacntr = cntr;

    var clone = main.cloneNode(true);
    clone.id = "section" + cntr;
    where.parentNode.insertBefore(clone, where);    
}​

実際のデモ: http://jsfiddle.net/jfriend00/TaNFz/

于 2012-04-06T03:39:09.963 に答える
1

これを行う1つの方法は次のとおりです。

<script type="text/javascript">
function newrow() {
document.getElementById("customTable").innerHTML += "<tr><td><input type='text'></td><td><input type='text'></td><td><button onclick='del(this)'>X</button></td></tr>";
}

function del(field) {
field.parentNode.parentNode.outerHTML = "";
}
</script>

<body onload="newrow()">
<fieldset>
    <legend>Legend</legend>
    <table>
        <tbody id="customTable">
        </tbody>
    </table>
<button onclick="newrow()">Add</button> 
</fieldset>
</body>

必要に応じて ID を追加するか、位置で呼び出すことができますdocument.getElementsByTagName("input")[x].value入力は 0 から始まるため、左が 0、右が 1、行を追加: 左が 2、右が 3 などです。

1 つを削除しても、シーケンスが乱れることはありません (毎回再評価されます)。これは、ハードコードされた ID よりも優れています。

于 2012-04-06T03:39:16.013 に答える