1

我有以下代码结构，如何单击编辑按钮以仅显示/隐藏该表的 3 个文件输入字段？

默认情况下，所有这些文件输入字段都是隐藏的。如果我按下第二个表内的编辑按钮，则只会显示第二个表内的 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

我认为最好的解决方案是使用 JQuery 来实现，而不是直接使用 Javascript。

EDIT2：好的，完全解决了！http://jsfiddle.net/3QYhQ/

Jquery 在这里：

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

这就是说，任何时候单击 an 时.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。本质上，所有隐藏的输入都有两个类 - 一个将它们绑定到他们需要使用的编辑按钮，另一个由 CSS 使用的通用类名如下：

.editGroup {
    visibility:hidden;
}

我希望这会有所帮助！

如果有人可以做一些更有趣的.child()事情或类似的事情（我不太精通使用这些），请随时分享您的答案！

于 2013-06-25T23:18:48.747 回答
0

试试这个，看看演示

编辑 
<div>
    <input type="file" name="product" class="editThis" />
    <input type="file" name="color" class="editThis" />
    <input type="file" name="price" class="editThis" />

    <span class="editButton">edit</span>
</div>

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

    <span class="editButton">edit</span>
</div>

$('.editButton').click(function()
                       {
                           $(this).siblings('.editThis').toggle();                                           
                        });
于 2013-06-25T23:19:43.877 回答
0

我会为每个输入产品组推荐一个不同的类名，并使用getElementsByClassName()函数。我还建议使用从页面display:none中删除您的input元素，然后使用display:block插入它们。

这是一个纯 JavaScript 示例（jsfiddle 演示）：

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 回答