0

私は。。をしようとしています

  • MySQL から 2 つの列を取得し、HTML テーブルに表示します
  • テーブル ヘッダーにある名前をクリックすると、すべての連絡先の色を変更したいと考えています。

私がやったこと-色を変更するためにidでjavascriptを呼び出しtableRowsますが、1行目の色のみを変更します。

<?php
  while($row_color_test = mysql_fetch_assoc($result_color_test))
  {
    ?>
      <tr id="tableRows">
        <td><?php echo $row_color_test['name'] ; ?></td>
        <td><?php echo $row_color_test['phone']; ?></td>
      </tr>
    <?php 
  }
    ?>

Javascript 関数

function changecolor()
    {
     document.getElementById("tableRows").style.color="red";
    }

すべての行がwhileループによって動的に作成されるため、すべてのhvが同じIDであるため、CSSルールsudがそれらに適用されますが、なぜそれが起こるのか考えてみてください。

または、それを行うためのより良い方法はありますか??私は Javascript のみを使用します

4

1 に答える 1

5

ただし、1行目の色のみを変更します。

右。tableRows idは行にあり、値はページ上で一意である必要があります。同じ を持つ複数の要素 (この場合は行) を持つことはできません。そうした場合、ほとんどのブラウザはページ上の後続の要素を無視するだけです。そのため、更新された要素は 1 つしか表示されません。ididid

代わりにa を使用できます。class

<tr class="tableRows" ...

...そして、ほとんどのブラウザでこれを行います:

var list = document.querySelectorAll(".tableRows");
var index;
for (index = 0; index < list.length; ++index) {
    ilst[index].style.color = "red";
}

ただし、テーブルにクラスを設定し、代わりに CSS ルールを使用して行を赤にする方がよいでしょう。

document.getElementById("id_of_the_table").className += " foo";

...このCSSで：

.foo tr {
    color: "red"
}
于 2013-07-05T11:14:18.100 に答える