◆◆◆◆◆我就不信没有明白人：表格交替颜色问题，数据来自嵌入html的xml数据岛

你expression里面判断只是看rowIndex%2，而下面这里明显就是一行，所以不可能变色的
<tr >
<td >
<div datafld='ID'></div>
</td>
<td >
<div datafld='STUDENT_ID'></div>
</td>
<td >
<div datafld='SUBJECT'></div>
</td>
<td >
<div datafld='MARK' ></div>
</td>
</tr>

解决方案 »

  1.   

    假如你改成这样：你看看变不变色？<table datasrc='#DesignDataSource3' border='1'>
    <tr >
    <td >
    <div datafld='ID'></div>
    </td>
    <td >
    <div datafld='STUDENT_ID'></div>
    </td>
    <td >
    <div datafld='SUBJECT'></div>
    </td>
    <td >
    <div datafld='MARK' ></div>
    </td>
    </tr>
    <tr >
    <td >
    <div datafld='ID'></div>
    </td>
    <td >
    <div datafld='STUDENT_ID'></div>
    </td>
    <td >
    <div datafld='SUBJECT'></div>
    </td>
    <td >
    <div datafld='MARK' ></div>
    </td>
    </tr>
    </table>
      

  2.   

    方法倒是有一个， 跟踪js代码发现tr的rowIndex能正确显示行号，故可以用js在html装载完数据后遍历表格行，改变颜色。 虽然没测试过， 应该是没问题的。但我觉得太麻烦，想知道有没有简单的办法。
      

  3.   

    你要一行里binding数据之后也会变色吗？有办法的。
      

  4.   

    这个问题可能是渲染的前后顺序有关。即在数据绑定之前，表格里只有一行，CSS对表格进行了单色的渲染，之后数据绑定操作，（不知是完全拷贝这个第一行的渲染效果还是其它什么原因），后续添加的行只延用了第一行的样式。这个问题可能与浏览器系统有关，我无力改写其代码，不过针对这种现象还是有办法可以补救的，就是让CSS的渲染动作发生成数据绑定之后：<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>test</title>
    <xml id='DesignDataSource3'>
    <?xml version="1.0" encoding="GB2312"?>
    <ROWS>
      <ROW>
        <ID>1</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>中文</SUBJECT>
        <MARK>90</MARK>
      </ROW>
      <ROW>
        <ID>2</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>数学</SUBJECT>
        <MARK>89</MARK>
      </ROW>
      <ROW>
        <ID>3</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>自然</SUBJECT>
        <MARK>87.5</MARK>
      </ROW>
      <ROW>
        <ID>4</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>地理</SUBJECT>
        <MARK>95</MARK>
      </ROW>
      <ROW>
        <ID>5</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>历史</SUBJECT>
        <MARK>86</MARK>
      </ROW>
      <ROW>
        <ID>6</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>文学</SUBJECT>
        <MARK>81</MARK>
      </ROW>
      <ROW>
        <ID>7</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>逻辑设计</SUBJECT>
        <MARK>91</MARK>
      </ROW>
      <ROW>
        <ID>8</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>美术</SUBJECT>
        <MARK>73</MARK>
      </ROW>
      <ROW>
        <ID>9</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>音乐</SUBJECT>
        <MARK>85.2</MARK>
      </ROW>
      <ROW>
        <ID>10</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>数据结构</SUBJECT>
        <MARK>95.5</MARK>
      </ROW>
    </ROWS></xml>
    <style type='text/css'>
    .mm tr
    {
    background-color:expression((this.rowIndex%2==0)?"#00FF33":"#CCFF33")
    }.mm td
    {
    background-color:expression((this.parentElement.rowIndex%2==0)?"#00FF33":"#CCFF33")
    }
    </style></head>
    <body onload="document.getElementById('Tab').className='mm'"><table id="Tab" datasrc='#DesignDataSource3' border='1'>
    <tr >
    <td >
    <div datafld='ID'></div>
    </td>
    <td >
    <div datafld='STUDENT_ID'></div>
    </td>
    <td >
    <div datafld='SUBJECT'></div>
    </td>
    <td >
    <div datafld='MARK' ></div>
    </td>
    </tr>
    </table>
    <hr>
    <table class="mm" border='1'>
    <tr >
    <td >
    <div>123</div>
    </td>
    <td >
    <div>234</div>
    </td>
    <td >
    <div>234</div>
    </td>
    <td >
    <div>234</div>
    </td>
    </tr>
    <tr >
    <td >
    <div>123</div>
    </td>
    <td >
    <div>234</div>
    </td>
    <td >
    <div>234</div>
    </td>
    <td >
    <div>234</div>
    </td>
    </tr>
    <tr >
    <td >
    <div>123</div>
    </td>
    <td >
    <div>234</div>
    </td>
    <td >
    <div>234</div>
    </td>
    <td >
    <div>234</div>
    </td>
    </tr>
    <tr >
    <td >
    <div>123</div>
    </td>
    <td >
    <div>234</div>
    </td>
    <td >
    <div>234</div>
    </td>
    <td >
    <div>234</div>
    </td>
    </tr>
    <tr >
    <td >
    <div>123</div>
    </td>
    <td >
    <div>234</div>
    </td>
    <td >
    <div>234</div>
    </td>
    <td >
    <div>234</div>
    </td>
    </tr>
    </table>
    </body></html>
      

  5.   

    meizz(梅花雪) 对原理分析的比较清楚， 方法也是可行的。 比我的遍历行高明多了。
    再等等，看BlueDestiny(www.never-online.net) 有没有什么其他好的方法。不久揭帖
      

  6.   

    的确，未binding前的数据row.length为1，onload后，数据岛自动会生动tr,td等标签，有点像.net里面的控件，我想过很多方法想来实现不用遍历就可以得出的方法，但目前为止还没有得到答案，如果要expression的话，
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>test</title>
    <xml id='DesignDataSource3'>
    <?xml version="1.0" encoding="GB2312"?>
    <ROWS>
      <ROW>
        <ID>1</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>中文</SUBJECT>
        <MARK>90</MARK>
      </ROW>
      <ROW>
        <ID>2</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>数学</SUBJECT>
        <MARK>89</MARK>
      </ROW>
      <ROW>
        <ID>3</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>自然</SUBJECT>
        <MARK>87.5</MARK>
      </ROW>
      <ROW>
        <ID>4</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>地理</SUBJECT>
        <MARK>95</MARK>
      </ROW>
      <ROW>
        <ID>5</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>历史</SUBJECT>
        <MARK>86</MARK>
      </ROW>
      <ROW>
        <ID>6</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>文学</SUBJECT>
        <MARK>81</MARK>
      </ROW>
      <ROW>
        <ID>7</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>逻辑设计</SUBJECT>
        <MARK>91</MARK>
      </ROW>
      <ROW>
        <ID>8</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>美术</SUBJECT>
        <MARK>73</MARK>
      </ROW>
      <ROW>
        <ID>9</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>音乐</SUBJECT>
        <MARK>85.2</MARK>
      </ROW>
      <ROW>
        <ID>10</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>数据结构</SUBJECT>
        <MARK>95.5</MARK>
      </ROW>
    </ROWS></xml>
    </head>
    <body >
    <style>
    <!--
    table {
    never-online:expression(onreadystatechange=function() {
    if(this.getAttribute("datasrc")) {
    if(this.readyState=="complete") {
    for(var i=0; i<this.rows.length; i++) {
    rows[i].style.backgroundColor = (i%2==0) ? "#006600" : "#009900";
    rows[i].style.color = "#fff";
    }
    }
    }
    });
    }
    -->
    </style>
    <table datasrc='#DesignDataSource3' border='1' id="tblDs">
    <tr >
    <td >
    <div datafld='ID'></div>
    </td>
    <td >
    <div datafld='STUDENT_ID'></div>
    </td>
    <td >
    <div datafld='SUBJECT'></div>
    </td>
    <td >
    <div datafld='MARK' ></div>
    </td>
    </tr>
    </table>
    </body></html>
      

  7.   

    BlueDestiny 与其你在CSS里写这么多的代码，还不如直接写个HTC来得清爽
      

  8.   

    不过现在又有个想法，用expression 判断是否载入完毕，如果是的话，自动把rows的className绑到table上，也就是结合meizz的styel class我试试看。wait a moment...
      

  9.   

    meizz呵呵，我是看楼主喜欢expression，所以也就写了个expression，只是技术讨论，见笑了。:D
      

  10.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>test</title>
    <xml id='DesignDataSource3'>
    <?xml version="1.0" encoding="GB2312"?>
    <ROWS>
      <ROW>
        <ID>1</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>中文</SUBJECT>
        <MARK>90</MARK>
      </ROW>
      <ROW>
        <ID>2</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>数学</SUBJECT>
        <MARK>89</MARK>
      </ROW>
      <ROW>
        <ID>3</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>自然</SUBJECT>
        <MARK>87.5</MARK>
      </ROW>
      <ROW>
        <ID>4</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>地理</SUBJECT>
        <MARK>95</MARK>
      </ROW>
      <ROW>
        <ID>5</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>历史</SUBJECT>
        <MARK>86</MARK>
      </ROW>
      <ROW>
        <ID>6</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>文学</SUBJECT>
        <MARK>81</MARK>
      </ROW>
      <ROW>
        <ID>7</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>逻辑设计</SUBJECT>
        <MARK>91</MARK>
      </ROW>
      <ROW>
        <ID>8</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>美术</SUBJECT>
        <MARK>73</MARK>
      </ROW>
      <ROW>
        <ID>9</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>音乐</SUBJECT>
        <MARK>85.2</MARK>
      </ROW>
      <ROW>
        <ID>10</ID>
        <STUDENT_ID>1</STUDENT_ID>
        <SUBJECT>数据结构</SUBJECT>
        <MARK>95.5</MARK>
      </ROW>
    </ROWS></xml>
    </head>
    <body >
    <style>
    <!--
    table {
    never-online:expression(onreadystatechange=function(){this.readyState=="complete" ? this.className = "mm" : "";});
    }
    .mm tr
    {
    background-color:expression((this.rowIndex%2==0)?"#00FF33":"#CCFF33")
    }.mm td
    {
    background-color:expression((this.parentElement.rowIndex%2==0)?"#00FF33":"#CCFF33")
    }
    -->
    </style>
    <table datasrc='#DesignDataSource3' border='1' id="tblDs">
    <tr >
    <td >
    <div datafld='ID'></div>
    </td>
    <td >
    <div datafld='STUDENT_ID'></div>
    </td>
    <td >
    <div datafld='SUBJECT'></div>
    </td>
    <td >
    <div datafld='MARK' ></div>
    </td>
    </tr>
    </table>
    </body></html>
      

  11.   

    在expression里table的onload事件不会触发，所以只有用onreadystatechange来绑在CSS上了
      

  12.   

    在expression里table的onload事件不会触发，所以只有用onreadystatechange来绑在CSS上了
      

  13.   

    我更偏向于用class， 因为一个页面不止一个这样的table，且table的id事先是不确定的。
      

  14.   

    或者getElementByName也是可以的。