2

我有<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)并将其设置为全局变量将是答案，但我不知道该怎么做。显然，欢迎任何其他想法。干杯!

4

5 回答 5

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;
}
于 2013-01-09T06:51:49.137 回答
1

由于每一行都有不同的背景突出显示颜色，因此您应该将它们与标记一起作为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/

于 2013-01-09T06:53:46.280 回答
1

尝试编辑这个：

    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')

于 2013-01-09T06:59:03.317 回答
0

我会将 CSS 规则与 JS 结合起来。

在 CSS 中：

tr.activeRow {
  background: red !important;
}

这是 Javascript 部分：

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="";
}
于 2013-01-09T06:51:33.537 回答
0

您介意在每个 tr 中添加一个隐藏字段来存储数据库中的颜色吗？
此外，我只向函数发送了事件的 id，并在 javascript 中附加了带有 id 的“行”。

<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;
}
于 2013-01-09T07:09:31.753 回答