css怎么控制table单双行

html-css09

css怎么控制table单双行,第1张

css控制table单双行的方法是获取到行号。

<style type="text/css">

#tb tr {

background-color: expression(

this.sectionRowIndex % 2 == 0 ? "#fff" : "#efefef"

)

TableSelect: expression(

this.sectionRowIndex == 0 ? "" :

(

onmouseover = function()

{

this.style.backgroundColor="#69CDFF"

},

onmouseout = function()

{

var color

if(this.sectionRowIndex % 2 == 0){

color = "#fff"

} else {

color = "#efefef"

}

this.style.backgroundColor=color

}

)

)

}

</style>

table如下：

<body>

<table cellspacing="1" class="FindAreaTable1" ID="DataGrid1">

<tr>

<td>首行首列</td>

<td>首行</td>

<td>首行</td>

<td>首行</td>

<td>首行</td>

<td>首行</td>

</tr>

<tr>

<td>行1首列</td>

<td>行1</td>

<td>行1</td>

<td>行1</td>

<td>行1</td>

<td>行1</td>

</tr>

<tr>

<td>行2首列</td>

<td>行2</td>

<td>行2</td>

<td>行2</td>

<td>行2</td>

<td>行2</td>

</tr>

<tr>

<td>行3首列</td>

<td>行3</td>

<td>行3</td>

<td>行3</td>

<td>行3</td>

<td>行3</td>

</tr>

<tr>

<td>行4首列</td>

<td>行4</td>

<td>行4</td>

<td>行4</td>

<td>行4</td>

<td>行4</td>

</tr>

<tr>

<td>行5首列</td>

<td>行5</td>

<td>行5</td>

<td>行5</td>

<td>行5</td>

<td>行5</td>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>JS Table</title>

        <style>

            .blue {

                background:blue

                color:#fff

            }

            

            .red {

                background:red

                color:#fff

            }

        </style>

    </head>

    <body>

        <table id="t">

            <tr>

                <th>Column One</th>

                <th>Column Two</th>

                <th>Column Three</th>

                <th>Column Four</th>

            </tr>

            <tr>

                <td>Data One</td>

                <td>Data Two</td>

                <td>Data Three</td>

                <td>Data Four</td>

            </tr>

            <tr>

                <td>Data Five</td>

                <td>Data Six</td>

                <td>Data Seven</td>

                <td>Data Eight</td>

            </tr>

        </table>

        <script>

            var t = document.getElementById("t")

            //下面是 js 控制表格行列

            t.rows[1].cells[1].className= "blue"

            t.rows[2].cells[3].className = "red"

        </script>    

    </body>

</html>

其实这个问题用css解决是最完美方案，完全不需要js代码，任意行的表格都可通杀：

<style>

table tr:nth-child(3n+4) td {border-bottom:solid 2px #999}

</style>

<table width="200" border="0">

<tbody>

<tr><td>行号</td><td>内容</td></tr>

<tr><td>1</td><td> </td></tr>

<tr><td>2</td><td> </td></tr>

<tr><td>3</td><td> </td></tr>

<tr><td>4</td><td> </td></tr>

<tr><td>5</td><td> </td></tr>

<tr><td>6</td><td> </td></tr>

</tbody>

</table>