1

ここにコード：

 <script type="text/javascript">

   function ChangeColor1()
   {
    t1.style.backgroundColor = 'pink';
    t2.style.backgroundColor = '';
    t3.style.backgroundColor = '';

   }


    function ChangeColor2()
    {

    t1.style.backgroundColor = '';  
    t2.style.backgroundColor = 'pink';
    t3.style.backgroundColor = '';

    }


    function ChangeColor3()
    {

    t1.style.backgroundColor = '';
    t2.style.backgroundColor = '';
    t3.style.backgroundColor = 'pink';

        }
        </script>

        </head>
        <body>

        <table width="50%" border="1" >

        <tr id="t1" onclick="ChangeColor1();">
        <td>1</td>
        <td>2</td>
        <td>3</td>
        </tr>

        <tr id="t2" onclick="ChangeColor2();">
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>

     <tr id="t3" onclick="ChangeColor3();">
    <td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
    </table>
    </body>

このプログラムでは、3 つの関数が使用されています。1 つではなく、1 つの関数を使用してこのタスクを実行したいと考えています。

4

2 に答える 2

2 
function changeColor(n){
  t1.style.backgroundColor = n == 1 ? 'pink' : '';
  t2.style.backgroundColor = n == 2 ? 'pink' : '';
  t3.style.backgroundColor = n == 3 ? 'pink' : '';
}

... onclick="changeColor(1)" ...

それをリファクタリングする方法になります。または、さらに良いのは、thenreferenceの配列を作成することvar ts = [t1,t2,t3]ですts[n]。

var ts = [t1,t2,t3];
function changeColor(n){
  for (var i = 0; i < ts.length; i++){
    ts[i].style.backgroundColor = (i+1) == n ? 'pink' : '';
  }
}

または、IDを直接参照することもできます。

function changeColor(n){
  for (var i = 1; i < 4; i++){
    document.getElementById('t'+i).style.backgroundColor = n == i ? 'pink' : '';
  }
}

インデックスを引数として指定する代わりに、さらに一歩進んで行自体を参照することもできます（汎用性を維持します）。

function changeColor(t){
  for (var n = 1; n < 4; n++){
    var tn = document.getElementById('t'+n);
    tn.style.backgroundColor = tn.id == t.id ? 'pink' : '';
  }
}

... onclick="changeColor(this);" ...
于 2012-09-13T14:34:53.407 に答える
1

デモ

注：すべてのブラウザがdocument.getElementByIdなしでt1.styleを受け入れるわけではありません

function ChangeColor(row) {
  var idx=row.id;
  for (var i=1;i<=3;i++) {
    document.getElementById("t"+i).style.backgroundColor = (idx==="t"+i)?"pink":""; 
  }
}

を使用して

<tr id="t1" onclick="ChangeColor(this);">
<tr id="t2" onclick="ChangeColor(this);">
<tr id="t3" onclick="ChangeColor(this);">
于 2012-09-13T14:34:57.157 に答える