当使用jQuery在行位于顶部或底部时如何更改图标颜色

Question

I've built my table through string html format in vb.net and getting data through databases into the table in form of rows and columns.

Rows are moving Up and Down using jquery onclick function ,

All I want is when a row is at top then the blue arrow become gray because It is not allowed to move above and same is for bottom.

I can show you my table in this picture:

Here is jquery onclick function:

$(document).on('click', '.HashirDown', function () {


var parentRow = $(this).closest('tr');

parentRow.insertAfter(parentRow.next());

});

$(document).on('click', '.HashirUp', function () {

    var temp = $(".HashirUp").index(this);
    if ($(".HashirUp").index(this) > 0) {

    var parentRow = $(this).closest('tr');

    parentRow.insertBefore(parentRow.prev());
}
else {
    return false;
}
});

Here is the StringHtml Format table :

 For i = 0 To DT.Rows.Count - 1
        StrHtml = String.Format("{0}<tr>", StrHtml)
        StrHtml = String.Format("{0}<td   colspan=""2"">{1}</td>", StrHtml, DT.Rows(i).Item("Decsription"))
        StrHtml = String.Format("{0}<td   colspan=""2"">{1}</td>", StrHtml, DT.Rows(i).Item("Condition"))
        StrHtml = String.Format("{0}<td  >{1}</td>", StrHtml, DT.Rows(i).Item("Result_"))
        StrHtml = String.Format("{0}<td  >{1}</td>", StrHtml, DT.Rows(i).Item("Type_"))
        StrHtml = String.Format("{0}<td >{1}</td>", StrHtml, DT.Rows(i).Item("PS_ID_Redirect"))
        StrHtml = String.Format("{0}<td >{1}</td>", StrHtml, DT.Rows(i).Item("TPL_Discount"))
        StrHtml = String.Format("{0}<td  >{1}</td>", StrHtml, DT.Rows(i).Item("Hub_Redirect"))

        If i = 0 Then
            StrHtml = String.Format("{0}<td class=""HashirUp""><img class=""btn_img"" src=""../icon/up.png""  title=""Can not move up, already first""/></td>", StrHtml, DT.Rows(i).Item("Order_"))
        Else
            StrHtml = String.Format("{0}<td class=""HashirUp""><img class=""btn_img "" src=""../icon/up.png""   title=""Move up the order""/></td>", StrHtml, DT.Rows(i).Item("Order_"))
        End If
        If i = DT.Rows.Count - 1 Then
            StrHtml = String.Format("{0}<td class=""HashirDown""><img class=""btn_img"" src=""../icon/down.png""  title=""Can not move down, already last""/></td>", StrHtml, DT.Rows(i).Item("Order_"))
        Else
            StrHtml = String.Format("{0}<td class=""HashirDown""><img class=""btn_img "" src=""../icon/down.png""   title=""Move down the order""/></td>", StrHtml, DT.Rows(i).Item("Order_"))
        End If

        StrHtml = String.Format("{0}<td class=""edit up""><a href=""#"" onclick=""Get_Price_Key_IU('{1}');"">Edit</a></td>", StrHtml, DT.Rows(i).Item("PS_ID"))
        StrHtml = String.Format("{0}<td class=""delete up""><a href=""#"" onclick=""Del_Price_Key('{1}');"">Delete</a></td>", StrHtml, DT.Rows(i).Item("PS_ID"))
        StrHtml = String.Format("{0}</tr>", StrHtml)

    Next
    StrHtml = String.Format("{0}</table>", StrHtml)
    Return StrHtml

Answer 1

You can use css filter property

 .gray { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } 

 <img src="https://www.gravatar.com/avatar/c7757f497ba7c0bbe832d91989e935eb?s=32&amp;d=identicon&amp;r=PG&amp;f=1" alt="" width="32" height="32"> <br><br> <img class="gray" src="https://www.gravatar.com/avatar/c7757f497ba7c0bbe832d91989e935eb?s=32&amp;d=identicon&amp;r=PG&amp;f=1" alt="" width="32" height="32">