获取表格单元格内的文本高度

Question

我已经创建了一个这样的响应表：

$(document).ready(function() {
  adjustPadding();
});

$(window).resize(function() {
  adjustPadding();
});

function adjustPadding() {
  $("td:not(.table-generic-btn-container):not(.input-amount-row):not(.table-action)").each(function() {
    var text = $(this).text();
    var padding = parseInt(($(this).css("padding-top")).slice(0,-2));
    if (padding <= 8) {
      $(this).css({"padding-top": "8px"});
      $(this).css({"padding-bottom": "8px"});
    }
  });
}

.dashed-wrapper {
  padding-bottom: 48px; 
}

table.table-generic {
  border-spacing:0;
  border-collapse: collapse;
  font-size: 13px;
  display: block;
  overflow-x: scroll;
  color: #333;
  margin-left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  background-color: #fff;
}

.table-generic tr {
  
}

.table-generic tr.first-row {
  border-bottom: solid 2px #D1D1D1;
  cursor: default;
}

.table-generic tr.first-row:hover {
  background: #fff; 
}

.table-generic td, th {
  text-align: left;
  height: 40px;
  padding-left: 12px;
  padding-right: 12px;
}

.table-generic tr.selectable-row:hover {
  background-color: #f1f1f1; 
  transition: background-color 0.2s;
}

.table-generic th {
  font-weight: 700;
}

.alternate-bg {
  background-color: #f8f8f8; 
}

.selected-bg,
.selected-bg:hover {
  background-color: #D0F3FF !important;
  outline: solid 1px #fff !important;
  transition: background-color 0.2s;
}

.table-generic td.icon {
  text-align: center; 
  padding-left: 0;
}

i {
  font-size: 13px;
  color: #aaa;
  cursor: pointer;
}

.icon i:hover {
  color: #00c983;
}

.table-sort i {
  margin-left: 8px;
  display: inline;
}

.money {
  text-align: right !important; 
}

.history a {
  color: #0099ff;
  text-decoration: underline;
}

button {
  height: 32px;
  width: 48px;
  margin-right: 4px;
  border-radius: 3px;
  border: none;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
}

button i {
  color: #fff;
  line-height: 20px !important;
}

.green {
  background-color: #00c983;
}

.red {
  background-color: #FF7979;
}

.table-action {
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
}

th.table-action .checkbox {
  transform: translateX(-6px); 
}

.table-action input {
  opacity: 0;
  position: relative;
}

.checkbox {
  width: 16px;
  height: 16px;
  border: solid 1px #D1D1D1;
  border-radius: 2px;
  display: inline-block;
  margin-left: -32px;
  margin-top: 4px;
  cursor: pointer;
  transition: border 0.4s;
}

.checkbox-checked {
  border: solid 1px #00c983;
  margin-top: 2px;
  transition: border 0.4s;
}

.checkbox-input {
  cursor: pointer;
}

.checkbox i {
  color: #00c983;
  display: none;
}

.checkbox i:hover {
  color: #00c983;
}

.table-generic th:first-child,
.table-generic td:first-child {
  padding-left: 24px;
}

#table1 th:first-child,
#table1 td:first-child {
  padding-left: 40px;
  padding-right: 0;
}

.table-generic td:last-child {
  padding-right: 24px;
}

.table-action-last {
  padding-right: 16px;
  cursor: pointer;
  text-align: center;
}

th.table-action-last {
  cursor: default;
}

.table-sort {
  cursor: pointer; 
}

.table-pagination {
  width: 100%;
  display: block;
}

.table-pagination-btn i {
  color: #333; 
}

.table-pagination-btn {
  display: flex;
  float: right;
  height: 38px;
  border: solid 1px #D1D1D1;
  border-radius: 3px;
}

.table-pagination-btn-each {
  line-height: 38px; 
  width: 38px;
  display: inline-block;
  text-align: center;
  border-left: solid 1px #D1D1D1;
  font-size: 12px;
  cursor: pointer;
}

.table-pagination-btn-each:first-child {
  border-left: transparent; 
}

.table-pagination-btn-each:hover {
  background-color: #f8f8f8; 
  transition: background-color 0.2s;
}

