title: selecting td first child from tr is not getting
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $(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 &gt; td:first-child ").css("padding-left"));
                  console.log(CurrentTrLeftValue);
                  var ParrentTrLeftValue = parseInt($("tr[data-id='" + parrentid + "']td:first-child").css("padding-left"));
                  if (NewCurrentTrLeftValue == ParrentTrLeftValue) {
  
                      if (CurrentTrLeftValue &lt;= 40) {
  
                          CurrentTrLeftValue = (CurrentTrLeftValue + 20);
  
  
                          $(".selected &gt; td:first-child").css({ "padding-left": CurrentTrLeftValue });
                          $(".selected &gt; td:first-child").addClass("normal");
                          $('#', ParrentTrId).addClass('bold');
                      }
                  }       });
  
          })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .table {
      position:static;
        width:100%; 
          border-collapse:collapse;
          
         
  }
              .table td {
                  border: 1px solid;
                  border-color: lightgray;
                 
                  height: 17px;
              }
              .selected{
                   background-color:lightskyblue;
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table class="table"&gt;
          &lt;tr&gt;
          &lt;td&gt;hi&lt;/td&gt; &lt;td&gt;hi&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;me&lt;/td&gt; &lt;td&gt;me&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;you&lt;/td&gt; &lt;td&gt;you&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;button&gt;clickme&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>i want select td:first child from my tr i use this code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  var LeftValue = parseInt($("tr[data-id='" + parrentid + "'] &gt; td:first-child").css("padding-left")); </code></pre>
  </div>
  </div>
  </p>
  
  <p>but its not taken is there any method for this? 
  the "parrentid is a variable which store the parrent data-id"</p>
  
  <p>i have a table and a button i want move my selectable tr content into 20 px left on click the button first time. on second click i want move it 20px again(total40px). i write some code here </p>