Question

我的意图是通过将表格放在另一个div中来减少可能在表格内的文本数量，并且还通过显示哪些单元格有文本而哪些单元格没有。这就是为什么HTML结构应该保持不变，除非由jQuery插入。

当页面加载时，td标记内的任何内容都包含在段落标记中。
阅读段落标签，如果没有文字，请添加一个span标签，告知是否有报价。
如果有引号，则在单击“查看引号”时显示的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

@Component({ template: ` <label *ngFor="let cb of checkboxes"> <input type="checkbox" [(ngModel)]="cb.state">{{cb.label}} </label> <p><button [disabled]="buttonState()">button</button> ` }) class App { checkboxes = [{label: 'one'},{label: 'two'}]; constructor() {} buttonState() { return !this.checkboxes.some(_ => _.state); } }是一个数组，因此您需要将其包装在quote_cell块中，否则文本值是累积的。

each()

Answer 2

您必须使用循环来遍历所有 quote_cell 对象。

def make_html(self): 
    a = str(self.name) +'<br>' + str(self.phone)+'<br>'+ str(self.email)
    return a

脚本不迭代表格单元格

2 个答案: