1 <HTML> 2 <Head> 3 <Scripttype= "Text/javascript"> 4 /**5 recently, as a result of the project needs, there is a problem:6 a table displays N records, with every 3 lines changing color, for example: Red background, 4,5,6 row green background, 7,8,9 row red background ... And so on 7 */8 window.onload=function() { 9 varTBL=document.getElementById ("Table"); //Get table FirstTen varrows=Tbl.getelementsbytagname ("TR"); //get the line tr inside One for(i=0; I<Rows.length;i++) { //traverse the rows inside A varJ=parseint (i/q); //with every 3 behavioral units, J is: 3 times 0, 3 times 1, 3 times 2 ... - if(J%2==0){ //then set the two colors to show every 3 lines by modulo - Rows[i].style.backgroundcolor="#f00"; the }Else{ - Rows[i].style.backgroundcolor="#0f0"; - } - } + }; - </Script> + </Head> A <Body> at <TableID= "Table"Border= "1"width= "500px"> - <TR><TD>1</TD></TR> - <TR><TD>2</TD></TR> - <TR><TD>3</TD></TR> - <TR><TD>4</TD></TR> - <TR><TD>5</TD></TR> in <TR><TD>6</TD></TR> - <TR><TD>7</TD></TR> to <TR><TD>8</TD></TR> + <TR><TD>9</TD></TR> - <TR><TD>10</TD></TR> the <TR><TD>11</TD></TR> * <TR><TD>12</TD></TR> $ <TR><TD>13</TD></TR> Panax Notoginseng <TR><TD>14</TD></TR> - <TR><TD>15</TD></TR> the <TR><TD>16</TD></TR> + <TR><TD>17</TD></TR> A <TR><TD>18</TD></TR> the </Table> + </Body> - </HTML>
The final effect of the above code is:
Html+css+js_ table displays two different colors at every 3 rows