怎么给table里符合条件的行加背景色

table是这种的
<table id="datagrid" fit="true" border="false" singleSelect="true" url="@Url.Action("StuList")"       idField="TimeUserId">
    <thead>
        <tr>
            <th field="Name" width="80">姓名</th>
            <th field="StuNo" width="80">学号</th>
            <th field="Age" width="80">年龄</th>
        </tr>
    </thead>
</table>
我希望让年龄小于18岁的学生资料背景颜色为红色 怎么搞？

解决方案 »

  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>无标题文档</title>
    <script type="text/javascript">
    window.onload = function() {
    var obj = document.getElementById('datagrid').getElementsByTagName('td');
    for (var i = 0; i < obj.length; i ++) {
    if (i % 3 == 2 && parseInt(obj[i].innerHTML) < 18) obj[i].style.backgroundColor = 'red';
    }
    }
    </script>
    </head><body>
    <table id="datagrid" fit="true" border="false" singleSelect="true" url="@Url.Action("StuList")" idField="TimeUserId">
      <thead>
        <tr>
          <th field="Name" width="80">姓名</th>
          <th field="StuNo" width="80">学号</th>
          <th field="Age" width="80">年龄</th>
        </tr>
      </thead>
      <tbody>
       <tr>
         <td>A</td>
            <td>1</td>
            <td>17</td>
        </tr>
        <tr>
         <td>B</td>
            <td>2</td>
            <td>19</td>
        </tr>
      </tbody>
    </table>
    </body>
    </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>无标题文档</title>
    <script type="text/javascript">
    window.onload = function() {
        var obj = document.getElementById('datagrid').getElementsByTagName('td');
        for (var i = 0,ele; ele=obj[i]; i ++) {
            if (i % 3 === 2 && parseInt(obj[i].innerHTML,10) < 18){
                obj[i].style.backgroundColor = 'red';
            }
        }
    }
    </script>
    </head><body>
    <table id="datagrid" fit="true" border="false" singleSelect="true" url="@Url.Action("StuList")" idField="TimeUserId">
      <thead>
        <tr>
          <th field="Name" width="80">姓名</th>
          <th field="StuNo" width="80">学号</th>
          <th field="Age" width="80">年龄</th>
        </tr>
      </thead>
      <tbody>
          <tr>
            <td>张三</td>
            <td>1</td>
            <td>5</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>2</td>
            <td>28</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>3</td>
            <td>16</td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>
      

  3.   

    看错了，原来是要给整行都加背景色。<!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>无标题文档</title>
    <script type="text/javascript">
    window.onload = function() {
        var obj = document.getElementById('datagrid').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
        for (var i = 0; i < obj.length; i ++) {
            if (parseInt(obj[i].getElementsByTagName('td')[2].innerHTML) < 18) obj[i].style.backgroundColor = 'red';
        }
    }
    </script>
    </head><body>
    <table id="datagrid" fit="true" border="false" singleSelect="true" url="@Url.Action("StuList")" idField="TimeUserId">
      <thead>
        <tr>
          <th field="Name" width="80">姓名</th>
          <th field="StuNo" width="80">学号</th>
          <th field="Age" width="80">年龄</th>
        </tr>
      </thead>
      <tbody>
          <tr>
            <td>A</td>
            <td>1</td>
            <td>17</td>
        </tr>
        <tr>
            <td>B</td>
            <td>2</td>
            <td>19</td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>
      

  4.   


    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload = function() {
        var obj = document.getElementById('datagrid').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
        for (var i = 0,ele;ele=obj[i]; i ++) {
            if (parseInt(ele.getElementsByTagName('td')[2].innerHTML,10) < 18){
                ele.style.backgroundColor = 'red';
            }
        }
    }
    </script>
    </head>
    <body>
    <table id="datagrid" fit="true" border="false" singleSelect="true" url="@Url.Action("StuList")" idField="TimeUserId">
      <thead>
        <tr>
          <th field="Name" width="80">姓名</th>
          <th field="StuNo" width="80">学号</th>
          <th field="Age" width="80">年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>1</td>
          <td>5</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>2</td>
          <td>28</td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>