2

複数のテーブルの各行の色を交互に変更する JavaScript を作成しようとしています。問題は、一部のテーブルがまったく変更されないことです。したがって、このコードを使用してテーブルの行を取得しようとしています:

function alternateRows(myTable)
  var rows = document.getElementsByTagName("table").getElementsByClassName(myTable).getElementsByTagName("tr");

そして、HTML では:

<body onload="alternateRows('myTable')";>
  <table class="myTable">

id 属性を使用して JavaScript を次のように変更すると、問題なく動作するようになります。

var rows = document.getElementById(myTable).getElementsByTagName("tr");

どんな提案も素晴らしいでしょう。ありがとう！

4

4 に答える 4

2

getElementsByTagNameNodeListを返します。これが getElements ではなく getElements と呼ばれる理由です。NodeList に "getElementsByClassName" メソッドが定義されていません。これが表示されるエラーです。

ループを使用する必要があります。また、これには CSS セレクターを使用できることも知っておいてください。IE 8 以下を除く最新のブラウザーはすべてこれをサポートしています。

最新のブラウザー用の CSS (または ie9.js などのヘルパー ライブラリを含む IE8 )

table.mytable tr:nth-child(odd) {
    background-color: black;
}
table.mytable tr:nth-child(even) {
    background-color: white;
}
于 2013-03-22T08:23:29.207 に答える
2

DOM メソッドには次の 2 種類があります。

  1. 単一ノードへの参照を返すメソッド。たとえば、getElementByIdとquerySelector.

  2. ノードのリストを返すメソッド。たとえばgetElementsByTagName、、、。getElementsByClassName_querySelectorAll

ノードのリストを返すこれらのメソッドは通常、NodeList [MDN]オブジェクトを返しますが、これは非常に制限されたインターフェースを持っています。これでできることは、配列のようにリスト内の単一の要素にアクセスすることだけです。DOM ノード (または要素) と同じインターフェイスはありません。

リスト内の要素でさらに DOM メソッドまたは DOM プロパティを呼び出したい場合は、インデックスを使用して特定のノードに直接アクセスするか、リストを反復して各要素に対してそうすることができます。

var elements = document.getElementsByTagName('div');

for(var i = 0, l = elements.length; i < l; i++) {
    // do something with elements[i]
}

NodeLists は通常liveであることに注意してください。これは、DOM への変更 (要素の削除などdiv) がリストを自動的に更新することを意味します。

特定の状況では、オプションが必要です。

  1. querySelectorAllすべての行を選択するために使用します。

    var rows = document.querySelectorAll('table.' + myTable + '  tr');

  2. または、選択した要素を反復処理します。

    var rows = [];
var tables  = document.getElementsByTagName("table");
for (var i = 0, l = tables.length; i < l; i++) {
    // check whether it is a table with class in the variable `myTable`
    if ((' ' + tables[i].className + ' ').indexOf(' ' + myTable + ' ') > -1) {
        rows = rows.concat(tables[i].getElementsByTagName('tr'));
    }
}

    getElementsByClassNameタグ名で要素を選択してからそれらのクラスをテストする代わりに、直接使用することもできますが、 querySelectorAll.

于 2013-03-22T08:26:11.400 に答える
0

これを試して：

次のようにのみ使用できgetElementsByTagNameますgetElementsByClassName 。

var rows = document.getElementsByTagName("table")[0].getElementsByTagName("tr");

また

var rows = document.getElementsByClassName('myTable')[0].getElementsByTagName("tr");

または使用querySelectorAll

構文：

var matches = document.querySelectorAll("div.note, div.alert");

あなたの例では：

var rows = document.querySelectorAll("table."+myTable).getElementsByTagName("tr");

getElementsByTagName配列を与えるので、zero index Same forで使用する必要がありますgetElementsByClassName

https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName と https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassNameを読む

于 2013-03-22T08:24:43.350 に答える
0

すべてのテーブルを同じ方法で変更する必要がある場合は、次のコードを使用できます。

var tables = document.getElementByTagName("table");
for (var i in tables)
{
    var rows = tables[i].getElementByTagName("tr");
    //Alternating code here
}
于 2013-03-22T08:29:42.543 に答える