利用js对html元素进行增删改操作

Posted 2020-10-25 青年总裁

使用js对表格元素进行增删改操作

function createTable(){

        
        var b    =    document.getElementById("hai");
        var t    =    document.createElement("table");
        t.border    =    "1";
        t.id        =    "mytable";
        var caption    =    t.createCaption();
        caption.innerhtml="我的表格";
        for(var i    =    0;i<5;i++){
            var tr    =    t.insertRow(i);
            for(var j=0;j<4;j++){
                var td=tr.insertCell(j);
                td.innerHTML="单元格"+i+j;
            }
        }
        b.appendChild(t);
        
        
    }
    function deleteLastRow(){
            var t    =    document.getElementById("mytable");
            if(t.rows.length>0){
                t.deleteRow(t.rows.length-1);
            }
    
    }
    function deleteLastCell(){
        var t    =    document.getElementById("mytable");
        var lastRow=t.rows[t.rows.length-1];
        if(lastRow.cells.length>0){
            lastRow.deleteCell(lastRow.cells.length-1);
            
            
        }
    }

 

 

html代码

<input type="button" value="创建一个5行4列的表格" onclick="createTable()" />
    <input type="button" value="删除最后一行"  onclick="deleteLastRow()"/>
    <input type="button" value="删除最后一个单元格" onclick="deleteLastCell()" />

 创建节点

function wen(){
        var hai        =    document.getElementById("hai");
        var element    =    document.createElement("li");
        element.innerHTML="昆明"
        //复制节点    hai.appendChild(element);
        //插入节点   hai.insertBefore(element,hai.firstChild.nextSibling);
        // 替换节点  hai.replaceChild(element,hai.firstChild.nextSibling);
        
    }
    function luo(){
        var wen        =    document.getElementById("thio");
        var element    =    hai.firstChild.nextSibling.cloneNode(true);    
         hai.appendChild(element);
    }
    function del(){
     var wen        =    document.getElementById("thio");
     var element    =    hai.firstChild.nextSibling;
     hai.removeChild(element);
    }

html代码

<ul id="hai">
    <li>上海</li>
    <li>昆明</li>
    <li>杭州</li>
    
</ul>
    <input type="button" value="创建复制替换节点" onclick="wen()" />
    <input type="button" value=" 复制节点" onclick="luo()" />
    <input type="button" value="删除节点" onclick="del()" />

js代码

function luohai(){
        var element    =    document.createElement("select");
        for(var i    =    0;i<10;i++){
            var op    =    new Option("新增的选项"+i,i);
            element.options[i]=op;
        }
        element.size=5;
        element.id    ="luo";
        document.getElementById("test").appendChild(element);
    }
    function delOne(){
        var luo=document.getElementById("luo");
        if(luo.options.length>0){
            //luo.remove(luo.options.length-1)
            luo.options[luo.options.length-1]=null;
        }
    }
    function clearAll(){
    var luo=document.getElementById("luo");
        if(luo.options.length>0){
            luo.options.length=0;
        
        }
    }

html

<input type="button" value="创建一个城市列表框" onclick="luohai()" />
    <input  type="button" value="一条条删除列表框内容" onclick="delOne()"/>
    <input type="button" value="一次性清空列表框内容" onclick="clearAll()" />