0

我的问题是：我如何遍历标签以便我可以对表格行进行条带化？请记住：如果解决方案在 stripeRows() 函数中，则必须对其进行抽象（不引用标记名称、类名等）。该函数对表格的行进行条带化处理，如果您查看 JavaScript 代码，我认为这将是显而易见的。

大部分都完成了（我认为），但我在文件的一个方面遇到了问题。解决方案必须在不编辑 HTML 或 CSS、没有 jQuery 和没有 innerHTML 的情况下抽象和解决。

我是否需要遍历 stripeMeTable() 和 webcoursesTable() 函数或 stripeRows(tableID,odd,even,over) 函数中的行？

我在下面包括了我的 HTML 和 JavaScript。

我需要 JavaScript 文件来处理这两个 HTML 页面。

好的，这是代码。谢谢你的帮助。

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，在不了解全部限制的情况下，我认为这符合您的所有要求。第一行没有被剥离（通过初始化i为 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

这里有一些提示给你：

在函数 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');
}

我希望这会有所帮助——大多数其他错误错误都非常相似，所以这两件事应该可以帮助你开始。

于 2012-11-05T02:48:40.250 回答
0

你不需要getElementsByTagName。表格和表格部分元素有一个rows属性，它是它们的子行。因此，您可以执行以下操作：

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”，而没有实际测试。如果您只想对位于 ID 为“stripeMe”的表格元素中的行进行条带化，请执行此操作。一个班会更好。无论如何， 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 回答