0

私の質問は、テーブルの行をストライピングできるようにタグをループするにはどうすればよいですか? 注意: ソリューションが stripRows() 関数にある場合は、抽象化する必要があります (タグ名、クラス名などへの参照はありません)。この関数は、JavaScript コードを見れば明らかだと思うテーブルの行をストライプ化します。

ほとんど完了していますが (私はそう思います)、ファイルの 1 つの側面に問題があります。ソリューションは、HTML や CSS を編集したり、jQuery や innerHTML を編集したりせずに抽象化して解決する必要があります。

stripMeTable() 関数と webcoursesTable() 関数、または stripRows(tableID,odd,even,over) 関数で行をループする必要がありますか?

以下に HTML と JavaScript を含めます。

両方の HTML ページを操作するには、JavaScript ファイルが必要です。

OK、これがコードです。助けてくれてありがとう。

HTML コード (ページ 1):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Striped Tables</title>
<link rel="stylesheet" type="text/css" href="striped-tables.css" />
<script type="text/javascript" src="striped-tables.js"></script>
</head>

<body>
<h1>Striped Tables</h1>
<table id="stripeme">
  <tr>
    <th>Food</th>
    <th>Rating</th>
  </tr>
  <tr class="lines">
    <td>Chocolate</td>
    <td>delicious</td>
  </tr>
  <tr>
    <td>Shrimp</td>
    <td>delicious</td>
  </tr>
  <tr class="lines">
    <td>Brussel sprouts</td>
    <td>vile</td>
  </tr>
  <tr>
    <td>Raspberry</td>
    <td>delicious</td>
  </tr>
  <tr class="lines">
    <td>Tofu</td>
    <td>not even a real food</td>
  </tr>
  <tr>
    <td>Pizza</td>
    <td>delicious</td>
  </tr>
  <tr class="lines">
    <td>Honey</td>
    <td>never spoils</td>
  </tr>
</table>
</body>
</html>

HTML (ページ 2):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Is your script abstracted?</title>
<link rel="stylesheet" type="text/css" href="abstraction.css" />
<script type="text/javascript" src="striped-tables.js"></script>
</head>

<body>
<h1>Another Striped Table</h1>
<table id="webcourses">
  <tr>
    <th>Course number</th>
    <th>Course content</th>
  </tr>
  <tr class="core_course">
    <td>WEB-140</td>
    <td>design principles</td>
  </tr>
  <tr class="core_course">
    <td>WEB-115</td>
    <td>XHTML and beginning CSS</td>
  </tr>
  <tr class="core_course">
    <td>WEB-210</td>
    <td>advanced CSS</td>
  </tr>
  <tr>
    <td>WEB-215</td>
    <td>JavaScript</td>
  </tr>
  <tr>
    <td>WEB-182</td>
    <td>PHP</td>
  </tr>
  <tr>
    <td>WEB-250</td>
    <td>integration of MySQL and PHP</td>
  </tr>
</table>
</body>
</html>

JavaScript ファイル:

addLoadEvent(stripemeTable);
addLoadEvent(webcoursesTable);

function stripemeTable() {
    // get the <tr> tags:
    var stripemeRows = document.getElementsByTagName('tr');

    // IF the tableID is NOT stripeme, exit the stripemeTable function:
    if (!document.getElementById || !document.getElementsByTagName || !document.getElementById('stripeme'))  {
        return false;
    // ELSE loop through the rows and use the stripeRows function:  
    } else {
        for (var i = 0; i < stripemeRows.length; i++) {
            stripeRows('stripeme','pri-stripe','sec-stripe','over-stripe');
        } // end of the rows FOR loop 
    } // end of the tableID test IF/ELSE
} // end of the stripemeTable function

function webcoursesTable() {
    // get the <tr> tags
    var webcoursesRows = document.getElementsByTagName('tr');

    // IF the tableID is NOT webcourses, exit the  webcoursesTable function:
    if (!document.getElementById || !document.getElementsByTagName || !document.getElementById('webcourses'))  {  
        return false;   
    // ELSE loop through the rows and use the stripeRows function:  
    } else {
        for (var i = 0; i < webcoursesRows.length; i++) {
            stripeRows('stripeme','pri-stripe','sec-stripe','over-stripe');
        } // end of the rows FOR loop 
    } // end of the tableID test IF/ELSE
} // end of the webcoursesTable function

function stripeRows(tableID,odd,even,over) {
    // get a table with a tableID
    var table = document.getElementById(tableID);

    // loop through the table rows:
    for (var i = 0; i < rows.length; i++) {
        // get the current className of the table rows:
        var oldClassName = rows[i].className;

        // append the even className to the oldClassName:
        var even = rows[i].oldClassName;
        even += " " + even;

        // append the over className to the oldClassName:
        var over = rows[i].oldClassName;
        over += " " + over;

        // IF the table row is the first row, do not stripe that row:
        if (rows[0]) {
            addClass(rows[0],oldClassName);
        // ELSE IF the table rows are odd, stripe the rows with the odd class:
        } else if (rows[i]/2 != 0 && !rows[0]) {  
            addClass(rows[i],odd);
        // ELSE the table rows are even, stripe the rows with the even class:
        } else {  
            addClass(rows[i],even);
        } // end of the first/even/odd rows IF

        // handle the onmouseover event for the table rows:
        mouseOver = rows[i].onmouseover;
        mouseOver = function() {
            addClass(rows[i],over);
        } // end of the onmouseover anonymous function

        // handle the onmouseout event for the table rows:
        mouseOut = rows[i].onmouseout;
        mouseOut = function() {
            addClass(rows[i],oldClassName);
        } // end of the onmouseout anonymous function
    } // end of the table rows FOR loop 
} // end of the stripeRows function 

function addClass(element,theClass) {
    // IF the table row does not have a className, append the required className:
    if (!element.className) {
        element.className = theClass;
    // ELSE append the required className to the className(s) that are already assigned to that row:
    } else {
        var newClassName = element.className;
        newClassName += " ";
        newClassName += theClass;
        element.className = newClassName;
    } // end of the className IF/ELSE  
} // end of the addClass function

function addLoadEvent(func) {
    // assign the window.onload function to a variable:
    var oldonload = window.onload;

    // IF the window.onload does not call a function:
    if (typeof window.onload != 'function') {
        window.onload = func;
    // ELSE set the window.load:
    } else {
        window.onload = function() {
            oldonload();
            func();
        } // end of the oldonload anonymous function
    } // end of the typeof IF
} // end of the addLoadEvent function

私が問題だと思う行（覚えておいてください、関数はそのままにしておく必要があり、stripeRows（）関数でタグ名を参照することはできません）。問題は次のとおりです。stripeRows() 関数で一般的な抽象化された方法で行をループする方法:

