腳本未遍歷表單元格

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()塊中，否則文本值是累積的。

$(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>");
    }

    ...
});

Answer 2

您必須使用循環來遍歷所有quote_cell對象。

$(quote_cell).each(function() {
    // your code
});