1

我有一个用 div 构建的表。用户可以点击一个“生命体征表”，它会向下滑动其“详细信息表”。折叠时，jQuery 将详细信息表的显示属性设置为“无”。可见时，显示属性为“table”。

我需要能够确定其中一个详细信息表是否可见并将按钮的 ID 保存在该生命体征表中，这样，当我需要重新加载/重新填充表时，我可以在之后再次显示该详细信息表重新加载。

<div id="mainTable">
    <div class="recordRow">
        <div class="recordCell">
            <div class="vitalsTable">
                <div class="vitalsRow">
                    <div class="vitalsCell">
                        <label>some text</label>
                    </div>
                    <div class="vitalsCell">
                        <!-- button id is unique to identify the Record Row -->
                        <button id="btnViewEditRecord-4" value="Details" title="Click to View and Edit this Record">Details</button>
                    </div>
                </div>
            </div>
            <div class="detailsTable" style="display: table;">
                <div class="detailsRow">
                    <div class="detailsCell">
                        <label>some text</label>
                    </div>
                    <div class="detailsCell">
                        some text
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="recordRow">
        <div class="recordCell">
            <div class="vitalsTable">
                <div class="vitalsRow">
                    <div class="vitalsCell">
                        <label>some text</label>
                    </div>
                    <div class="vitalsCell">
                        <!-- button id is unique to identify the Record Row -->
                        <button id="btnViewEditRecord-5" value="Details" title="Click to View and Edit this Record">Details</button>
                    </div>
                </div>
            </div>
            <div class="detailsTable" style="display: none;">
                <div class="detailsRow">
                    <div class="detailsCell">
                        <label>some text</label>
                    </div>
                    <div class="detailsCell">
                        some text
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我试着做类似的事情

if ($('#peopleListTable').find('.personDetailsTable').prop('display') == 'table') {

但这没有用。

我怎样才能做到这一点？

更新 为了清楚起见，我正在改写我的问题。但是，上述信息仍然是相关的：

如何返回下一个 div 的 display 属性设置为 table 的按钮的 id？

4

1 回答 1

2

您可以为此使用 jQuery 的过滤器方法：

var buttonId = $('.detailsTable').filter(
  // only grab divs that have a display of table in their "style" declaration
  function () {
      return $(this).css('display') === 'table';
  })
  // look in the previous DIV for a button element, and grab it's ID
  .prev().find('button').attr('id');

JSFiddle

也就是说，我会考虑重组你的 html/重新思考你的方法，因为这高度依赖于你的 HTML 结构。正如评论中所指出的，使用类来识别您的元素，而不是依赖于内联样式，将是一种更好的方法。

于 2013-09-16T18:02:38.730 回答