JavaScript 条带表行抽象函数答案

【问题标题】：JavaScript Stripe Table Rows Abstracted FunctionJavaScript 条带表行抽象函数
【发布时间】：2012-10-24 20:57:55
【问题描述】：

我的问题是：我如何遍历标签以便我可以对表格行进行条带化？请记住：如果解决方案在 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++) {

【问题讨论】：

如果在 striperows() 函数中需要循环遍历元素，则否：不能引用标记。必须抽象。如果我可以遍历 stripemeTable 和 webcoursesTable() 函数中的标签，那么我可以参考标签。

标签： javascript html css function abstract

【解决方案1】：

您不需要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”函数来添加类，我以简单为例。

编辑

代码上的一些cmets：

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;

【讨论】：

RobG，感谢您的帮助。我无法让它工作，我收到这个错误：TypeError: rows is undefined
Rob，我想我需要找到一种方法来循环遍历抽象函数中的标签。但我无法引用标签。我需要类似 var rows = tableID.getElementsByTagName(tag);然后遍历行。但我不知道该怎么做。我将使用我认为有问题的代码行来编辑上面的代码。
function stripeRows(tableID,odd,even,over) { // 获取带有 tableID 的表 var table = document.getElementById(tableID); // 获取表格行：var rows = tableID.rows;
@JasonMcCoy——这不正是我发布的第一个函数的作用吗？除非您想传递表 ID 而不是 tableSection。我认为你可以解决这个问题。
我明白你在说什么，但是 stripeRows(tableID,odd,even,over) 函数如何知道如何根据表行分配类名？在 stripeRows(tableID,odd,even,over) 函数中，我需要有一个通用（抽象）的方式来引用需要条带化的行。

【解决方案3】：

@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;
}

【讨论】：

谢谢 SammyO，看起来这正是我所需要的，但我仍然无法让它工作。
我已经添加了我正在使用的 CSS。两个 HTML 文件都显示条纹表。如果这不是您所看到的 - 您看到了什么？