作者laechan (揮淚斬馬雲)
看板Ajax
標題[心得] css不同用法在IE與chrome上的顯示差異
時間Sun Dec 9 18:47:07 2018
其實只是想閒聊而已，另外不曉得以前有沒有人提過。
假設以下 table:
<table border=2>
<tr><td>城市</td><td>區域</td><td>景點</td></tr>
<tr><td>京都</td><td>二條</td><td>二條城，大政奉還的地點。</td></tr>
<tr><td>京都</td><td>五條</td><td>清水寺，有著名的清水舞台。</td><tr>
<tr><td>大阪</td><td>新世界</td><td>通天閣，大阪的地標。</td></tr>
</table>
然後我在頁面寫了一個 filter 按鈕:
function filter_data()
{
fstr=document.getElementById("filter").value;
$("tr").each(function(){
tmp=$(this).text();
if(tmp.indexOf(fstr)>=0)
$(this).css("display","block");
else
$(this).css("display","none");
});
}
上面是很直覺的寫法，對每一行 tr 做 foreach，如果該行
有關鍵字(fstr)就顯示，沒這個關鍵字就隱藏。
我實測的結果，在 IE 上可以正常顯示，在 chrome 上面則
會顯示錯誤的排版，表格會有對不齊的情況。
後來把上面關鍵段改成底下就解決:
if(tmp.indexOf(fstr)>=0)
$(this).show();
else
$(this).hide();
再實測的結果，只對原本的 tr 每一列做 display=none，
它在 chrome 是會正常顯示的:
if(tmp.indexOf(fstr)>=0);
else
$(this).css("display","none");
但只要有用到 $(this).css("display","block"); 排版就
會不正常。
所以有在懷疑是不是 show() 跟 css("display","block")
存在著潛在差異。
--
『無窮的宇宙，無盡的時空，無限的可能，與無常的人生之間
的永恆矛盾，從倪匡這顆腦袋中編織出來。 』
──金庸評倪匡
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 122.117.106.224
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1544352434.A.7EA.html
1F：推 pkro12345: 那是因為display在表格中預設是table-row不是block， 12/09 19:54
2F：→ pkro12345: 如果你把block改成table-row應該就沒事了，另外那邏輯 12/09 19:55
3F：→ pkro12345: 有filter的不用理他，沒有的再設定css隱藏就好。 12/09 19:58
4F：→ pkro12345: 補充一下<tr>預設是table-row，<td>是table-cell之類的 12/09 19:59
5F：→ laechan: 因為我最初設計是讓使用者可變更關鍵字後再按一次搜尋 12/09 20:01
6F：→ laechan: 若用原本的寫法第一次搜尋後會成功,更改關鍵字後再搜就會 12/09 20:01
7F：→ laechan: 排版失敗,然後還去找如何只refresh表格的方法也都失敗哈 12/09 20:01
8F：→ laechan: 感謝,原來有table-row跟table-cell之類的屬性.. 12/09 20:02
9F：→ pkro12345: 你可以試試看將沒有fliter的元素添加一個class裡面為 12/09 20:04
10F：→ pkro12345: display:none;，之後每次重新搜尋先把全部的class清掉 12/09 20:05
11F：→ pkro12345: 再添加沒有filter的元素class一次。 12/09 20:06
目前在思考如何在每一個 <tr>...</tr> 裡頭自動加一個 td，
用來顯示序號。大抵上可能仍是使用 $("tr").each 來處理。
※ 編輯: laechan (122.117.106.224), 12/10/2018 23:32:26