HTML DOM（动态加载js、动态建表、表格排序）

最新推荐文章于 2024-08-05 11:54:10 发布

litengbin

最新推荐文章于 2024-08-05 11:54:10 发布

阅读量793

点赞数

分类专栏：前端-HTML、CSS、Javascript

前端-HTML、CSS、Javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

动态加载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>