1

以下のコード構造があります。編集ボタンをクリックして、そのテーブルの 3 つのファイル入力フィールドのみを表示/非表示にするにはどうすればよいですか?

デフォルトでは、これらのファイル入力フィールドはすべて非表示になっています。2 番目のテーブル内で編集ボタンを押すと、2 番目のテーブル内の 3 つの入力のみが表示されます。

     <table>
        <input type="file" name="product" class="editThis" />
        <input type="file" name="color" class="editThis" />
        <input type="file" name="price" class="editThis" />

        <span class="editButton"></span>
    </table>

    <table>
        <input type="file" name="product" class="editThis" />
        <input type="file" name="color" class="editThis" />
        <input type="file" name="price" class="editThis" />

        <span class="editButton"></span>
    </table>

    <table>
        <input type="file" name="product" class="editThis" />
        <input type="file" name="color" class="editThis" />
        <input type="file" name="price" class="editThis" />

        <span class="editButton"></span>
    </table>

私がオンラインで見つけた例のほとんどは getElementbyID を使用しているため、ちょっと行き詰まっています。

ありがとう、

パット

4

3 に答える 3

0

入力の製品グループごとに異なるクラス名を付け、getElementsByClassName()関数を使用することをお勧めします。また、 を使用してページから要素display:noneを削除し、を使用して挿入することもお勧めします。inputdisplay:block

純粋な JavaScript の例 ( jsfiddle demo )を次に示します。

HTML:

<table width="100%">
<th>Product 2</th>
<tr>
    <td id="product_2_edit_button" onclick="my_function()">edit</td>
    <tr>
        <td>
            <input style="display:none" type="file" name="product" class="product_2_field" />
            <input style="display:none" type="file" name="color" class="product_2_field" />
            <input style="display:none" type="file" name="price" class="product_2_field" />
        </td>
    </tr>

JS:

function my_function() {
var testing = document.getElementsByClassName("product_2_field");
testing[0].style.cssText = "display:block";
testing[1].style.cssText = "display:block";
testing[2].style.cssText = "display:block";

}

于 2013-06-26T01:44:20.040 に答える
0

最善の解決策は、そのままの Javascript ではなく、JQuery を使用して実装されると思います。

EDIT2：さて、すべて完全に解決しました！http://jsfiddle.net/3QYhQ/

Jquery は次のとおりです。

$(".editButton").click(function () {
    var x = $(this).attr("group");
    $('.' + x).css("visibility", "visible");
});

これは、.editButtonがクリックされるたびに、属性groupを取得してその値を取得することを意味します。次に、グループが持っていた値のクラス名を持つものを見つけて、それを可視にします。

<input type="button" class="editButton" group="editGroup1" value="Edit" />
<input type="text" name="product" class="editGroup1 editGroup" />
<input type="text" name="color" class="editGroup1 editGroup" />
<input type="text" name="price" class="editGroup1 editGroup" />

<input type="button" class="editButton" group="editGroup2" value="Edit" />
<input type="text" name="product" class="editGroup2 editGroup" />
<input type="text" name="color" class="editGroup2 editGroup" />
<input type="text" name="price" class="editGroup2 editGroup" />

ここにhtmlがあります。基本的に、すべての非表示の入力には 2 つのクラスがあります。1 つは使用する必要がある編集ボタンにバインドし、もう 1 つは以下の CSS で使用される一般的なクラス名です。

.editGroup {
    visibility:hidden;
}

それが役立つことを願っています！

誰かがもっと手の込んだこと.child()やそのようなことを行うことができる場合 (私はそれらの使用にあまり精通していません)、お気軽に回答を共有してください!

于 2013-06-25T23:18:48.747 に答える