Question

我正在尝试简化以下代码;我有一个表填充了数据库中的数据。我需要突出显示没有值的单元格（背景颜色：黄色）。我有以下代码，但似乎非常繁琐：

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

但输入类型=文本

是不能正常工作

Answer 1

我认为这很接近你可能需要的东西。

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

Answer 2

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

Answer 3

以下是您可以使用的css语法

https://jsfiddle.net/zLob82gm/

CSS

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

HTML

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

更改具有Null值的单元格的背景颜色

3 个答案: