javascript - 根据 gridview 行调用 javascript 函数

Question

您好，我有一个 javascript 和 gridview 代码

<script type="text/javascript">
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "Images/pic_bulboff.gif";
    } else {
        image.src = "Images/pic_bulbon.gif";
    }
}

<asp:GridView Width="100%" ID="GridView1" DataSourceID="SqlDataSource1" DataKeyNames="ID" AutoGenerateColumns="False" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:TemplateField HeaderText="ID">
            <ItemTemplate>
                <asp:Label ID="lbl1" runat="server" Text='<%#Eval("ID") %>' />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <%#Eval("Name") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Desc">
            <ItemTemplate>
                <%#Eval("Desc") %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="On Off">
            <ItemTemplate>
                <img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" />
            </ItemTemplate>
        </asp:TemplateField>

并且生成的 gridview 将有大约 4 行，每次我点击不在第一行的图像时，它只会在第一行触发

关于如何解决这个问题有什么建议吗？

Answer 1

将您的 javascript 函数更改为，

<script type="text/javascript">
function changeImage(obj) {
    //var image = document.getElementById('myImage');
    if (obj.src.match("bulbon")) {
        obj.src = "Images/pic_bulboff.gif";
    } else {
        obj.src = "Images/pic_bulbon.gif";
    }
}

当你从网格中调用它时，调用如下，

onclick="changeImage(this);"