Javascript 如果跨度标签包含文本，如何查明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11028650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to chk if span tag contain text or not
提问by Nikhil D
see fiddleif patient has time slot alloted already then make color yellow using jquery(client side). in my fiddle if i allot time slot first time then color is green and at the same time when allot next time slot then previous time slot is grey. i have to make it yellow. for that i have to find span tag in table and check wheather contains text or not if contains text then make it yellow.But i m new in jquery.i search lot but not getting. how can i do that.
如果患者已经分配了时间段，请参阅小提琴，然后使用 jquery（客户端）将颜色设为黄色。在我的小提琴中，如果我第一次分配时隙，则颜色为绿色，同时分配下一个时隙时，前一个时隙为灰色。我必须让它变黄。为此，我必须在表中找到 span 标签，并检查是否包含文本，如果包含文本，则将其设为黄色。但我在 jquery.i 中是新的。我怎样才能做到这一点。
//This is button click code
//这是按钮点击代码
$("#<%=btnSelect.ClientID%>").click(function () {
var cells = $('#tableAppointment tbody tr td:nth-child(3)');
var i = 0;
var topcell = false;
cells.each(function ()
{
var $cell = $(this);
if ($cell.hasClass('csstdhighlight'))
{
if (i == 0)
{
$cell.find('span').text(jQuery('#<%=txtPatientName.ClientID%>').val());
topcell = $cell;
}
else
{
$cell.remove();
}
i++;
}
});
if (topcell && i > 1) topcell.attr('rowspan', i);
$("#tableAppointment tr").each(function ()
{
$('td', this).each(function ()
{
var value = $(this).find("span").val();
if (!value)//i m chking like this
{
}
else
{ //make it yellow
}
})
})
return false;
});
});
采纳答案by Kennyan
Instead of this
而不是这个
var value = $(this).find("span").val();
write
写
var value = $(this).find("span").text();
and if you want to check html inside span then use
如果你想检查跨度内的html然后使用
var value = $(this).find("span").html();
UPDATE :-
更新 ：-
<html><head>
<style>.yell{background:#CCFF00;}.csstd
{
background-color: #ccffcc;
}
table{
background-color: #cccccc;
}</style><script src="jquery.js"></script>
<script>var is=false;
$(function(){
$(document).mouseup(function(){is=false;});
$(".csstablelisttd").mousedown(function(e){sen=$(this);
$(".csstd").removeClass("csstd");
$(this).children(":not(:first)").addClass("csstd");
xco=e.clientX;
yco=e.clientY;
is=true;
return false;
});
document.onmousemove=function(){return false;};
$(".csstablelisttd").mouseenter(function(){
if(is){
$(this).children(":not(:first)").addClass("csstd");
if($(".csstd").length>=6){is=false;}
}
});
$("#update").click(function(){
if($("#names").val())
{
$(".csstd").next().hide();
$(".csstd:first").next().show().attr("rowspan",$(".csstd").length/2).children().html($("#names").val());
$(".csstd").removeClass("csstd").addClass("yell");
}
});
});</script></head><body>
<table id="tableAppointment" cellspacing="1" width="50%" border="1" align="center">
<thead>
<tr class="csstablelisttd">
<td bgcolor="#ffffff">
</td>
<td >
</td>
<td class="csstablelisttd patientName">
<b>Patient Name</b>
</td>
</tr>
</thead>
<tbody>
<tr class="csstablelisttd">
<td valign="top" width="70px">
8:00AM
</td>
<td >
0
</td>
<td >
<span></span>
</td>
</tr>
<tr class="csstablelisttd">
<td >
</td>
<td >
15
</td>
<td >
<span></span>
</td>
</tr>
<tr class="csstablelisttd">
<td >
</td>
<td >
30
</td>
<td >
<span></span>
</td>
</tr>
<tr class="csstablelisttd">
<td >
</td>
<td >
45
</td>
<td >
<span></span>
</td>
</tr>
<tr class="csstablelisttd">
<td valign="top" width="90px">
9:00AM
</td>
<td >
0
</td>
<td >
<span></span>
</td>
</tr>
<tr class="csstablelisttd">
<td >
</td>
<td >
15
</td>
<td >
<span></span>
</td>
</tr>
<tr class="csstablelisttd">
<td >
</td>
<td >
30
</td>
<td >
<span></span>
</td>
</tr>
<tr class="csstablelisttd">
<td >
</td>
<td >
45
</td>
<td >
<span></span>
</td>
</tr>
</tbody>
</table>
<input type="text" id="names" />
<input type="button" id="update" value="update" /> </body></html>
回答by Dipak
if($('span').text().length == 0){
console.log('No Text');
}
else{
console.log('Has Text');
}
回答by Kennyan
Use $(this).find("span").text()instead. Check if the returned string is empty.
使用$(this).find("span").text()来代替。检查返回的字符串是否为空。
回答by void
Is that what you want?
那是你要的吗？
See demo: http://jsfiddle.net/FDEep/3/
见演示：http: //jsfiddle.net/FDEep/3/
$('input').click(function(){
// All <span> inside <td>
$('td span').each(function(index){
// Check if 'span' is empty
if( $(this).text().length !== 0 ){
// Change the bg color of the 'span' not empty
$(this).parent().css('background-color', 'yellow');
// When a span with some value is found, alert the index of the row
alert( $(this).closest('tr')[0].rowIndex);
}
});
});
Adapt at your will
随心所欲地适应
