- 动态加载js
<script> function loadJS(){ //创建一个新的元素节点 var newScript = document.createElement('script'); //地址 newScript.src = 'http://how2j.cn/study/test3041.js'; var firstScript = document.getElementsByTagName("script")[0]; firstScript.parentNode.insertBefore(newScript,firstScript); } </script> <button οnclick="loadJS()">test3041.js</button>
- 动态建表
<body> <div id ="d"> </div> <script> function createTD(text){ var td=document.createElement("td"); var text= document.createTextNode(text); td.appendChild(text); return td; } function createTR(texts){ var tr=document.createElement("tr"); for(var i=0;i<texts.length;i++){ var td = createTD(texts[i]); tr.appendChild(td); } return tr; } function createTable(rows){ var table=document.createElement("table"); for(var i=0;i<rows.length;i++){ var tr= createTR(rows[i]); table.appendChild(tr); } return table; } var row0= new Array("id","名称","血量","伤害"); var row1= new Array("1","gareen","340","58"); var row2= new Array("2","teemo","320","76"); var row3= new Array("3","annie","380","38"); var row4= new Array("4","deadbrother","400","90"); var rows=new Array(row0,row1,row2,row3,row4); var div = document.getElementById("d"); var table=createTable(rows); div.appendChild(table); </script> </body>
-
表格排序
<style> table{ border-collapse:collapse; width:90%; } tr{ border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: lightgray; height:35px; } td{ width:25%; text-align:center; } a{ text-decoration: none; color:skyblue; } </style> <script type="text/javascript"> var reverse = false; function sort(col){ reverse = !reverse; var trs = document.getElementsByClassName("sort"); for(var x=0;x<trs.length-1;x++){ for(var y = x + 1;y<trs.length;y++){ var isswap = trs[x].children[col].innerHTML<trs[y].children[col].innerHTML; if(reverse?isswap:!isswap){ var temp = trs[x].innerHTML; trs[x].innerHTML = trs[y].innerHTML trs[y].innerHTML = temp; } } } } </script> <table> <tbody id="tbody"> <tr > <td ><a href="#" οnclick="sort(0)">id</a></td> <td ><a href="#" οnclick="sort(1)">名称</a></td> <td ><a href="#" οnclick="sort(2)">血量</a></td> <td ><a href="#" οnclick="sort(3)">伤害</a></td> </tr> <tr class="sort"> <td>1</td> <td>gareen</td> <td>340</td> <td>58</td> </tr> <tr class="sort"> <td>2</td> <td>teemo</td> <td>320</td> <td>76</td> </tr> <tr class="sort"> <td>3</td> <td>annie</td> <td>380</td> <td>38</td> </tr> <tr class="sort"> <td>4</td> <td>deadbrother</td> <td>400</td> <td>90</td> </tr> </tbody> </table>