酷代码 AI
菜单
服务商

用htmll制作一个10行5列的表格,设置有一个按钮,当点击按钮的时候,单数行背景颜色为红色,双数行背景颜色为绿色,完整实现代码

以下是一个使用 HTML 和 JavaScript 实现的示例代码: ```html <!DOCTYPE html> <html> <body> <table id="myTable"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td>30</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td> </tr> <tr> <td>36</td> <td>37</td> <td>38</td> <td>39</td> <td>40</td> </tr> <tr> <td>41</td> <td>42</td> <td>43</td> <td>44</td> <td>45</td> </tr> <tr> <td>46</td> <td>47</td> <td>48</td> <td>49</td> <td>50</td> </tr> </table> <button onclick="changeColors()">点击变色</button> <script> function changeColors() { var rows = document.getElementById("myTable").rows; for (var i = 0; i < rows.length; i++) { if (i % 2 === 0) { rows[i].style.backgroundColor = "green"; } else { rows[i].style.backgroundColor = "red"; } } } </script> </body> </html> ``` 在上述代码中,我们首先创建了一个 10 行 5 列的表格。然后添加了一个按钮,当点击按钮时,调用 `changeColors` 函数。该函数遍历表格的每一行,根据行号的奇偶性设置颜色为红色或绿色。 [2024-10-12 17:03:58 | AI写代码神器 | 817点数解答]

相关提问
实用工具查看更多
今日油价 [生活类]
图片互转base64 [开发类]
时间转换器 [开发类]
数独游戏 [娱乐类]
经典推箱子 [娱乐类]
AI摸鱼五子棋 [娱乐类]