.table-pagination-btn-each i {
  font-size: 8px; 
  transform: translateY(-1px);
}

.table-pagination-btn-each.selected-page {
  background-color: #00c983;
  font-weight: 700;
  color: #fff;
  cursor: default;
}

.pagination-disabled,
.pagination-disabled:hover {
  cursor: default;
  color: #aaa;
  background-color: #fff;
}

.pagination-disabled i {
  cursor: default;
  color: #aaa;
}

.table-generic td .yes-no {
  color: #333; 
  cursor: default;
}

.table-generic td .fa-minus {
  font-size: 8px; 
}

.yes-no-cell {
  text-align: center !important;
  padding-right: 32px !important;
  color: transparent;
}

.table-generic td .input-text {
  height: 30px; 
  margin-bottom: 0;
  width: 118px;
  background-color: #fff;
}

.input-amount {
  text-align: right; 
  padding-right: 28px !important;
}

.input-amount-row {
  position: relative;
}

.spinner-table {
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
}

.table-view-link {
  color: #0099ff; 
  font-weight: 700;
  text-decoration: none;
}

.table-view-link:hover {
  text-decoration: underline;
}

.spinner-up i,
.spinner-down i {
  color: #777;
}

.spinner-up i:hover,
.spinner-down i:hover {
  color: #00c983;
}

.spinner-down i {
  transform: translateY(-1px); 
}

a:hover {
  color: #006BB3;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.15);
}

.table-caption {
  margin-top: 24px; 
}

td .fa-check {
  margin-left: 1.5px; 
}

#table2 td {
  white-space: nowrap; 
}

