2015-08-22 69 views
0

我试图简化下面的代码;我有一个填充了数据库数据的表。我需要没有价值的单元格被突出显示(背景颜色:黄色)。我有以下代码,但它似乎非常乏味:更改具有空值的单元格的背景颜色

if ($record["ADASentToClient"]==NULL) 
echo "<td style=background-color:#fee0e0><div class='TableHead' ><input type=text size=4 name=ADASentToClient value='$record[ADASentToClient]' /></div></td>"; 
else if ($record["ADASentToClient"]) 
echo "<td style=background-color:><div class='TableHead' ><input type=text size=4 name=ADASentToClient value='$record[ADASentToClient]' /></div></td>"; 

是否有任何JQuery的方法呢?我试着CSS

input[type="text"], textarea:empty { 
background-color : yellow; } 

但就是不随输入类型=文本

+0

我为您添加了一个简单的解决方案,严格CSS。其他答案有点过头,但无论你决定走哪条路都很酷。 – VIDesignz

回答

0

我认为这是接近你可能需要的正常工作。

<?php 
    $records = array(
     array('ADASentToClient' => null), 
     array('ADASentToClient' => 'foo'), 
     array('ADASentToClient' => 'bar'), 
    ); 
?> 
<html> 
<style> 
.yellow { 
    background-color: yellow; 
} 
</style> 
<body> 

<table> 
<tr> 
<?php foreach($records as $record) { ?> 
<td class="<?php if(!isset($record['ADASentToClient'])) { echo 'isNull'; } ?>"> 
    <div class="TableHead"> 
     <input type="text" size="4" name="ADASentToClient" value="<?php echo htmlspecialchars($record['ADASentToClient']); ?>" /> 
    </div> 
</td> 
<?php } ?> 
</tr> 
</table> 

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script> 
$(function(){ 
    $('.isNull').find('input[type="text"]').addClass('yellow'); 
}); 
</script> 
</body> 
</html> 
0

$(document).ready(function(){ 
 
    $('input[type="text"], textarea').each(highlightEmpty); 
 
    $('input[type="text"], textarea').on('keyup input',highlightEmpty); 
 
}) 
 
function highlightEmpty(){ 
 
    if($(this).val() == '') 
 
    $(this).addClass('highlight'); 
 
    else 
 
    $(this).removeClass('highlight'); 
 
}
.highlight{ 
 
    background-color : yellow; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<input type="text"/><input type="text"/><input type="text"/> 
 
<input type="text"/><input type="text"/><input type="text"/> 
 
<textarea></textarea><textarea></textarea> 
 
<textarea></textarea><textarea></textarea>

0

下面是CSS语法,你可以使用

https://jsfiddle.net/zLob82gm/

CSS

textarea:empty {background:yellow;} 
input[value=""] {background:yellow;} 

HTML

<textarea></textarea> 
<input type="text" value='' /> 
相关问题