Question

我使用<table>从mysql数据库填充了php。 <tr style="background-color:;">存储在每个记录的数据库中。我做了一个小Javascript，以便当用户选择{onfocus）或取消选择onblur）<input>时，<tr>会改变颜色。我设置了它，所以选择后颜色会变成红色，但是我希望它在取消选择后返回默认颜色。

以下是我的代码片段，位于while()循环中，其中$i递增：

<tr id="row$i">
<td><input type="text" onfocus="attON('row$i')" onblur="attOFF('row$i')"></td>
</tr>

以下是我的功能：

function attON(id)
    {
    var row = document.getElementById(id);
    row.style.backgroundColor = "#FF0000";
    }

function attOFF(id)
    {
    var row = document.getElementById(id);
    row.style.backgroundColor = "";
    }

我确信您会猜到，backgroundColor不会更改回默认值，而是更改为<table>颜色。我想可能在function attON(id)中捕获默认颜色并将其设置为全局变量将是答案，但我不知道如何做到这一点。显然任何其他想法都是受欢迎的。干杯!

Answer 1

function attON(id)
{
    var row = document.getElementById(id);
    if(!row.getAttribute('data-originalColor')){
        var originalColor = row.style.backgroundColor;
        row.setAttribute('data-originalColor', originalColor);
    }
    row.style.backgroundColor = "#FF0000";
}

function attOFF(id)
{
    var row = document.getElementById(id);
    var originalColor = row.getAttribute('data-originalColor');
    row.style.backgroundColor = originalColor;
}

Answer 2

由于每行有不同的背景突出显示颜色，因此应将这些颜色与标记一起输出为data-属性。此外，使用this代替添加具有不同i值的函数：

<tr id="row$i">
    <td><input type="text" onfocus="attON(this);" onblur="attOFF(this);" data-color="$color"></td>
</tr>

您的职能将是：

function attON(el) {
    el.parentElement.parentElement.style.backgroundColor = el.getAttribute('data-color');
}

function attOFF(el) {
    el.parentElement.parentElement.style.backgroundColor = "";
}

以下是演示：http://jsfiddle.net/yCNft/

Answer 3

尝试编辑：

    function attOFF(id)
    {
        var row = document.getElementById(id);
        row.style.backgroundColor = "";
    }

对此：

    function attOFF(id,realcolor)
    {
        var row = document.getElementById(id);
        row.style.backgroundColor = realcolor;
    }

然后将attOFF('row$i')更改为attOFF('row$i','put here the PHP code to show the real color of the tr tag')

Answer 4

我会用JS组合CSS规则。

在CSS中：

tr.activeRow {
  background: red !important;
}

这是Javascript PART：

function attON(rowID) {
  // to be sure that there is always just on active row...
  var activeRows = document.getElementsByClassName('activeRow');
  for(a in activeRows) {
    activeRows[a].className = '';
  }
  // set classname to override the inline style
  document.getElementById(rowID).className="activeRow";
}

function attOFF(rowID) {
  // jus remove the classname
  document.getElementById(rowID).className="";
}

Answer 5

你介意在每个tr中添加一个隐藏字段，用于存储数据库中的颜色此外，我只在事件上发送了id到函数，并在javascript中添加了带有id的“row”。

<tr id="row$i">
    <td>
        <input type="text" onfocus="attON('$i')" onblur="attOFF('$i')">
        <input type="hidden" value="color from database" name="$iHC" id="$iHC">
    </td>
</tr>

Javascript功能：

function attON(id){
    var row = document.getElementById("row"+id);
    row.style.backgroundColor = "#FF0000";
}

function attOFF(id){
    var row = document.getElementById("row"+id);

    //fetch the value from HTML element and assign it to a javascript variable
    //remember to append "#" to value of color if you have not stored in database
    var color = document.getElementById(id+"HC").value();
    row.style.backgroundColor = color;
}

如何更改颜色的背景颜色，然后使用JavaScript将其恢复为默认颜色？

5 个答案: