如何在我单击的 TR 下方的 TR 中查找 TD？答案

【问题标题】：How do I look for the TD inside a TR that is below the TR that I click?如何在我单击的 TR 下方的 TR 中查找 TD？
【发布时间】：2018-10-26 19:56:33
【问题描述】：

此代码的目的是如果<tr> 中包含的<td> 位于被单击的<tr> 下方，则进行ajax 调用，但前提是隐藏的<tr> 为空。最终，我计划获取这些数据并对其进行处理，但现在，我只需要让这个模拟手风琴作为桌子工作的东西。由于这个表是在我有其他 .hidden 元素的同一个 html 文件上制作的，我必须创建自定义类来隐藏这些特定的类。 detail-view 类使其可见，hidden-detail 类包含 display:none。我知道 postDetails 可以找到正确的数据。我更担心的是找出为什么FireFox的开发工具说statusRow和detPane在整个代码中被标记为(unavailable)，而statusRow.closest('tr').next('tr')实际上似乎包含detPane行，正如预期的那样。 jQuery 或选择器有问题吗？这是怎么回事？

function makeOrderTable(response, username, sesstoken) {
    $(jQuery.parseJSON(JSON.stringify(response))).each(function() {
        var foNum = this['Factory Order#'];
        var pO = this['PO#'];
        var status = this['Status'];
        var shipDate = this['Ship Date'];
        $('.orders tbody').append(
            '<tr class="status-row">'+
                '<td>' + foNum + '</td><td>' + pO  + '</td><td>' + status + '</td><td>' + shipDate + '</td>'+
            '</tr>'+
            '<tr class="detail-row hidden-detail">'+
                '<td colspan="4"></td>'+
            '</tr>'
        );
    });
    $(document).ready(function() {
        $('table').on('click', 'tr.status-row', function() {
            var statusRow = $(this);
            var detPane = $(statusRow[0]).closest('tr').next('tr');
            $('.detail-view').addClass('hidden-detail');
            $('.detail-view').removeClass('detail-view');
            detPane.addClass('detail-view');
            detPane.removeClass('hidden-detail');

            if (detPane.find('td').text == '')
            {
                var value = statusRow.find('td:first-child').text();
                postDetails(value, username, sesstoken, detPane.find('td'));
            }
        });
    });
}

【问题讨论】：

旁注：jQuery.parseJSON(JSON.stringify(response)) 是说取对象，将其转换为 json，然后将其转换回对象。你为什么这样做？
另外，如果您给$() 的值不是选择器或（数组）dom 元素，您应该使用$.each(array|object, function) 版本而不是$(selector|element|array of elements, function).each() 版本。参考。 api.jquery.com/jQuery.each
detPane.find('td').text 是错误的，text() 是一个方法，而不是一个属性
@Taplar idk，它就是这样工作的。它得到了东西，如果我将我的 ajax 调用移动到循环内，而不是点击，它一切都很好。但我需要点击那里。

标签： javascript jquery html onclick append

【解决方案1】：

问题在于，正如 epascarello 指出的那样，text 不是有效属性。因此，找不到任何东西。但是，我还需要单独获取详细信息 td ——即无法从其他事物访问事物，只能在整个地方使用菊花链选择器。所以，这是最终结果。

function makeOrderTable(response, username, sesstoken) {
    $(jQuery.parseJSON(JSON.stringify(response))).each(function() {
        var foNum = this['Factory Order#'];
        var pO = this['PO#'];
        var status = this['Status'];
        var shipDate = this['Ship Date'];
        $('.orders tbody').append(
            '<tr class="status-row">'+
                '<td>' + foNum + '</td><td>' + pO  + '</td><td>' + status + '</td><td>' + shipDate + '</td>'+
            '</tr>'+
            '<tr class="detail-row hidden-detail">'+
                '<td colspan="4"></td>'+
            '</tr>'
        );
    });
    $(document).ready(function() {
        $('table').on('click', 'tr.status-row', function() {
            var statusRow = $(this);
            var detRow = statusRow.closest('tr').next('tr');
            var details = this.nextElementSibling.querySelector('td');
            $('.detail-view').addClass('hidden-detail');
            $('.detail-view').removeClass('detail-view');
            detRow.addClass('detail-view');
            detRow.removeClass('hidden-detail');

            if (details.innerText == '')
            {
                var value = statusRow.find('td:first-child').text();
                postDetails(value, username, sesstoken, details);
            }
        });
    });
}

【讨论】：

【解决方案2】：

如果我正确理解了这个问题，我认为您的“隐藏”tr 选择器不正确。

您已将点击事件附加到tr，因此您不必执行.closest('tr')。只需var detPane = $(statusRow[0]).next('tr'); 就应该让您在点击的那个tr 之后为您提供下一个tr。

【讨论】：

仅供参考：最接近的首先检查自己