0

私は次のコードを持っています：

<script type = "text/javascript">
function showColors() {

var cells = getElementsbyClass("design");
for (var i = 0, len = cells.length; i < len; ++i) {
    cells[i].style.backgroundColor = "#ddd";
}

}

if(document.getElementsByClassName) {

getElementsByClass = function(classList, node) {    
    return (node || document).getElementsByClassName(classList);
  };


 </script>


<script type = "text/javascript">
window.onload = function() {

showColors();

  }
 </script>
table id="foo">
<tbody>
    <tr class = "design">
        <td>One</td><td>Two</td><td>Three</td>
    </tr>
    <tr class = "design">
        <td>One</td><td>Two</td><td>Three</td>
    </tr>
    <tr class = "design">
        <td>One</td><td>Two</td><td>Three</td>
    </tr>
</tbody>
 </table>
</body>

私の質問：getElementsbyClass（）を使用して、2行ごとに異なる色を設定するにはどうすればよいですか。ご覧のとおり、実際のコードは機能しません:(。JQueryやselectivizrは使用しないでください。例にとどまってください:)。動的な例が必要です。私はcssが機能することを知っています!!! また重要です：それはすべてのブラウザで動作するはずです!!

答えてくれてありがとう:)

4

4 に答える 4

0

これがお役に立てば幸いです。

LE。これの方が良い

<!DOCTYPE html>
<html>
<script type = "text/javascript">
    function showColors() {
        var cells = document.getElementsByClassName("design");
        for (var i = 0, len = cells.length; i < len; ++i) {
            if (i % 2 == 0)
            {
                cells[i].style.backgroundColor = "#ddd";
            }
            else
            {
                cells[i].style.backgroundColor = "#aaa";
            }
        }
    }
    if(document.getElementsByClassName) {
        getElementsByClass = function(classList, node) {    
            return (node || document).getElementsByClassName(classList);
        };
    };


window.onload = function(){
    showColors();
}
 </script>
<body>
    <table id="foo">
        <tbody>
            <tr class = "design">
                <td>One</td><td>Two</td><td>Three</td>
            </tr>
            <tr class = "design">
                <td>One</td><td>Two</td><td>Three</td>
            </tr>
            <tr class = "design">
                <td>One</td><td>Two</td><td>Three</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
于 2012-11-29T22:18:31.573 に答える
0

CSSを使用する：

.design:nth-child(even){ background-color:#ddd }
于 2012-11-29T22:08:05.010 に答える
0

ループが行う唯一のことは、背景色を変更することだけである場合、iそれを次のようにインクリメントするのではなく、毎回2を追加するだけ++です。

var cells = document.getElementsByClassName("design");
for (var i = 0, len = cells.length; i < len; i+=2) {
   cells[i].style.backgroundColor = "#ddd";
}

デモ： http： //jsfiddle.net/ytCZa/

ループがすべての行に対して他のことを行う必要がある場合iは、色を設定する前に、モジュロ演算子を使用してが2で割り切れるかどうかをテストします。

if (i % 2 === 0)
   cells[i].style.backgroundColor = "#ddd";

ただし、タイプミスがあることに注意してください。getElementsbyClass関数を呼び出すときは小文字の「b」でつづり、定義するときは大文字の「b」でつづりました。JSは大文字と小文字が区別されるため、機能しません。また、そのifステートメントにはその終了がありませんでした}。

上記のコードとデモでは、私はあなたのgetElementsByClass関数をまったく使用していません。それは何もしないことは何もgetElementsByClassNameしません、そしてそれは動作することに依存するgetElementsByClassNameので、あなたはそれを必要としません。とにかく何らかの理由で本当に必要な場合は、これが動作するようにコードを修正したデモです：http: //jsfiddle.net/ytCZa/1/

于 2012-11-29T22:14:32.207 に答える
0

tbody要素をフェッチし、TR要素をループして、次のように変更するクラスを追加しないのはなぜですか。

var i
  , current
  , rows = document.getElementById('table-body').getElementsByTagName('tr');

for(i = 0; i < rows.length; i++) {
  current = current !== 'class1' ? 'class1' : 'class2';
  rows[i].setAttribute('class', current);
}

</ p>

js-fiddleで実際の例を見ることができます：http：//jsfiddle.net/VF3Ay/3/

于 2012-11-29T22:26:52.090 に答える