javascript - 脚本不遍历表格单元格

Question

我这样做的目的是通过将表格放置在另一个 div 中以及显示哪些单元格有文本、哪些单元格没有文本来减少表格内的文本量。这就是为什么 HTML 结构应该保持不变，除非由 jQuery 插入。

1. 加载页面时，td 标记内的所有内容都会包含在段落标记中。
2. 读取段落标签，如果没有文本，添加一个span标签来判断是否有引号。
3. 如果有报价，请在点击“查看报价”时出现的 div 内显示报价。

在步骤 2 中，它仅读取第一个单元格中是否有文本，而不读取其他单元格中是否有文本。如何正确地遍历单元格来完成此操作(不更改 HTML)？

$(document).ready(function() {

  var quote_cell = $("tbody td:nth-child(6)");
  var modal = $("#hidden_container");
  var modal_text = $("#hidden_container p");

  quote_cell.wrapInner("<p class='a_quote'></p>");
  if (quote_cell.text().trim() == "") {
    quote_cell.append("<span>No quote available</span>");
  } else {
    quote_cell.children().css('display', 'none')
    quote_cell.append("<span>View Quotes</span>");
  }

  quote_cell.click(function() {
    var author_quote = $(this).children(".a_quote").text();

    if (modal.css('display') == 'none') {
      modal_text.append("<p>" + author_quote + "</p>");
      modal.show()
    }
  });

  $(".close_quote").click(function() {
    modal.hide();
    modal_text.empty()
  });

});

body{
  font-size: 20px;
}

tbody > tr:nth-child(even) {
  background-color: #EEEEEE;
}

thead {
  background-color: #337AB7;
  color: #FFFFFF;
  border: 1px solid #797979;
}

td {
  padding: 0px 5px 0px 5px;
}

th {
  padding: 0px 10px 0px 10px;
}

#hidden_container {
  display: none;
  left: 50%;
  margin-left: -200px;
  position: absolute;
  z-index: 900;
  background-color: #EEEEEE;
  width: 400px;
  padding: 0px 15px 0px 15px;
}

#hidden_container > h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid;
  text-align: center;
}

.close_quote {
  background-color: #337AB7;
  color: white;
  text-align: center;
  float: right;
  width: 20px;
  height: 20px;
  margin: 5px 5px 5px 5px;
  border: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>First</td>
      <td>Last</td>
      <td>Gender</td>
      <td>Born</td>
      <td>Died</td>
      <td>Quotes</td>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>George</td>
      <td>Orwell</td>
      <td>Male</td>
      <td>Motihari</td>
      <td>London</td>
      <td>In a time of universal deceit - telling the truth is a revolutionary act.</td>
    </tr>

    <tr>
      <td>Charles</td>
      <td>Dickens</td>
      <td>Male</td>
      <td>Landport</td>
      <td>Higham</td>
      <td>It was the best of times, it was the worst of times.</td>
    </tr>

    <tr>
      <td>Austen</td>
      <td>Jane</td>
      <td>Female</td>
      <td>Steventon Rectory</td>
      <td>Winchester</td>
      <td></td>
     </tr>
  </tbody>
</table>

<div id="hidden_container">
  <button class="close_quote">X</button>
  <h4>Author Quote</h4>
  <p></p>
</div>

Answer 1

quote_cell 是一个数组，因此您需要将其包装在 each() block 中，否则文本值是累积的。

$(quote_cell).each(function() {
    var this = $(this);

    this.wrapInner("<p class='a_quote'></p>");

    if (this.text().trim() == "") {
        this.append("<span>No quote available</span>");
    } else {
        this.children().css('display', 'none')
        this.append("<span>View Quotes</span>");
    }

    ...
});