HTML 实现：点击按钮让 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` 函数。该函数遍历表格的每一行，根据行号的奇偶性设置颜色为红色或绿色。 ######[AI写代码神器 | 817点数解答 | 2024-10-12 17:03:58]

服务商

更多选项

快捷项

自定义