使用jQuery遍歷並刪除空的HTML錶行

我正在嘗試使用jQuery遍歷HTML表並刪除空行。該頁面由ASP.NET驅動，並具有一定權限，表格中的項目將被隱藏。因此，我想創建此腳本以刪除空行並擺脫仍顯示的其他項目之間的空間。我似乎無法得到我目前必須運行的內容，但我不確定爲什麼。這裏是代碼：使用jQuery遍歷並刪除空的HTML錶行

<script src="http://code.jquery.com/jquery-1.5.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('tr').each(function() { 
      $(this).find('td').each(function() { 
       if ($(this).text().trim() == "") { 
        $(this).closest("tr").remove(); 
       }; 
      }); 
     }); 
    }); 
</script>

任何指導將不勝感激。謝謝！

來源

2011-03-31 StephenDebs

這是不是可以更容易處理服務器端？ – 2011-03-31 15:01:59

處理此服務器端取決於表格的呈現方式。如果表格是動態生成的，那麼修改代碼就不會「發出」不需要的HTML。如果使用數據綁定控件生成表，則可能需要修改數據源。如果表格是頁面中的靜態HTML，那麼您可能會被困在客戶端解決方案中。 – 2011-03-31 16:05:00

該表格是靜態HTML，page_load事件決定了鏈接填充表格的方式......我知道這是一種執行特權導航的不好方法，但我現在仍然堅持使用它。 – StephenDebs 2011-03-31 16:11:16

你的代碼似乎工作得很好。嘗試運行自身以下，看看我的意思是：

<html> 
<head> 
    <title>jQuery Tests</title> 

    <script src="http://code.jquery.com/jquery-1.5.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('tr').each(function() { 
       $(this).find('td').each(function() { 
        if ($(this).text().trim() == "") { 
         $(this).closest("tr").remove(); 
        }; 
       }); 
      }); 
     }); 
    </script> 

</head> 
<body> 
    <table cellpadding="0" cellspacing="0" border="1"> 
     <tr> 
      <td></td> 
      <td>testing</td> 
     </tr> 
     <tr> 
      <td>testing</td> 
      <td>testing</td> 
     </tr> 
     <tr> 
      <td>testing</td> 
      <td> </td> 
     </tr> 
    </table> 
</body>

莫不是在頁面上別的東西，可能是衝突的？

來源

2011-03-31 15:07:59

在問題中，OP提到「並且在獲得某些許可的情況下，表格中的項目將被隱藏」。我想知道這些細胞是不是真的是空的，而是用display：none或者類似的東西來設計。 – 2011-03-31 15:52:22

存在隱藏ASP超鏈接的頁面加載事件。作爲回報，ASPX頁面生成一個空白單元格。「」 – StephenDebs 2011-03-31 16:01:50

出於好奇，是什麼瀏覽器，你測試此頁面？我只注意到這段代碼似乎在IE中失敗，但在FireFox中工作正常。在玩過一段時間後，IE看起來像在你的條件下的trim（）函數有問題。嘗試更改條件使用以下代替︰$ .trim（$（this）.text（）） – 2011-03-31 17:38:14

我覺得這是更好地使用「.parent（）」方法，因爲‘TR’的標籤始終是從‘TD’標籤下一個父。

來源

2011-03-31 15:05:01 reporter

試試這個：

var td = $(this).find('td:empty'); 
if (td.length > 0) $(this).remove();

http://api.jquery.com/empty-selector/

這就是說，你真的想這樣做在服務器端。它會在客戶端看起來很醜陋，因爲在文檔就緒事件被觸發之前，你的空行會產生混亂。

來源

2011-03-31 15:06:05

我喜歡這個縮短的答案，但是當我運行它時，它仍然不會刪除我的測試頁上按鈕之間的空間。我只有一個帶兩個按鈕的桌子，一個在頂部，一個在底部，兩個按鈕之間有很多空白行。我在本地運行它，這是一個問題嗎？ – StephenDebs 2011-03-31 15:57:22

我認爲這個答案可以縮短爲1行$（'table'）。find（'tr：empty'）。remove（）; – 2013-03-14 16:58:28

導致問題的情況下，我們只有TD空，所有其他TD被填充

我修改代碼，在審議使這個

<script type="text/javascript"> 
     $(document).ready(function() { 

      $('tr').each(function() { 
       var totalTDs = $(this).find('td').length; 
       var emptyTDS = 0; 

       $(this).find('td').each(function() { 
        if ($(this).text().trim() == "") { 
         emptyTDS += 1; 
        }; 
       }); 

       if (emptyTDS == totalTDs) { 
        $(this).remove(); 
       } 
      }); 
     }); 
    </script>

來源

2013-04-03 10:18:54

非常感謝_I知道這是一箇舊帖子，但這是一個很大的節省時間！_ – 2017-03-17 10:01:07

使用jQuery遍歷並刪除空的HTML錶行

回答

相關問題