2

を使用してデータベース<table>から取り込まれた があります。は、レコードごとにデータベースに保存されます。ユーザーが を選択 ( ) または選択解除 ( )すると、の色が変わるように小さくしました。選択すると色が赤になるように設定していますが、選択を解除するとデフォルトの色に戻りたいです。mysqlphp<tr style="background-color:;">Javascriptonfocusonblur<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 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 に答える
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 に答える
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 に答える
0

CSS-Rule と 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 に答える