更改具有空值的单元格的背景颜色 - Change background color for cells with Null Value

Change background color for cells with Null Value

本文关键字：单元格颜色背景空值 | 更新日期: 2023-09-27

我试图简化以下代码;我有一个表，其中填充了来自数据库的数据。我需要突出显示没有值的单元格(背景颜色:黄色)。我有下面的代码，但它似乎是非常繁琐的:

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; }

但是输入type=text

就不能正常工作了

我想这已经接近你可能需要的了。

<?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>

$(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>

下面是你可以使用的css语法

https://jsfiddle.net/zLob82gm/

CSS

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

HTML

<textarea></textarea>
<input type="text" value='' />