：對TBODY標籤

空選擇如下表：：對TBODY標籤

<table id="incidents"> 
    <thead> 
     <tr> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

使用jQuery以下評價爲false：

$("#incidents tbody").is(":empty")

我想用CSS設置內容是一個消息：

#incidents tbody:empty { 
    content: "<tr>message foo</tr>"; 
}

可以將:empty選擇器應用於tbody嗎？

來源

2013-07-30 Darbio

不，不幸的是，壓痕和內tbody換行符防止它在這種情況下，以往匹配:empty。這適用於CSS和jQuery，其中據我所知:empty行爲相同，以及jQuery的:parent，這相當於:not(:empty)（與非常很差的名稱選擇）。另外，you cannot use CSS content to add elements to the DOM。您需要在jQuery或服務器端執行此操作：檢查tbody是否有任何行，如果沒有，請添加該行。如果你想使用:empty然後

var tbody = $("#incidents tbody"); 

if (tbody.children().length == 0) { 
    tbody.html("<tr>message foo</tr>"); 
}

來源

2013-07-30 05:46:35 BoltClock

「不，不幸的是，tbody中的縮進和換行符阻止它匹配。」謝謝，爲我節省了一些CSS調試時間。 – rstackhouse

在這種情況下，TBODY包含空格的內容，所以它不會工作

:empty

的：空僞類代表有沒有孩子所有的元素。只考慮元素節點和文本（包括空格）。註釋或處理指令不影響元素是否被認爲是空的。

另外的:content可以僅與:before或:after僞構件

內容CSS屬性用於與所使用的::之前和之後:: 僞元素中的一個元素生成內容。插入對象使用內容屬性是匿名替換的元素。

來源

2013-07-30 05:45:56

'：before'和'：after'不是僞類。它們是僞元素。它在報價中說得很對。 – BoltClock

@BoltClock對不起，它會糾正它 –

你需要給TBODY語法像爲：

如果你使用jQuery去，你可以使用這個

<tbody></tbody>

當你有定義：empty不會檢查它是否有新行。

按照我告訴過你的定義tbody。您還可以使用.html()來檢查條件：

if(!$("#incidents tbody").html()) {}

參考： How do I check if an HTML element is empty using jQuery?

來源

2013-07-30 05:47:07

使用

$("#incidents tbody").html()

，然後檢查你會得到什麼。

來源

2013-07-30 05:48:08

-1

檢查此：

<table id="incidents"> 
    <thead> 
     <tr> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
</table>

來源

2013-07-30 05:49:36

的<tbody>不是空的，因爲它包含空格。你必須使用過濾功能，以獲得周圍：

$("#incidents tbody").filter(function() { 
    return !$.trim($(this).text()); 
}).append('<tr>message foo</tr>');

或計數的兒童人數：

$("#incidents tbody").filter(function() { 
    return !$(this).children().length; 
}).append('<tr>message foo</tr>');

來源

2013-07-30 05:50:02 Blender

FYI：您可以使用下面的jQuery選擇器選擇與表空的tbody不依賴於表元素的ID：

$("table:not(:has(>tbody>tr))")

來源

2014-01-09 14:41:54

回答

相關問題