2010-08-09 5 views
2

Вот пример таблицыКак использовать JQuery для добавления статического контента в пустую ячейку

<table width="580" height="217" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="334">Website</td> 
    <td width="246">Category</td> 
    </tr> 
    <tr> 
    <td>http://www.google.com</td> 
    <td>Search Engine</td> 
    </tr> 
    <tr> 
    <td>http://www.gmail.com</td> 
    <td>Web Mail</td> 
    </tr> 
    <tr> 
    <td>http://www.xyz.com</td> 
    <td></td> 
    </tr> 
    <tr> 
    <td>http://www.amazon.com</td> 
    <td>Shopping</td> 
    </tr> 
    <tr> 
    <td>http://www.website.com</td> 
    <td></td> 
    </tr> 
</table> 

Две ячейки пусты в этой таблице, как я могу использовать JQuery, чтобы добавить «не найден» текст в этих пустых ячеек?

ответ

5
$('table td:empty').append('Not Found'); 

Demo here

Обратите внимание, что селектор :empty не означает детей, в том числе текстовых узлов, так что смотрит, как ваш HTML выложен, как раскладывать открытия и закрытие тег на новых линиях могут ввести текст дочерний узел в то, что вы считаете пустой ячейкой. Основной способ борьбы с этим можно было бы определить наше собственное выражение Selector

(function ($) { 

    $.extend($.expr[':'],{ 
     reallyEmpty: function(elem) { 
      return !elem.firstChild || 
       elem.firstChild.nodeType === 3 && !!/^\s|\n$/.test(elem.firstChild.textContent); 
     } 
    }); 

})(jQuery); 

, а затем использовать этот

$('td:reallyEmpty').append('Not Found'); 
+1

+1 Короткие и сладкие. Как Рея Перлман. – jessegavin

+0

nice :) Я не знал об этом синтаксисе –

+0

Большое спасибо, можете ли вы сослаться на некоторые ссылки, где я могу узнать больше о jQuery в глубину (кроме jquery.com и w3cschools) –

0

Попробуйте

$('td').each(function(){ 
    if($(this).html()=='') 
     $(this).html('not found'); 
    }); 
+0

Хе-хе, ты избил меня :) –

+0

Поскольку все ваши ответы работали отлично, фрагмент Russ Cam очень короткий и выполняет свою работу. Спасибо всем за вашу поддержку. –

2

Вот отрывок я соединял.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
<script type="text/javascript" > 

$(document).ready(function() { 

$('#tableid td').each(function() 
{ 
    if($(this).html() == "") { 
    $(this).html("Not Found"); 
    } 
}); 

}); 

</script> 
<table id="tableid" width="580" height="217" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="334">Website</td> 
    <td width="246">Category</td> 
    </tr> 
    <tr> 
    <td>http://www.google.com</td> 
    <td>Search Engine</td> 
    </tr> 
    <tr> 
    <td>http://www.gmail.com</td> 
    <td>Web Mail</td> 
    </tr> 
    <tr> 
    <td>http://www.xyz.com</td> 
    <td></td> 
    </tr> 
    <tr> 
    <td>http://www.amazon.com</td> 
    <td>Shopping</td> 
    </tr> 
    <tr> 
    <td>http://www.website.com</td> 
    <td ></td> 
    </tr> 
</table> 
Смежные вопросы