2

テーブル内の単一セルの背景色を変更するために JavaScript コードを使用したいと思います。

ページの背景色を変更できるコードを以下に示します。これは、私がやりたいことと概念が似ていますが、ページ全体ではなく、1 つのセルだけを変更できるようにしたいと考えています。

残りのセルの境界線と背景色を白にして、操作したいセルを透明のままにすることを考えましたが、これはおそらく力ずくの方法であり、後で問題を引き起こすと思います.

JavaScriptでこれを行うためのアドバイスはありますか?

ページの背景色を変更するコードは次のとおりです。

<form name="bgcolorForm">Try it now: 
<select onChange="if(this.selectedIndex!=0)
document.bgColor=this.options[this.selectedIndex].value">
<option value="choose">set background color    
<option value="FFFFCC">light yellow
<option value="CCFFFF">light blue
<option value="CCFFCC">light green
<option value="CCCCCC">gray
<option value="FFFFFF">white
</select></form>
4

4 に答える 4

0

このようなものをお探しですか？http://jsfiddle.net/2KdmA/ ただし、頻繁に操作する場合は、jQuery を使用することをお勧めします。

于 2012-08-28T03:24:08.420 に答える
0

document.getElementById('theID').style.backgroundColor ="#" + valueセルで: を使用するだけ です。

jQueryを使用していますか？それとも純粋なJSでなければなりませんか？

jQueryで使用できます$(selector).css("background-color", value);

于 2012-08-28T03:24:22.450 に答える
0

単一のセル (繰り返されない) のみの場合は、特定の ID を指定して、onchange イベントでそれをターゲットにすることができます。

たとえば、td id = "mycell" の場合

次に、選択の変更時に関数 updateColor を呼び出します

<select onChange="updateColor(this.options[this.selectedIndex].value);">

そしてここに関数があります

function updateColor(color){
    var myCell = document.getElementById('mycell');     
        myCell.style.background = "#"+color;

}

更新されたフィドルを参照してください

于 2012-08-28T03:25:05.147 に答える
0

セル座標でアクセスしたい場合は、次のようにすることができます

function cellColour(tableId, row, column, col){
    var t = document.getElementById(tableId);
    if(!t) throw '#'+tableId+' does not exist.';
    if(t.rows.length <= row)  throw 'Row '+row+' of #'+tableId+' does not exist.';
    t = t.rows[row];
    if(t.cells.length <= column)  throw 'Column '+column+' of row '+row+' of #'+tableId+' does not exist.';
    t = t.cells[column];
    t.style.backgroundColor = col;
}
于 2012-08-28T03:37:39.403 に答える