脚本未遍历表单元格

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
});