function stripeRows(tableID,odd,even,over) {
    // get a table with a tableID
    var table = document.getElementById(tableID);

    // get the table rows:
    var rows = tableID.rows;

    // loop through the table rows:
    for (var i = 0; i < rows.length; i++) {
4

3 に答える 3

0

@Jason-McCoy、完全な制限を知らなくても、これはすべての要件を満たしていると思います。最初の行は ( i0 ではなく 1 に初期化することによって) 削除されず、stripeRows 関数は (渡された要素を参照することによって) 実際の選択を行いません。これでストライピングが機能するようになりますが、onmouseoverコードをよく見てください。まだバグがあります。

addLoadEvent(stripeme);

function stripeme() {
    if (!document.getElementById || !document.getElementsByTagName )
    { return false; }

    // IF the tableID is NOT webcourses, exit the  webcoursesTable function:
    if ( !document.getElementById('webcourses') && !document.getElementById('stripeme'))
    { return false; }

    // get the <tr> tags:
    var rows = document.getElementsByTagName('tr');

    for (var i=1; i < rows.length; i++) {
        stripeRows(rows[i],(i%2==0)?'pri-stripe':'sec-stripe','over-stripe');
    } // end of the rows FOR loop 
} // end of the stripemeTable function

function stripeRows(row,rowClass,over) {
    addClass(row,rowClass);

    // get the current className of the table rows:
    var oldClassName = row.className;

    // handle the onmouseover event for the table rows:
    mouseOver = row.onmouseover;
    mouseOver = function() {
        addClass(row,over);
    } // end of the onmouseover anonymous function

    // handle the onmouseout event for the table rows:
    mouseOut = row.onmouseout;
    mouseOut = function() {
        addClass(row,oldClassName);
    } // end of the onmouseout anonymous function
} // end of the stripeRows function 

function addClass(element,theClass) {
    // IF the table row does not have a className, append the required className:
    if (!element.className) {
        element.className = theClass;
    // ELSE append the required className to the className(s) that are already assigned to that row:
    } else {
        var newClassName = element.className;
        newClassName += " ";
        newClassName += theClass;
        element.className = newClassName;
    } // end of the className IF/ELSE  
} // end of the addClass function

function addLoadEvent(func) {
    // assign the window.onload function to a variable:
    var oldonload = window.onload;

    // IF the window.onload does not call a function:
    if (typeof window.onload != 'function') {
        window.onload = func;
    // ELSE set the window.load:
    } else {
        window.onload = function() {
            oldonload();
            func();
        } // end of the oldonload anonymous function
    } // end of the typeof IF
} // end of the addLoadEvent function

そしてあなたのcssの場合：
これを両方に入れるかstriped-tables.css、abstraction.css両方のhtmlファイルに同じcssファイルを含めます

.pri-stripe
{
    background-color:green;
}

.sec-stripe
{
    background-color:blue;
}
于 2012-11-05T11:31:24.010 に答える
0

必要ありませんgetElementsByTagName。テーブル要素とテーブル セクション要素には、子行である行プロパティがあります。したがって、次のようなことができます：

function stripeRows(tableSection, oddClass, evenClass) {
  var rows = tableSection.rows;

  for (var i=0, iLen=rows.length; i<iLen; i++) {
    rows[i].className = i%2? oddClass : evenClass;
  }
}

「tableSection」は、テーブル、tBody、tHead、または tFoot 要素のいずれかであることに注意してください。また、「addClass」関数を使用してクラスを追加することもできます。例として簡単にしています。

編集

コードに関するいくつかのコメント:

function stripemeTable() {
    // get the <tr> tags:
    var stripemeRows = document.getElementsByTagName('tr');

ドキュメント内のすべての tr 要素を返す場合、このテーブルをテーブルごとに実行する方がよい場合があります。

// IF the tableID is NOT stripeme, exit the stripemeTable function:
if (!document.getElementById || !document.getElementsByTagName || !document.getElementById('stripeme'))  {
    return false;

ここでは をテストしていますgetElementsByTagNameが、上記の行で使用されています。本当に getElementById をテストする必要がある場合 (現在サポートされていないため、非常にまれです)、次のことを検討してください。

     var stripeMe = document && document.getElementById && document.getElementById('stripeme');
     if (stripeMe) {

また、実際にテストせずに、行がテーブル「stripeMe」からのものであると想定します。行が「stripeMe」の ID を持つテーブル要素にある場合にのみ行をストライプする場合は、それを行います。クラスはもっと良いでしょう。とにかく、elseは冗長になりました。続けてください：

// ELSE loop through the rows and use the stripeRows function:  
} else {
    for (var i = 0; i < stripemeRows.length; i++) {
        stripeRows('stripeme','pri-stripe','sec-stripe','over-stripe');
    } // end of the rows FOR loop 
} // end of the tableID test IF/ELSE

代わりは：

     var stripemeRows = stripeMe.rows;
     for (var .... ) {
       ...
     }

また、本体の行のみをストライプ化する場合は、ヘッダー行を tHead 要素に配置し、テーブル本体の行のみをストライプ化します。

 var stripemeRows = stripeMe.tBodies[0].rows;
于 2012-11-05T02:35:30.513 に答える
0

ここにあなたのためのいくつかのヒントがあります：

関数 stripRows では、変数 rows が使用されていますが、定義されていません。おそらくvar rows = document.getElementsByTagName('tr');、その関数の先頭付近に何かがあるはずです。

後で同じ関数で} else if (rows[i]/2 != 0 && !rows[0]) {. おそらくあなたは} else if (i%2 == 0...){. 実際、全体の if...then は次のように書くほうがよいでしょう。

if( i%2 == 0 ) {
    addClass(rows[i],'even');
} else {
    addClass(rows[i],'odd');
}

お役に立てば幸いです。残りのエラーのほとんどは非常に似ているため、これら 2 つのことが役立つはずです。

于 2012-11-05T02:48:40.250 に答える