我需要檢查 html 表中是否有任何內容為空/空，因為在頁面加載后它只返回並將其更改為<p> $0</p>

Question

表的例子

        <table class="tg">
            <thead>
                <tr>
                    <th class="tg-0lax" id="blank-spaces"></th>
                    <th class="titles" id="this">????</th>
                    <th class="titles">???<br></th>
                    <th class="titles">???</th>
                    <th class="titles">???</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                   <td></td>
                   <td>not empty do nothing</td>
                   <td></td>
                </tr>
            </tbody>
        <table>

現在這是真正編寫的方式，數據將從 API 推送到每個 td，有時 API 已關閉，我想使用 jquery 來檢查 td 是否顯示任何內容，如果沒有我想要的成為 td 中帶有錯誤消息的字符串。 這是我目前正在嘗試的 jquery

var empty = $("td").trim().filter(function () { return this.value.trim() === null })
empty.addClass("errorDefault");

if ($("td").hasClass("errorDefault")) {
    this.val("$0");
    this.text("$0");
    this.html("<p>There was an error getting data</p>");
}

Answer 1

• jQuery中沒有.trim()
• string trim() 不會返回 null。
• 表格單元格沒有價值
• $("td").hasClass("errorDefault") 只查看第一個元素

 $("tbody td").filter((_, td) =>.td.textContent.trim().length).addClass("errorDefault");text("$0");

 .errorDefault { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="tg"> <thead> <tr> <th class="tg-0lax" id="blank-spaces"></th> <th class="titles" id="this">????</th> <th class="titles">???<br></th> <th class="titles">???</th> <th class="titles">???</th> </tr> </thead> <tbody> <tr> <td></td> <td>not empty do nothing</td> <td></td> </tr> </tbody> <table>

如果真的是空的話，CSS就可以了。

 tbody td:empty{ background: red; } tbody td:empty:after { content: "$0"; }

 <table class="tg"> <thead> <tr> <th class="tg-0lax" id="blank-spaces"></th> <th class="titles" id="this">????</th> <th class="titles">???<br></th> <th class="titles">???</th> <th class="titles">???</th> </tr> </thead> <tbody> <tr> <td></td> <td>not empty do nothing</td> <td></td> </tr> </tbody> <table>