JavaScript修改商品数量题目案列

Posted 2020-06-28

第一种方式：(简单点)

//修改操作

function updateItem(){

    //利用toggle复合事件

$("input[type=button][value=修改]").toggle(function(){

//按钮变成“确定”

$(this).attr("value","确定");

//显示文本框并隐藏span

var $span = $(this).parent().parent().children(":eq(1)").children(":eq(0)")

    //获得焦点并选中

$span.hide().next().show().val($span.text()).focus().select();    

},function(){

//把按钮变成“修改”

$(this).attr("value","修改");

//隐藏文本框并显示span

var $input=$(this).parent().parent().children(":eq(1)").children(":eq(1)");

$input.hide().prev().show().text($input.val());

})

    

        题目图片：

    

第二种方式：（复杂些）

    //修改方法

function updates() {

//找到每点击的下标

var $i = $(this).parents("tr").index() - 1;

//当前行的修改跟确认切换

$(this).hide().next().show();

//显示当前行的文本框

$("table").find(".x:eq(" + $i + ")").show();

//获取数量

var $shul=$("span:eq("+$i+")").text();

//将数量隐藏清除

$("span:eq("+$i+")").hide().empty(); 

//给文本框赋值

$(".x:eq("+$i+")").val(parseInt($shul));

//点击确认将文本框的值传给span显示出来，将确认按钮切换成修改按钮

$(‘input[value="确认"]‘).click(function(){

$("input[value=‘确认‘]:eq("+$i+")").hide().prev().show();

var $zhi=$(".x:eq("+$i+")").val();

$("span:eq("+$i+")").text($zhi);

$("table").find(".x:eq(" + $i + ")").hide();

$("span:eq("+$i+")").show();

})

坚持把自己每天所学的记录下

（世界上永远存在解决问题的办法，但我们还是会遇到各种难题。因为除非我们真正去尝试解决，否则永远不知道哪种方法奏效。）