从tr中选择td第一个孩子没有得到

时间:2016-07-26 07:23:21

标签: javascript

  $(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($("tr[data-id='" + parrentid + "']td:first-child").css("padding-left"));
                if (NewCurrentTrLeftValue == ParrentTrLeftValue) {

                    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;
            }
<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>

我想选择td:来自我的第一个孩子我使用此代码

  var LeftValue = parseInt($("tr[data-id='" + parrentid + "'] > td:first-child").css("padding-left")); 

但没有采取任何方法吗? “parrentid是一个存储parrent data-id的变量”

我有一张桌子和一个按钮,我想在第一次点击按钮时将我的可选tr内容移动到20 px左侧。在第二次点击我想再次移动20px(总共40px)。我在这里写了一些代码

3 个答案:

答案 0 :(得分:1)

确保此选择器返回数据

$("tr[data-id='" + parrentid + "'] > td:first-child");

如果没有,请使用此

$("tr[data-id='" + parrentid + "'] td:first-child"); 

然后确保

parseInt($("tr[data-id='" + parrentid + "'] > td:first-child").css("padding-left"));不会返回类似'123px'的字符串

答案 1 :(得分:1)

使用:first-child选择第一个孩子

var LeftValue = $("tr[data-id='1'] td:first-child").text();
alert(LeftValue)

JSFIDDLE

答案 2 :(得分:-1)

通常是错误:&#34;未捕获的ReferenceError:$未定义&#34;当Jquery库未包含在HTML页面中时发生。 您可以使用以下代码包含Jquery文件,然后尝试:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>