使用Jquery在表中上载图像功能

Question

你有一张像网格一样的桌子。每行包含productID，后面是4列图像1，图像2，图像3，图像4.我对数据显示非常满意，但现在对我的要求是，在每个图像上我有2个链接，一个是编辑和另一个是删除。如果图像已上传，则编辑现有图像，否则上传新图像。第二个选项是删除图像。现在，我如何找到用户点击哪一行和哪一列上传或删除图像？请帮我解决这个问题我知道这可以使用Jquery完成，但我找不到任何帮助来完成这些工作

我的观点在这里：

    <table id="listProduct">
        <tr>
            <th>
                @*@Html.DisplayNameFor(model => model.)*@
                Product ID
            </th>
            <th>Category / Sub Category 
            </th>
            <th>Image 1 
            </th>
            <th>Image 2 
            </th>
            <th>Image 3

            </th>
            <th>Image 4
            </th>
            <th>Product Status
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @*@Html.ActionLink(@item.ProductId, "FreezeProdView", "SellerLogin")*@
                    @Html.DisplayFor(modelItem => item.ProductId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Category) / @Html.DisplayFor(modelItem => item.Subcategory)
                </td>
                <td width="20%" valign="top">
                    <img src ="@System.Configuration.ConfigurationManager.AppSettings["ShoppingBag"].ToString()@item.Image1" id = "Img1_"@item.ProductId alt="" style="width:90px;height:115px;" />
                </td>
                <td width="20%" valign="top">
                    <img src ="@System.Configuration.ConfigurationManager.AppSettings["ShoppingBag"].ToString()@item.Image2" id ="Img2_"@item.ProductIdalt="" style="width:90px;height:115px;" />
                </td>
                <td width="20%" valign="top">
                    <img src ="@System.Configuration.ConfigurationManager.AppSettings["ShoppingBag"].ToString()@item.Image3" id ="Img3_"@item.ProductId alt="" style="width:90px;height:115px;" />
                </td>
                <td width="20%" valign="top">
                    <img src ="@System.Configuration.ConfigurationManager.AppSettings["ShoppingBag"].ToString()@item.Image4" id ="Img4_"@item.ProductId alt="" style="width:90px;height:115px;" />
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ProductStatusCd)
                </td>
                @* <td>
                    @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                </td>*@
            </tr>
        }

    </table>

<table id="listProduct">
    <tr>
        <th>
            @*@Html.DisplayNameFor(model => model.)*@
            Product ID
        </th>
        <th>Category / Sub Category 
        </th>
        <th>Image 1 
        </th>
        <th>Image 2 
        </th>
        <th>Image 3

        </th>
        <th>Image 4
        </th>
        <th>Product Status
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @*@Html.ActionLink(@item.ProductId, "FreezeProdView", "SellerLogin")*@
                @Html.DisplayFor(modelItem => item.ProductId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Category) / @Html.DisplayFor(modelItem => item.Subcategory)
            </td>
            <td width="20%" valign="top">
                <img src ="@System.Configuration.ConfigurationManager.AppSettings["ShoppingBag"].ToString()@item.Image1" id = "Img1_"@item.ProductId alt="" style="width:90px;height:115px;" />
            </td>
            <td width="20%" valign="top">
                <img src ="@System.Configuration.ConfigurationManager.AppSettings["ShoppingBag"].ToString()@item.Image2" id ="Img2_"@item.ProductIdalt="" style="width:90px;height:115px;" />
            </td>
            <td width="20%" valign="top">
                <img src ="@System.Configuration.ConfigurationManager.AppSettings["ShoppingBag"].ToString()@item.Image3" id ="Img3_"@item.ProductId alt="" style="width:90px;height:115px;" />
            </td>
            <td width="20%" valign="top">
                <img src ="@System.Configuration.ConfigurationManager.AppSettings["ShoppingBag"].ToString()@item.Image4" id ="Img4_"@item.ProductId alt="" style="width:90px;height:115px;" />
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ProductStatusCd)
            </td>
            @* <td>
                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>*@
        </tr>
    }

</table>

如果我将文件，图片ID，产品ID提供给我的控制器的操作方法，我可以编写代码来上传文件或编辑文件。

我的控制器设计如下：

public string uploadProductImage(HttpPostedFileBase file, int productId,int imageId)
{

}