web前端知识

4.表格与表单

4.1 动态添加行

<script language=”javascript”>

window.onload=function(){

    var oTr = document.getElementById(“member”).insertRow(2);    //插入一行

    var aText = new Array();

    aText[0] = document.createTextNode(“fresheggs”);

    aText[1] = document.createTextNode(“W610″);

    aText[2] = document.createTextNode(“Nov 5th”);

    aText[3] = document.createTextNode(“Scorpio”);

    aText[4] = document.createTextNode(“1038818″);

    for(var i=0;i<aText.length;i++){

        var oTd = oTr.insertCell(i);

        oTd.appendChild(aText[i]);

    }

}

</script>

4.2修改单元格内容

<script language=”javascript”>

window.onload=function(){

    var oTable = document.getElementById(“member”);

    oTable.rows[3].cells[4].innerHTML = “lost”;        //修改单元格内容

}

</script>

4.3 动态删除

parentElement是IE dom，

parentNode是标准DOM

<script language=”javascript”>

window.onload=function(){

    var oTable = document.getElementById(“member”);

    oTable.deleteRow(2);        //删除一行，后面的行号自动补齐//指从table中的第2行开始进行删除

    oTable.rows[2].deleteCell(1);    //删除一个单元格，后面的也自动补齐

}

</script>

<script language=”javascript”>

function myDelete(){

    var oTable = document.getElementById(“member”);

    //删除该行

    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

}

window.onload=function(){

    var oTable = document.getElementById(“member”);

    var oTd;

    //动态添加delete链接

    for(var i=1;i<oTable.rows.length;i++){

        oTd = oTable.rows[i].insertCell(5);

        oTd.innerHTML = “<a href=’#’>delete</a>”;

        oTd.firstChild.onclick = myDelete;    //添加删除事件

    }

}

</script>

4.4动态删除列

<script language=”javascript”>

function deleteColumn(oTable,iNum){

    //自定义删除列函数，即每行删除相应单元格

    for(var i=0;i<oTable.rows.length;i++)

        oTable.rows[i].deleteCell(iNum);

}

window.onload=function(){

    var oTable = document.getElementById(“member”);

    deleteColumn(oTable,2);

}

</script>

4.5 控制textarea的字符个数

<script language=”javascript”>

function LessThan(oTextArea){

    //返回文本框字符个数是否符号要求的boolean值

    return oTextArea.value.length < oTextArea.getAttribute(“maxlength”);

}

</script>