貌似是腾讯的web前端开发的题目：要求实现表格数据点击后循环移动

来源：互联网发布：幕墙结构设计软件编辑：程序博客网时间：2024/06/03 13:40

第一次学写javascript，有不妥的地方还请同学们指正，没有学javascript前还觉得蛮难的，今天看了点，也不是太难

<script language="javascript">window.onload=function(){var node=document.getElementById("table1");node.onclick=changetable;var i=0;for(i;i<node.rows.length;i++)if(i%2==0){   node.rows[i].style.background="#336699";   node.rows[i].onclick=function(event){    this.style.background="#00ff00";   };}else{   node.rows[i].style.background="#996633";}}function changetable(event){    var node=document.getElementById("table1");    var i=0;    for(i;i<node.rows.length-1;i++)    {    for(j=0;j<node.rows[i].cells.length;j++)    {       var temp;       temp=node.rows[i].cells[j].innerHTML;       node.rows[i].cells[j].innerHTML=node.rows[i+1].cells[j].innerHTML;       node.rows[i+1].cells[j].innerHTML=temp;       }    }}</script></head><body><table id="table1" width="200px" height="100px"><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><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><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><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><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><td>46</td><td>47</td><td>48</td><td>49</td><td>50</td></tr><tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td><td>56</td><td>57</td><td>58</td><td>59</td><td>50</td></tr><tr><td>61</td><td>62</td><td>63</td><td>64</td><td>65</td><td>66</td><td>67</td><td>68</td><td>69</td><td>70</td></tr></table></body>

另外页面中的html标签实际上是可以通过DOM自动生成的。同学们可以自己去完成