个人中心
gpt4 book ai didi

JavaScript 条纹表行抽象函数

转载 作者：行者123 更新时间：2023-11-28 13:33:53 25 4
gpt4 key购买 nike

我的问题是:如何遍历标签以便对表格行进行 strip 化？请记住:如果解决方案在 stripeRows() 函数中，则必须对其进行抽象(不引用标记名称、类名等)。如果您查看 JavaScript 代码，我认为该函数会 strip 化表格的行。

大部分已完成(我认为)，但我在处理文件的一个方面时遇到了问题。解决方案必须在不编辑 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++) {

最佳答案

这里有一些提示:

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

我希望这对您有所帮助——其余大部分错误都非常相似，因此这两件事应该可以帮助您继续前进。

关于JavaScript 条纹表行抽象函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13225072/

25 4 0
文章推荐： css - 更少的设置不起作用
文章推荐： html - Twitter Bootstrap 和格式化 CSS 中的 header 类
文章推荐： jquery - 是否可以在 CSS3 中的同一元素上链接动画
文章推荐： javascript - Angularjs 如何在两个模态之间进行通信
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com