Question

这可能是一个愚蠢的问题，但我有一个jQuery数据表，我只是想确定内部数据行的高度。怎么能实现这一目标？

我试过了：

$('#myTable tr').eq(0).height();

但它返回null。我知道rowHeight对于这个表是自动的;如何以编程方式在此特定表中找到行的高度？我只需要获取此值，而不是更改它。

感谢。

编辑：正在显示的表格的HTML

<div class="dataTables_scroll">
  <div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
    <div class="dataTables_scrollHeadInner" style="width: 699px;">
      <table class="display dataTable" style="margin-left: 0px; width: 699px;">
        <thead>
          <tr role="row">
            <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1" style="width: 71px;"
            aria-label="Account #">
              <div class="DataTables_sort_wrapper">Account #</div>
            </th>
            <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1" style="width: 62px;" aria-label="CS_ID">
              <div class="DataTables_sort_wrapper">CS_ID</div>
            </th>
            <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1" style="width: 69px;"
            aria-label="Service Code">
              <div class="DataTables_sort_wrapper">Service Code</div>
            </th>
            <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1" style="width: 94px;"
            aria-label="Service Description">
              <div class="DataTables_sort_wrapper">Service Description</div>
            </th>
            <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1" style="width: 130px;"
            aria-label="STAT_EFF_DATE">
              <div class="DataTables_sort_wrapper">STAT_EFF_DATE</div>
            </th>
            <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1" style="width: 94px;"
            aria-label="Stat Description">
              <div class="DataTables_sort_wrapper">Stat Description</div>
            </th>
            <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1" style="width: 94px;"
            aria-label="Type Description">
              <div class="DataTables_sort_wrapper">Type Description</div>
            </th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
  <div class="dataTables_scrollBody" style="overflow: auto; width: 100%; height: 37px;">
    <table id="vdmPtPropServiceListTbl" class="display dataTable" style="margin-left: 0px; width: 699px;">
      <thead>
        <tr role="row" style="height: 0px;">
          <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1"
          style="width: 71px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"
          aria-label="Account #"></th>
          <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1"
          style="width: 62px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"
          aria-label="CS_ID"></th>
          <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1"
          style="width: 69px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"
          aria-label="Service Code"></th>
          <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1"
          style="width: 94px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"
          aria-label="Service Description"></th>
          <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1"
          style="width: 130px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"
          aria-label="STAT_EFF_DATE"></th>
          <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1"
          style="width: 94px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"
          aria-label="Stat Description"></th>
          <th class="ui-state-default Center" tabindex="0" rowspan="1" colspan="1"
          style="width: 94px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"
          aria-label="Type Description"></th>
        </tr>
      </thead>
      <tbody role="alert" aria-live="polite" aria-relevant="all">
        <tr class="odd">
          <td valign="top" colspan="7" class="dataTables_empty">No data available in table</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

以下是JSfiddle

的链接

 body {

      background:yellow;

  }
  .trclass {

      height:40px;

      font-weight:bold;

  }

<body>
    <button id="getw">Get table Height</button>
    <div>&nbsp;</div>
    <p>Sample paragraph to test height</p>
    <table id="myTable" border="1">
        <tr class="trclass">
            <td>row 1col 1</td>
            <td>row 1 col 2</td>
            <td>row 1 col 3</td>
        </tr>
        <tr style="height:40px">
            <td>row 2 col 1</td>
            <td>row 2 col 2</td>
            <td>row 2 col 3</td>
        </tr>
    </table>
</body>



 function showHeight(ele, h) {
      $("div").text("The height for the " + ele +
          " is " + h + "px.");
  }

  $("#getw").click(function () {
      showHeight("table", $('#myTable tr').eq(0).height());
  });

数据表中的行高

1 个答案: