Question

我需要在表格中显示表格行在查看时的高度。数据从数据库中提取。我无法设置高度值或最大高度。最后我需要知道每个tr执行的确切高度。

我从这里开始，不能让它工作。我也试过几种不同的方法。这是其中之一。

<table>

<tr id="tr1">
<td>contents</td>
<td>Heightdisplayed here<div id="rowheight1"></div></td>
</tr>

<tr id="tr2">
<td>contents</td>
<td>Heightdisplayed here<div id="rowheight2"></div></td>
</tr>

<tr id="tr3">
<td>contents</td>
<td>Heightdisplayed here<div id="rowheight3"></div></td>
</tr>

</table>


 <script>
function height1() {
        var txtRowHeight = showHeight( "row", $( "#tr2" ).height() );

        var result = parseFloat(txtRowHeight);
        if (!isNaN(result)) {
            document.getElementById('rowhieght2').height = result.toFixed(2);
           }
       }
</script>   

<body onload="height1();">

Answer 1

听起来像是在寻找像这样的东西

＆＃13;

$("tr").on("mouseover", function() {
    $(this).append($(this).height());
})
.on("mouseleave", function() {
    $(this).text($(this).text().replace(String($(this).height()), ''));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

＆＃13;

Answer 2

假设您并不完全依赖于jQuery的使用，以下是本机JavaScript中的一种方法：

// a named function to call to output the height(s):
function showHeights() {

  // the class-name of those elements that should
  // contain the height:
  var outputClass = 'rowheight',

    // finding those elements in the document with the
    // given class (this returns a collection):
    outputCells = document.querySelectorAll('.' + outputClass),

    // converting the collection into an Array (using
    // Function.prototype.call() to allow the use of
    // Array.prototype.slice() on the collection):
    cellArray = Array.prototype.slice.call(outputCells, 0);

  // iterating over the array of elements:
  cellArray.forEach(function(div, index, fullArray) {
    // div: the array element of the array over which we're iterating,
    // index: the index of that array element in the array,
    // fullArray: a copy of the array over which we're iterating.

    // setting the text of the <div> to the rendered height of the
    // closest <tr> ancestor to the <div>:
    div.textContent = window.getComputedStyle(div.closest('tr'), null).height;
  });
}

// calling the function ('showHeights()') when the 'DOMContentLoaded'
// event is fired:
window.addEventListener('DOMContentLoaded', showHeights);

function showHeights() {
  var outputClass = 'rowheight',
    outputCells = document.querySelectorAll('.' + outputClass),
    cellArray = Array.prototype.slice.call(outputCells, 0);

  cellArray.forEach(function(div, index, fullArray) {
    div.textContent = window.getComputedStyle(div.closest('tr'), null).height;
  });
}

window.addEventListener('DOMContentLoaded', showHeights);

table {
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
  padding: 0.2em 0.5em;
}

<table>

  <tr id="tr1">
    <td>contents</td>
    <td>Heightdisplayed here
      <div class="rowheight" id="rowheight1"></div>
    </td>
  </tr>

  <tr id="tr2">
    <td>contents</td>
    <td>Heightdisplayed here
      <div class="rowheight" id="rowheight2"></div>
    </td>
  </tr>

  <tr id="tr3">
    <td>contents</td>
    <td>Heightdisplayed here
      <div class="rowheight" id="rowheight3"></div>
    </td>
  </tr>

</table>

Answer 3

假设您正在使用jQuery，这将做您想做的事情：

    /**
     * Process the mouseenter event on a table row
     */
    function tr_mouseenterEventHandler(mouseenter) {

        /**
         * Local vars
         */
        var $tr = $(this),
            $heightUI = $('<span class="tr-height">' + $tr.height() + '</span>'),
            trPosition = $tr.position();

        /**
         * Append a span to the row
         */
        $tr.append($heightUI);

        /**
         * Position it next to the row, so the UI doesn't break. 
         * The ohter styles just dress it up a bit, and should probably
         * be handled via your stylesheet. 
         */
        $heightUI.css({
            'background': '#000',
            'border-radius': '3px',
            'box-shadow': '3px 3px 3px #aaa',
            'color': '#fff',
            'padding': '2px 3px',
            'position': 'absolute',
            'left': trPosition.left - 10,
            'top': trPosition.top - 3
        });

    }

    /**
     * Process the mouseleave event on a table row
     */
    function tr_mouseleaveEventHandler(mouseleave) {

        /**
         * Remove any exsisting height UI element
         */
        $(this).children('.tr-height').remove();

    }

    /**
     * Bind the events to the table. This will affect all tables in the
     * DOM, so you should probably update the selector to use a 
     * class or ID.
     */
    $('table')
        .on('mouseenter', 'tr', tr_mouseenterEventHandler)
        .on('mouseleave', 'tr', tr_mouseleaveEventHandler);

测量并显示TR高度

3 个答案: