JavaScript的 - 读表

这是一个功能,当通过一个表作为参数,适用于不同的风格颜色交替行以提高可读性。 即第一行是暗灰色的,第二行灯成长,第三排为深灰色等。

正如前面提到的,它被传递整个表作为参数。 行的都没有标识。 在这条线开始var aTBODY = oTable.getElementsByTagName("tbody");我明白发生了什么。 也就是说,它得到的表身,然后在它的所有行和条纹看着。

1)但在节目的前五行究竟发生了什么? 该意见没有解释清楚我。

2)不遍历表的长度(即idArray.length)创建行的数组? 什么是使用var ID =发生idArray [INDX] ?

3)当它说,在评论中, get the table that corresponds to this id ,使用代码var oTable = document.getElementById(id)原因,这是一个必要的步骤? 怎么了?

谢谢你,如果你能解释一下

function createStripedTable(idArray) { // for each table ID that we're given, stripe all the rows. for (var indx = 0; indx < idArray.length; indx++) { var id = idArray[indx]; // get the table that corresponds to this ID var oTable = document.getElementById(id); if (oTable == null) return; // get its table body, which contains all the TR tags var aTBODY = oTable.getElementsByTagName("tbody"); // set the CSS class for each one of the TR tags for (var i = 0; i < aTBODY.length; i++) { // get an array of all the TR tags in the TBODY var aTR = aTBODY[i].getElementsByTagName("tr"); for (var j = 0; j < aTR.length; j++) { // the % operator divides the given number by another // and returns the remainder. This is how we alternate the // rows. aTR[j].className = (j % 2 == 1) ? "stripe1" : "stripe2"; } } } }

下面是调用它的代码。

function() {createStripedTable(new Array("MSFTQuotes"))

这里是传递了一个,只有一个表的摘录。

<body> <table id="MSFTQuotes"> <thead> <tr> <th colspan="7" align="center"> <span class="TableTitle">Stock Activity for Aug 5, 2008 - Nov 5, 2008 </span> </th> </tr> <tr> <th align="center" width="14%"> <div align="right" class="style5"> Date</div> </th> <th align="center" width="14%"> <div align="right" class="style5"> Open</div> </th> <th align="center" width="14%"> <div align="right" class="style5"> High</div> </th> <th align="center" width="14%"> <div align="right" class="style5"> Low</div> </th> <th align="center" width="14%"> <div align="right" class="style5"> Close</div> </th> <th align="center" width="14%"> <div align="right" class="style5"> Volume</div> </th> <th align="center" width="14%"> <div align="right" class="style5"> Adj Close</div> </th> </tr> </thead> <tbody> <tr> <td align="right"> 5-Nov-08 </td> <td align="right"> 29.21 </td> <td align="right"> 29.36 </td> <td align="right"> 29.03 </td> <td align="right"> 29.31 </td> <td align="right"> 95,337,696 </td> <td align="right"> 29.31 </td>

--------------解决方案-------------

该函数接受数组id值相对应的table元素。 它通过循环的ID和做的所有的其划分工作tbody表中的元素。

有点多个带注释(见TJC: S):

function createStripedTable(idArray) {
// for each table ID that we're given, stripe all the rows.
// TJC: Loop through all of the IDs in the given array
for (var indx = 0; indx < idArray.length; indx++) {
// TJC: Get the ID value for index `indx` in the array
var id = idArray[indx];
// get the table that corresponds to this ID
var oTable = document.getElementById(id);
if (oTable == null) // TJC: Invalid ID, ignore it
return;

// get its table body, which contains all the TR tags
// TJC: Get the `tbody`s under the table. One table
// can have multiple `tbody` elements.
var aTBODY = oTable.getElementsByTagName("tbody");

// set the CSS class for each one of the TR tags
for (var i = 0; i < aTBODY.length; i++) {
// get an array of all the TR tags in the TBODY
// TJC: It's actually a NodeList, but you can largely
// treat it as an array
var aTR = aTBODY[i].getElementsByTagName("tr");

for (var j = 0; j < aTR.length; j++) {
// the % operator divides the given number by another
// and returns the remainder. This is how we alternate the
// rows.
aTR[j].className = (j % 2 == 1) ? "stripe1" : "stripe2";
}
}
}
}

好消息是,IE9终于支持nth-child伪类,等哪天你就可以停止与代码这样做。

idArray是所有的IDS的一个以上的表阵列。 该功能将改变交替行每个id是在idArray的表。

外环通过IDS迭代。 在循环内的前五个行假设它们的表的ID,和提取对应于每个ID的表元素中的内容。

循环中的下一个五行然后取表身内容,并更改CSS类交替行的。

添加之前,首先这些线路for循环中的代码

var tabarray=new Array();
tabarray.push(thetableidYoupassed);
idArray=tabArray

“thetableidYoupassed”是你调用该函数的实际参数'createStripedTable“

保持,因为它是代码的其余部分...这应该做工精细...

你的方法接受表ID数组。 因此,所有的表需要有标识。

function createStripedTable(idArray) { //idArray is an array of table IDs

然后,它遍历他们一个得到ID只能有一个

for (var indx = 0; indx < idArray.length; indx++) {
var id = idArray[indx]; //this is the ID of a table

然后,它会检查表是否实际存在于DOM或不

var oTable = document.getElementById(id); //IF the table with a matching ID is not found, you get NULL
if (oTable == null)
return; //no table that matches the ID? return

理想情况下,该行应continue或类似的东西。 因为在此实例。 如果你通过你的方法就像一个数组['table1', 'table2', 'faketable', 'table3']你的方法不会破坏table3 ,因为它永远不会在数组中到达那里(因为return

分类:JavaScript的 时间:2012-01-01 人气:0
本文关键词: JavaScript的
分享到:

相关文章

  • JavaScript对象莫名其妙地绑定到窗口和对象 2012-01-01

    我已经JavaScript对象 var Bucket = function(id) { this.id = id this.items = [] } Bucket.prototype.add_item = function(item) { //some uniquness checking code here this.items.push(item); } 出于某种原因,当我实例化对象,并尝试添加一个项目,我得到一个错误 var bct = new Bucket bct.add_item(so

  • 输入(密码)的onblur的JavaScript错误Internet Explorer 7和8 2012-01-01

    这里是我的javascript输入内嵌代码 <input type="text" value="Please type username here..." onfocus="if (this.value == 'Please type username here...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Please type use

  • 这是什么奇怪的JavaScript数组语法? 2012-01-01

    我有一些麻烦,谷歌搜索和计算器的答案是什么这段JavaScript代码是这样做的: obj['e'+type+fn]( window.event ); 对我来说,这看起来像一个参数/参数数组元素: array[index](argument); 但是,我只能猜测这是什么在做什么. 这是等同于: array[index]=argument 这是分配的一个参数数组元素? 如果有人可以提供什么这是做一个简单的/通用的例子,将是巨大的. 我试图破译约翰Resig的addEvent()的实现. 我真的不想

  • 如何在Javascript的方案? 2012-01-01

    我试图写我自己的JavaScript框架,像jQuery的. 我使用的Aptana Studio进行设计网站. 我正打算创建一个网页,写的Javascript代码,就像我们会做一个网站. 突然,我注意到的Aptana Studio还拥有一个Javascript项目. 所以,我创建了一个新的Javascript项目. 但它主要是允许你创建只有.js文件中,并没有HTML文件. 我不知道一个独立的.js文件会做什么? 我我就不会需要一个HTML文件来执行,并测试我的javascript代码? 当然,

  • EVAL的JavaScript,检查语法错误 2012-01-01

    我想知道是否有可能通过JavaScript找到,如果调用的eval()有一个语法错误或不确定的变量,等等......所以可以说我使用eval一些任意JavaScript有没有办法来捕捉错误输出该EVAL的? --------------解决方案------------- 你可以测试是否有一个错误确实是一个SyntaxError. try { eval(code); } catch (e) { if (e instanceof SyntaxError) { alert(e.message); }

  • JavaScript的:Class.method与Class.prototype.method 2012-01-01

    下面的两个声明之间的区别是什么? Class.method = function () { /* code */ } Class.prototype.method = function () { /* code using this.values */ } 是不是还好想到的第一个语句声明一个静态方法,第二个语句作为一个实例方法的声明? --------------解决方案------------- 是的,第一个函数与构造函数的对象实例没有关系,你可以认为它像一个"静态方法". 在Jav

  • 错误在JavaScript脚本的JSON字符串 2012-01-01

    我在Javascript中使用JSON在我的asp.net项目第一次. 我是新来的吧. 我已经成功地创建了页面加载一个JSON字符串,并将其存储在一个隐藏字段. 现在,在Javascript中当我尝试的eval或解析该字符串,它不解析它. 请帮忙. 以下是我正在做的: var jsonText = $("#hiddenJson").val(); var jsonObject = JSON.parse(jsonText); //var jsonObject = eval("(&

  • 从WOEID天气预报(YQL使用或RSS)在JavaScript? 2012-01-01

    有没有获得在JavaScript从WOEID预报天气的方法吗? 我尝试使用雅虎的RSS源,但无法得到它的工作. 这里是我的代码 var url = "http://weather.yahooapis.com/forecastrss?w=" + encodeURIComponent('WOEID here'); $.ajax({ url: url, dataType: 'jsonp', jsonpCallback: function(data) { console.log(data);

  • Javascript的麻烦parseFloat和的if / else循环 2012-01-01

    因此,工作的一些代码,我不与我的第二个功能是保持返回40环斑的问题,我认为循环书写正确. 我猜测它的if和else条件中传递的值? 如果(par_hour <40),其来源于parseFloat function addEmployee() { var employees = new Array(); employees[0] = window.prompt("Enter employee name","Bob"); var hours = new Array

  • Javascript链接在同一个页面打开 2012-01-01

    我如何使用JavaScript在同一页上加载的内容,而不重新加载整个页面, --------------解决方案------------- 您正在寻找所谓AJAX - 有很多的教程在那里. 最简单的方法是使用jQuery的append方法:http://api.jquery.com/append/或jQuery的文字方法:http://api.jquery.com/text/

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.269 (s). 10 q(s)