我想在使用javascript点击后更改背景颜色

I want to change background color after clicking using javascript

本文关键字：背景 颜色 javascript      更新时间：2023-09-26

以下是我的代码：

<table border="0" align="center" cellpadding="0" cellspacing="0" class="grid_table">
    <tr class="grid_caption"><td class="grid_caption">Customer Name</td></tr>
    <? if(count($arrResult) > 0) { ?>
        <? foreach($arrResult as $row) { ?>
        <tr class="grid_row"  ><td class="grid_row" onClick="javascript:return selectCustomer(this,<?=$row['customer_id']?>);"><?=HTMLVarConv($row['Name'])?></td></tr>
        <? } ?>
    <? } ?>
</table>

这是顾客名单但是当我点击这个客户名称时，它的背景颜色应该会改变。。这是我的javascript函数

function selectCustomer(row, id) {
    alert(row);
    var mark_color = '#fdf5d2' //'#c1c1ff'
    var current_row = '#aad4f0' //'#e8e8e8'
    if (row.style.backgroundColor == current_row) {
        row.style.backgroundColor = mark_color;
    }
    else if (row.style.backgroundColor == mark_color) {
        row.style.backgroundColor = current_row;
    }
    $("#editCustomer").attr("src","editcustomer.php?customer_id="+id+"&showmenu=0");
    $("#ajaxList").show();
    return;
}

但没有改变什么问题？？？？请帮我

既然标记了"jquery"，为什么不使用它来代替内联onclick处理程序呢？它可以简单到：http://jsfiddle.net/t7vj5/.

$("td.grid_row").click(function() {
    $(this).toggleClass("selected");
    $("#editCustomer").attr("src", "editcustomer.php");
    $("#ajaxList").show();
    return false;
});

和CSS：

td.grid_row {
    background-color: #fdf5d2;
}
td.grid_row.selected {
    background-color: #aad4f0;
}

只需确保在创建行之后执行JavaScript，或者将其封装在$(document).ready(function() { ... })中。

$('.grid_row').click(function(){
$('.grid_row').css("background-color","#aad4f0");
$(this).css("background-color","#fdf5d2");
});

edit：哦，你可以删除onclick=函数只要gridrow在那里，以上几行就足以满足你想要做的事情。

这将在单击时将颜色更改为#fdf5d2，并在单击另一行时将所有其他单元格的颜色更改回#aad4f0。如果您不希望颜色变回，请删除第一行

这个非常好：Css:：

.grid_row
{
    padding: 3px;
    border-right: 1px solid #849AAA;
    border-bottom: 1px solid #849AAA;
    vertical-align:top;
}
.evn
{
    padding: 3px;
    border-right: 1px solid #849AAA;
    border-bottom: 1px solid #849AAA;
    vertical-align:top;
    background-color: white;
    /*document.body.style.cursor = 'wait';*/
    cursor: pointer;
    }
.selevn
{
    padding: 3px;
    border-right: 1px solid #849AAA;
    border-bottom: 1px solid #849AAA;
    vertical-align:top;
    background-color: silver;
    cursor: pointer;
}

以下是我的Javascript代码：-

<script type="text/javascript">
var prevRow = null;
function selectCustomer(it,id) {
    if (it.className.substring(0, 3) == "sel")
    {
        it.className = it.className.substring(3, 6);
        prevRow = null;
    }
  else
    {
        it.className = "sel" + it.className;
        if (prevRow != null)
        {
           prevRow.className = prevRow.className.substring(3, 6);
        }
        prevRow = it;
    }
    $("#editCustomer").attr("src","editcustomer.php?customer_id="+id+"&showmenu=0");
    $("#ajaxList").show();
    return ;
}

这是我的代码：

<table border="0" align="center" cellpadding="0" cellspacing="0" class="grid_table">
        <tr class="grid_caption"><td class="grid_caption">Customer Name</td></tr>
        <? if(count($arrResult) > 0) { ?>
        <? foreach($arrResult as $row) { ?>
        <tr class="evn"  onClick="javascript:return selectCustomer(this,<?=$row['customer_id']?>);" ><td class="grid_row" id="<?= $row['customer_id']?>"  ><?=HTMLVarConv($row['Name'])?></td></tr>
        <? } ?>
        <? } ?>
        </table>
相关文章：