点击时改变左侧值不能连续工作

Question

嗨我有一张桌子和一个按钮，我希望第一次点击按钮时将我的可选tr内容移动到20 px左侧。在第二次点击我想再次移动20px（总共40px）。我在这里写了一些代码，但问题是它只移动20px。第二次点击后的功能不起作用 这是代码

＆＃13;

＆＃13;

  $("tr").click(function () {

            $(this).addClass("selected");
        });

        //************** for left working***************//
        $("button").click(function () {
            var CurrentTrId = $("tr.selected").attr("data-id");

            var ParrentTrId = (CurrentTrId) - 1;

            if (ParrentTrId == 0) {
                return
            }

            var CurrentTrLeftValue = parseInt($(".selected ").css("padding-left"));

            var parrentTrLeftValue = parseInt($('.selected').parent().css('padding-left'));


                if (CurrentTrLeftValue <= 40) {

                    CurrentTrLeftValue = (CurrentTrLeftValue + 20);


                    $(".selected > td:first-child").css({ "padding-left": CurrentTrLeftValue });
  $(".selected > td:first-child").addClass("normal");
                  $('#' ,ParrentTrId).addClass('bold');
            }
        });

＆＃13;

  .table {
    position:static;
      width:100%; 
        border-collapse:collapse;
        
}
            .table td {
                border: 1px solid;
                border-color: lightgray;
                height: 17px;
            }
            .selected{
                 background-color:lightskyblue;
            }
.normal{
font-size:12px;}
.bold{ font-weight:bold;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <table class="table">
        <tr>
        <td>hi</td> <td>hi</td>
        </tr>
        <tr>
            <td>me</td> <td>me</td>
        </tr>
        <tr>
            <td>you</td> <td>you</td>
        </tr>
    </table>
    <button>clickme</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用var CurrentTrLeftValue = parseInt($(".selected > td:first-child ").css("padding-left"));

$(function(){
$("tr").click(function () {

            $(this).addClass("selected");
        });

        //************** for left working***************//
        $("button").click(function () {
            
            var CurrentTrId = $("tr.selected").attr("data-id");
            
            var ParrentTrId = (CurrentTrId) - 1;

            if (ParrentTrId == 0) {
                return
            }

            var CurrentTrLeftValue = parseInt($(".selected > td:first-child ").css("padding-left"));
            console.log(CurrentTrLeftValue);
            var parrentTrLeftValue = parseInt($('.selected').parent().css('padding-left'));


                if (CurrentTrLeftValue <= 40) {

                    CurrentTrLeftValue = (CurrentTrLeftValue + 20);


                    $(".selected > td:first-child").css({ "padding-left": CurrentTrLeftValue });
  $(".selected > td:first-child").addClass("normal");
                  $('#' ,ParrentTrId).addClass('bold');
            }
        });

})

.table {
    position:static;
      width:100%; 
        border-collapse:collapse;
        
}
            .table td {
                border: 1px solid;
                border-color: lightgray;
                height: 17px;
            }
            .selected{
                 background-color:lightskyblue;
            }
.normal{
font-size:12px;}
.bold{ font-weight:bold;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <table class="table">
        <tr>
        <td>hi</td> <td>hi</td>
        </tr>
        <tr>
            <td>me</td> <td>me</td>
        </tr>
        <tr>
            <td>you</td> <td>you</td>
        </tr>
    </table>
    <button>clickme</button>