Question

HTML

<html>
    <head>
        <title>Title</title>
        <script src="jquery-1.11.2.js"></script>
        <link rel="stylesheet" type="text/css" href="ShoppingCart.css"/>
    </head>
    <body>
        <div id="UpperDiv">

        </div>
        <div id="MiddleDiv">
        <div class="AdminPage" id="PartOne">
            <div>
                <table id="itemsTable">
                    <thead>
                        <tr>
                            <td>Image</td>
                            <td>Name</td>
                            <td>Price</td>
                            <td>Stock</td>
                            <td>Actions</td>
                        </tr>
                    </thead>    
                </table>

                <div><img id="addTo" src="plus.png" alt="addTo" width="40" height="40"/></div>    
            </div>
            <div class="AdminPage" id="PartTwo">
                    Name:<input type="text" name="Name" class="AdminTxt"/>
                    Image path:<input type="text" name="Image" class="AdminTxt"/>
                    Unit price:<input type="text" name="Price" class="AdminTxt"/>
                    Stock:<input type="text" name="Stock" class="AdminTxt"/>
                    <button id="AddProduct">Add Product</button>
                </div>
            </div>
            <div class="PageTwo" id="ClientPage"></div>
            <div class="PageThree" id="CheckOutPage"></div>    
        </div>
        <div id="LeftDiv">
            <button id="AdminPanel">Admin Panel</button>
            <button id="Client">Client</button>
            <button id="Checkout">Checkout</button>
        </div>

        <script src="ShoppingCart.js"></script>    
    </body>
</html>

JQUERY

$(function(){         
    $("#AdminPage").on("click",function(){
        $("#ClientPage").hide();
        $("#CheckOutPage").hide();
        $("#PartTwo").hide();
        $("#PartOne").show();
    });

    $("#addTo").on("click",function(){
        $("#PartTwo").css({"display":"inline-block"});
    });       

    $("#AddProduct").on("click",function(){
        ////// read the value each time the add product clicked
        var textName=$(".AdminTxt").eq(0).val();
        var imagePath=$(".AdminTxt").eq(1).val();
        var unitPrice=$(".AdminTxt").eq(2).val();
        var stock=$(".AdminTxt").eq(3).val();
        /// put the values inside the html
        var html='<tr class="tableRows">' +
            '<td id="imgCol" class="Cols"><img id="Img" src="'+imagePath+'" alt="" width="100px" height="100px"/></td>' +
            '<td id="nameCol" class="Cols">'+textName+'</td>' +
            '<td id="priceCol" class="Cols">'+unitPrice+'</td>' +
            '<td id="stockCol" class="Cols">'+stock+'</td>' +
            '<td id="ActionsCol" class="ColsNedit"><img src="Edit-icon.png" id="editIc" alt="edit" width="50px" height="50px"/>&nbsp;&nbsp;' +
            '<img src="delete.png" id="delIc" alt="delete" width="50" height="50"></td>' +
            '</tr>';
        $("#itemsTable").append(html);
        //console.log("add")
        //alert(textName);
        $("#PartTwo").css({"display":"none"});   ////make the form disapear
        $(".AdminTxt").val("");
        });

     $("#itemsTable").delegate("#delIc","click",function(){
         $(this).closest("tr").remove();
     });

     var flag=0;
     $("#itemsTable").delegate("#editIc","click",function(){
        //$("#PartTwo").show();
        var tds=$(this).closest("tr").find("td").filter(".Cols");
        var Imgsrc;
        var newsrc;
        if(flag==0) {
            tds.prop('contenteditable', true);
            var image=$(this).closest("tr").find("td").children(0);
            var imgsrc=image.attr("src");
            //var imgsrc=$(this).imagePath;   
            $(this).closest("tr").find("td:first").children().eq(0).replaceWith("<input id='Imgsrc' type='text' value="+imgsrc+"/>");
            //$(this).closest("tr").find("td:first").children().eq(0).attr("value");

            flag = 1;
        }
        else if(flag==1){
            tds.prop('contenteditable', false);    

                newsrc = $(this).closest("tr").find("td:first").children().eq(0).attr("value");
                alert(newsrc);
                $(this).closest("tr").find("td:first").children().eq(0).replaceWith("<img id='newSrc' src=" + newsrc + " width='100px' height='100px'/>");       
        }    
    });      
});

编辑按钮将使表格行可编辑

问题是

我想用输入文本标签替换图像标签，其值是图像的src然后当我再次点击编辑图标时，输入文本字段的值将是图像的newsrc。

问题是图像src在编辑后仍然是旧图像

我怎么能这样做？

请注意，所有这些元素都是在运行时创建的

Answer 1

问题是您获得input attr('value')的价值。您应该使用val()，因为attr('value')始终返回第一个值。尝试以下。希望这能解决你的问题。

var flag = 0;
$("#itemsTable").delegate("#editIc", "click", function () {
    var tds = $(this).closest("tr").find("td").filter(".Cols");

    if (flag == 0) {
       tds.prop('contenteditable', true);
       var image = $(this).closest("tr").find("td:first > img");
       var imgsrc = image.attr("src");
       image.replaceWith("<input id='Imgsrc' type='text' value=" + imgsrc + " />");

       flag = 1;
    }
    else if (flag == 1) {
       tds.prop('contenteditable', false);
       var text = $(this).closest("tr").find("td:first > input");
       var newsrc = text.val();
       text.replaceWith("<img id='newSrc' src=" + newsrc + " width='100px' height='100px' />");

       flag = 0;
    }
});

获取运行时创建的输入文本字段的值，并将其作为运行时创建的img src然后显示该图像

1 个答案: