2010-08-09 72 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是如何布局为铺设新线路的开通和关闭标签可能引入文本将子节点放入你认为是空单元的地方。打击这种基本的方式可以是定义我们自己的选择表达

(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简短而甜美。像Rhea Perlman一样。 – jessegavin 2010-08-09 18:45:13

+0

不错:)我没有意识到这种语法 – 2010-08-09 18:50:40

+0

非常感谢,你可以参考我的一些链接,我可以深入了解jQuery的更多信息(除了jquery.com和w3cschools) – 2010-08-09 19:10:35

0

试试这个

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

呵呵,你打我吧:) – 2010-08-09 18:48:07

+0

由于你所有的答案都很完美,Russ Cam的片段非常短,完成了工作。 谢谢大家的支持。 – 2010-08-09 19:06:25

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> 
相关问题