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

标签 jquery html css html-table

我创建了一个这样的响应表:

$(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。

感谢任何帮助! :)

最佳答案

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

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

基于此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 的工作演示

关于jquery - 获取表格单元格内的文本高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52059954/

上一篇：jquery - 固定页脚显示滚动条

下一篇：html - 为什么在列内使用 img 时跟随 Bootstrap 列会失败？

相关文章：

javascript - 使用 AngularJS 的动态 URL

javascript - 在 d3 中应用转换时出现错误

javascript - 当点击 sub li 时，点击功能被调用两次。我该如何解决？

javascript - 转换 css 单位

html - 转 Angular css 周围的文本，绝对位置和响应式

asp.net - 如何在 <h5> 标签之后继续内联任何标签

jquery - 100% 宽度的侧导航面板未展开

javascript - 删除 HTML 中的部分标记

html - 如何创建一个看起来像 Python 笔记本的网页？

html - 在两个 div 中均匀分布列出的元素

©2024 IT工具网  联系我们