.table-generic-btn-container {
  white-space: nowrap !important; 
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">

<div class="dashed-wrapper">

<table class="table-generic" id="table1" data-shrinked="0" data-expanded="0">
  <tr class="first-row">
    <th class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></th>
    <th class="table-action table-action-last">Edit</th>
    <th class="table-sort" id="req-no">Request No.<i class="fas fa-sort"></i></th> 
    <th class="table-sort" id="emp-id">Employee ID<i class="fas fa-sort"></i></th> 
    <th class="table-sort" id="emp-name">Employee Name<i class="fas fa-sort"></i></th>  
    <th class="table-sort" id="fam-member">For Family<i class="fas fa-sort"></i></th> 
    <th class="table-sort" id="req-date">Request Date<i class="fas fa-sort"></i></th> 
    <th>Editable Example</th> 
    <th>Total Amount</th> 
    <th>Details</th>
    <th>Approval History</th> 
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/TRA/04/005</td> 
    <td>EMP004</td>
    <td class="tall-content">I Putu Yudi Haryasa</td>
    <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td>
    <td>04 May 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">300,000.00</td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/MED/04/004</td>
    <td>EMP005</td>
    <td class="tall-content">Daniel Giovanni Gunawan</td>
    <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td>
    <td>04 May 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">550,000.00</td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/MED/04/003</td> 
    <td>EMP006</td>
    <td class="tall-content">Muhammad Nadzeri Munawar</td>
    <td class="yes-no-cell">1<i class="fas fa-check yes-no"></i></td>
    <td>03 May 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">4,500,000.00</td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/MED/03/002</td> 
    <td>EMP007</td>
    <td class="tall-content">Glenn Kristanto</td>
    <td class="yes-no-cell">1<i class="fas fa-check yes-no"></i></td>
    <td>02 May 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">3,000,000.00</td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/TRA/03/001</td> 
    <td>EMP008</td>
    <td class="tall-content">Hendryanto Fudiko</td>
    <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td>
    <td>02 May 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">150,000.00</td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/TRA/02/001</td> 
    <td>EMP004</td>
    <td class="tall-content">I Putu Yudi Haryasa</td>
    <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td>
    <td>28 Apr 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">300,000.00</td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/MED/01/005</td>
    <td>EMP021</td>
    <td class="tall-content">Daniel Widjaja</td>
    <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td>
    <td>25 Apr 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">550,000.00</td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/MED/01/004</td> 
    <td>EMP020</td>
    <td class="tall-content">Faris Kurniawan</td>
    <td class="yes-no-cell">1<i class="fas fa-check yes-no"></i></td>
    <td>25 Apr 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">4,500,000.00</td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/ENT/01/002</td> 
    <td>EMP015</td>
    <td class="tall-content">Romy Kusuma</td>
    <td class="yes-no-cell">1<i class="fas fa-check yes-no"></i></td>
    <td>11 Apr 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">3,000,000.00</td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
  <tr class="selectable-row">
    <td class="table-action checkbox-action"><input type="checkbox" class="checkbox-input" checked><span class="checkbox"><i class="fas fa-check"></i></span></td>
    <td class="icon table-action table-action-last"><i class="fas fa-pencil-alt"></i></td>
    <td>REI/ENT/01/001</td> 
    <td>EMP006</td>
    <td class="tall-content">Muhammad Nadzeri Munawar</td>
    <td class="yes-no-cell">0<i class="fas fa-minus yes-no"></i></td>
    <td>09 Apr 2018</td>
    <td class="input-amount-row">
      <input class="input-amount input-text input-with-spinner money-input" type="text" value="0.00">
      <a />
      <div class="spinner-group amount-spinner-group spinner-table">
        <a class="spinner-up"><i class="fas fa-caret-up"></i></a>
        <a class="spinner-down"><i class="fas fa-caret-down"></i></a>
      </div>
    </td>
    <td class="money">150,000.00</td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See details</a></td>
    <td class="table-generic-btn-container"><a class="button white-btn table-btn">See approvals</a></td>
  </tr>
</table>
  

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如您所见，表格内的文本可以超过一行。当一行中的所有文本都在一行中时，我想将行高固定为40px。但是，当一行中的任何文本多于一行时，我想将额外的padding-top和padding-bottom添加到8px。

我有一个想法来迭代所有单元格内容的高度，当我得到“高”（多于一行）文本时，我将填充设置为该值，以便该行内的所有单元格都遵循高度。但是，我的jquery尝试总是获得单元格的高度，即40px，而不是内部的内容。另外，我尝试获取所有单元格的padding-top，因为我可以看到一个行文本单元格和一个以上行文本单元格之间的填充高度差异。但是它总是结果为0。

任何帮助表示赞赏！ ：）

Answer 1

也许您没有发布所有代码...因为该表根本没有“响应”。

但是我让你遇到问题。实际上，您需要检测单元格内容何时包裹。
在表格单元格中这并不容易，因为该单元格的高度还取决于同一行中其他单元格的高度。

基于此other SO answer，我使用了附加到文档末尾的临时“ testDiv”，并​​在其上应用了单元格的宽度。然后，像其他答案所建议的那样，我逐个单词地追加内容，并检查testDiv的高度以进行更改。如果在添加单词时高度发生变化，则显然意味着发生了换行。

我只将此类添加到您的CSS中...没有进行其他更改。

.test{
  background-color:orange;
}

代码如下：

function adjustPadding() {

  // Create a test div and append it to the end of the document
  var testDiv = $("<div id='wrapTest'>");
  $("html").append($("<div id='wrapTest'>"));
  var testDiv = $("#wrapTest");

  // Loop the cells
  $("td:not(.table-generic-btn-container):not(.input-amount-row):not(.table-action)").each(function() {

    // Get the cell's content, splitted by the spaces
    var text = $(this).text().split(" ");
    // Get the cells width, including the padding
    var width = $(this).outerWidth();

    // If there's more than one word, test!
    if(text.length > 0){
      // Empty, set the width and add the first word
      testDiv.empty().css({"width":width}).append(text[0]);
      // Get the height
      var height = testDiv.height();

      // For each other words, compare the new height
      for(i=1;i<text.length;i++){
        testDiv.append(" "+text[i]);

        // If height increased, there's a wrap!
        if(testDiv.height() > height){
          $(this).addClass("test");

          // Do whatever you wish on those cells here!
          //$(this).css({"padding-top": "8px"});
          //$(this).css({"padding-bottom": "8px"});
        }
      }
    }  // End if length>0
  });  // End each

  // Remove the test div
  testDiv.remove();
}

正在CodePen上进行演示